@charset "utf-8";
/* CSS Document */

.clearfix:after {content: " ";
  display: block;
  clear: both;
}
html, body {margin: 0;  padding: 0;}
html {font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "sans-serif"; font-size: 14px;}
header, section, footer {}
a:hover{opacity: 0.7;}
.marginBottom1{margin-bottom: 1% !important;}
.marginBottom2{margin-bottom: 2% !important;}
.marginBottom4{margin-bottom: 4% !important;}
.marginBottom10{margin-bottom: 10% !important;}
.marginBottom10px{margin-bottom: 10px !important;}
.marginBottom20px{margin-bottom: 20px !important;}
.marginTop1{margin-top: 1% !important}
.marginTop2{margin-top: 2% !important}
.marginTop4{margin-top: 4% !important}
.marginTop10{margin-top: 10% !important}
.colorWhite{color: #FFF !important;}
/*responsive common
********************************************************/
.spContents{display: none;}
.pcContents{display: block;}
@media screen and (max-width: 900px) {
.spContents{display: block;}
.pcContents{display: none;}
}
/*layout
********************************************************/
section{position: relative;}
.inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
padding: 0 10px 8% 10px;
box-sizing: border-box;
}
@media screen and (max-width: 600px) {
.inner {padding: 0 10px 15% 10px;}
}
.normalContent{
background: rgb(239,239,239);
background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(255,255,255,1) 30%);
background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 30%);
background: linear-gradient(to bottom, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 30%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff',GradientType=0 );
}
/*function
********************************************************/
.btnCV,.btnNormal{
display: block;
width: 80%;
max-width: 600px;
text-align: center;
margin: 0 auto;
padding: 1em 0;
font-size: 1.5rem;
border-radius: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
@media screen and (max-width: 900px) {
.btnCV,.btnNormal{font-size: 1.3rem;}
}

.btnCV{
color: #FFF !important;
font-weight: bold;
text-shadow: -1px -1px 0px #cf7432;
background: #f96401;
background: #ff9900;
background: -moz-linear-gradient(top, #ff9900 25%, #f96401 100%);
background: -webkit-linear-gradient(top, #ff9900 25%,#f96401 100%);
background: linear-gradient(to bottom, #ff9900 25%,#f96401 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9900', endColorstr='#f96401',GradientType=0 );
}
.btnNormal{
color: #333;
border: 1px solid #EEE;
background: #ffffff;
background: -moz-linear-gradient(top, #fff 38%, #EEE 100%);
background: -webkit-linear-gradient(top, #fff 38%,#EEE 100%);
background: linear-gradient(to bottom, #fff 38%,#EEE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#EEE',GradientType=0 );
}
.btnClose{
  font-weight: bold;
  font-size: 1.4rem;
  color: #ff0000 !important;  
  background: none;
  text-shadow: none;
  box-shadow: none;
  margin: 20px auto 10px;
  text-align: center;
}
/*header
********************************************************/
#header {
position: fixed;
z-index: 9999;
top: 0;
right: 0;
transition: .3s;
width: 100%;
display: flex;
justify-content: flex-end;
}
.headerNavWrap, .headerNav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
align-items: center;
}
.headerNavWrap {padding: 10px;}
.headerNav {}
.headerNav li {margin-right: 3px;}
.headerNav li a {
  font-size: 0.7rem;
  font-weight: bold;
  display: block;
  color: #FFF;
  padding: 1em 1.5em;
  background: #0366AA;
  border-radius: 4px;
  transition: .5s;
}
.headerNav li a:hover {}
.headerNav li:last-child {margin-right: 0;}
.headerNav li a.conversionBtn {background: #f96401;}
.headerNav li a.conversionBtn:hover {}
#js-menuBk {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
}
#js-closeBtnWrap {display: none;}
#js-openBtn {display: none;}
.menuClose {
  display: inline-block;
  padding: 20px;
}

@media screen and (max-width: 900px) {
.headerNavWrap {
  display: block;
  position: relative;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
}
.headerNav {display: block;}
.header__logo img { width: 124px;}
#js-closeBtnWrap {
  display: block;
  background: #fff;
}
#js-openBtn, #js-closeBtn {
  width: 50px;
  height: 44px;
  box-sizing: border-box;
  padding: 8px;
  position: relative;
}
#js-openBtn .icon, #js-openBtn .icon:before, #js-openBtn .icon:after {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: #0366AA;
}
#js-openBtn .icon:before, #js-openBtn .icon:after {
  content: "";
  display: block;
  position: relative;
}
#js-openBtn .icon:before{top: 12px;}
#js-openBtn .icon:after {top: 20px;}
#js-closeBtn .icon, #js-closeBtn .icon:after {
  width: 100%;
  height: 4px;
  border-radius: 6px;
  background-color: #000;
  position: relative;
}
#js-closeBtn .icon {top: 12px;}
#js-closeBtn .icon:after {
  content: "";
  display: block;
}
#js-closeBtn .icon      {transform: rotate(45deg);}
#js-closeBtn .icon:after{transform: rotate(-90deg);}
#js-openBtn {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}
#js-spNav {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 78%;
  background: #f1f1f1;
  transform: translateX(100%);
  transition: all .3s;
}
#js-spNav.isOpen {transform: translateX(0);}
.headerNav li {
  margin: 0;
  background: #f7f7f7;
  border-bottom: 1px solid #dbdbdb;
}
.headerNav li:first-child {border-top: 1px solid #dbdbdb;}
.headerNav li a {
font-size: 1rem;
  background-color: #FFF;
  position: relative;
  padding: 0 15px;
  font-weight: normal;
  line-height: 50px;
  color: #000;
  border-radius: 0px;
  box-shadow: none;
  transition: .5s;
}
.headerNav li a::after {
  position: absolute;
  top: 0;
  right: 17px;
  bottom: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  border-right: 2px solid #0c89c3;
  border-bottom: 2px solid #0c89c3;
  transform: rotate(-45deg);
  content: "";
}
.headerNav li a.conversionBtn {
  box-shadow: none;
  background:#FFF;
}
}

/*footer
********************************************************/
footer{}
.removeTop{
display: block;
background-color: #999;
color: #FFF;
text-align: center;
font-size: 3rem;
padding: 1% 0;
}
@media screen and (max-width: 600px) {
.removeTop{font-size: 2rem;padding: 2% 0;}
}
@media screen and (max-width: 400px) {
.removeTop{font-size: 1rem;padding: 4% 0;}
}

.adoveFooter{
background-color: #EEE;
text-align: center;
padding: 3% 0;
line-height: 1.5;
}
@media screen and (max-width: 900px) {
.adoveFooter{
text-align: left;
padding: 3% 10px;
}
}
.adoveFooter .inner{
max-width: 900px !important;
}
.middleFooter{
padding: 3% 0;
}
.middleFooter .inner{
max-width: 700px !important;
padding: 0 30px !important;
display: flex;
justify-content: space-between;
}
.footerAppImage{
display: block;
width: 48%;
height: 48%;
max-width: 300px;
}
.appstoreLink{
width: 48%;
}
.footerLogoImage{
display: block;
width: 90%;
margin: 0 auto;
}
.socialLinkBox{
margin-top: 10px;
display: flex;
justify-content: center;
}
.btnSocialLink{
display: block;
border-radius: 6px;
width: 50px;
height: 50px;
color: #FFF;
margin: 0 1%;
text-align: center;
}
.btnSocialLink i{
font-size: 2rem;
line-height: 50px;
}
.btnSocialLink.facebook{background-color: rgb(59,89,152);}
.btnSocialLink.twitter{background-color: rgb(29,161,242);}



.appstoreLink p{
line-height: 1.5;
padding: 5% 0 10%;
}
@media screen and (max-width: 500px) {
.middleFooter{padding: 10% 0;}
.middleFooter .inner{display: block; padding: 0 10px !important;}
.footerAppImage{width: 90%;height: 90%;max-width: 200px; margin: 0 auto;}
.appstoreLink{width: 100%; margin: 0 auto;}
.footerLogoImage{width: 50%;}
.appstoreLink p{padding: 2% 0 5%;
}
}
.btnAppStore{
display: block;
background-color: #111;
color: #FFF;
padding: 4% 8% 4% 26%;
border-radius: 10px;
font-family:Arial, Helvetica, "sans-serif";
position: relative;
margin-bottom: 10px;
line-height: 1;
}
.btnAppStore i{
position: absolute;
left: 4%;
font-size: 3.5rem;
}
.btnAppStore span{
font-size: 2.5rem;
}
@media screen and (max-width: 700px) {
.btnAppStore{padding-left: 24%;}
.btnAppStore i{font-size:3rem ;}
.btnAppStore span{font-size: 2rem;}
}
@media screen and (max-width: 600px) {
.btnAppStore{padding-left: 24%;}
.btnAppStore i{font-size:2.8rem ;}
.btnAppStore span{font-size: 1.8rem;}
}
@media screen and (max-width: 500px) {
.btnAppStore{padding:3% 0 3% 18%; width: 70%;box-sizing: border-box;margin: 0 auto 1%;}
.btnAppStore i{font-size:2.7rem ;}
.btnAppStore span{font-size: 1.8rem;}
}


@font-face {
  font-family: 'icomoon';
  src:  url('../asset/icomoon.eot?z7886z');
  src:  url('../asset/icomoon.eot?z7886z#iefix') format('embedded-opentype'),
    url('../asset/icomoon.ttf?z7886z') format('truetype'),
    url('../asset/icomoon.woff?z7886z') format('woff'),
    url('../asset/icomoon.svg?z7886z#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-googleplay:before {content: "\e900"; color: #607d8b;}
.icon-facebook:before{content: "\ea90";}
.icon-twitter:before {content: "\ea96";}
.icon-appleinc:before{content: "\eabe";}


.copyright{
background-color: #000;
text-align: center;
padding: 10px 0 30px;
color: #FFF;
}