@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;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 */
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img,input{border:0}address,caption,cite,code,dfn,th,var{font-style:normal;}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;text-align: left;}q:after,q:before{content:''}abbr,acronym{border:0}a,img{vertical-align:top;display:inline-block}

/******************************
共通
******************************/
@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;
}

html {
  font-size:62.5%;
}

body {
  width: 100%;
  font-size: 1.6rem;
  line-height:1.75;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  word-break: break-all;
  /*min-width: 745px;*/
  color: #000;
}

a,input {
  outline:none;
  color:#323232;
  text-decoration:none;
}

a,
a:link,
a:visited {
  text-decoration:underline;
}

a:hover,
a:active {
  text-decoration:underline;
}

/******************************
ヘッダー
******************************/
header {
  box-sizing: border-box;
  width: 100%;
  padding: 26px 30px;
  position: absolute;
  top: 0;
  left: 0;
}

header .headerLogo img {
  width: 80%;
}

.form .error {
  color: red;
  text-align: center;
}

/******************************
コンテンツ
******************************/
/*メイン部分*/

#main { 
  padding: 60px 0;
  background: url(../../../user/pc/img/auth/bg_auth.jpg) center center no-repeat;
  background-size: cover;
}

#main .mainIn {
  display: flex;
  max-width: 1080px;
  width: 90%;
  margin: 0 auto;
}


/* 左のテキスト */

#main .txtBox {
  padding-top: 12%;
  width: 50%;
  box-sizing: border-box;
  padding-right: 20px;
}

#main .txtBox .tit {
  font-size: 3.6rem;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 10px; 
  color:#fff;
}

#main .txtBox .txt {
  font-size: 14px;
  line-height: 1.5;
  margin: 20px 0 17px;
  color:#fff;
}


/* 会員登録ボックス */

#main .regist {
  vertical-align: middle;
  width: 50%;
}

#main .regist .registIn {
  padding: 22px 8% 17px;
  background: #fff;
  border-radius: 5px;
  box-shadow:0px 0px 3px 1px rgba(0,0,0,0.2);
}

#main .regist .registIn .error_msg {
  text-align: center;
  color: red;
}

#main .regist .registIn .tit {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #333;
}

/* フォーム(メアドとpassの部分) */

#main .regist .registIn .form input[type="text"],
#main .regist .registIn .form input[type="mail"],
#main .regist .registIn .form input[type="password"] {
  width: 100%;
  color: #333;
  font-size: 1.5rem;
  text-indent: 18px;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  background: #eee;
}

#main .regist .registIn .form input[type="password"] {
  margin-top: 10px;
}

#main .regist .registIn .form button {
  color: #fff;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 3px;
  background: #0088cb;
  margin: 13px 0 17px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
} 

#main .regist .registIn .form button:hover {
  opacity: 0.7;
}

#main .regist .registIn .form .ta-l {
  line-height: 1.5;
  margin: 0 0 10px;
  font-size: 12px;
}

#main .regist .registIn .form .ta-l a {
  text-decoration: underline;
}

#main .regist .registIn .form .click_memberlp_mail {
  margin-bottom: 10px;
}


/* ORテキスト */

#main .regist .registIn .or {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  margin: 21px auto 18px;
  text-align: center;
  position: relative;
  z-index: 1;
}

#main .regist .registIn .or:before,
#main .regist .registIn .or:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #d7d7d7;
  position: absolute;
  top: 45%;
  z-index: -1;
}

#main .regist .registIn .or:after {
  background: #fff;
  width: 80px;
  left: 0;
  right: 0;
  margin: 0 auto;
}


/* SNSログイン部分 */

#main .regist .registIn .social_login_wrapper {
  padding-bottom: 8px;
}

#main .regist .registIn .social_login_wrapper .sns {
  overflow: hidden;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.714;
  letter-spacing: 0;
}

#main .regist .registIn .social_login_wrapper .sns li {
  width: 100%;
  text-align: center;
  margin: 0;
}

#main .regist .registIn .social_login_wrapper .sns li:first-of-type {
  margin-bottom: 3.5%;
}

#main .regist .registIn .social_login_wrapper .sns li a {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

#main .regist .registIn .social_login_wrapper .sns li a:hover {
  opacity: 0.7;
}

#main .regist .registIn .social_login_wrapper .sns .click_memberlp_fb {
  display: block;
  color: #fff; 
  background: #385185; 
  font-size: 14px; 
  text-decoration: none; 
  border-radius: 3px; 
  padding: 8px 10px; 
  position: relative;
}

#main .regist .registIn .social_login_wrapper .sns .click_memberlp_fb i {
  position: absolute; 
  left: 10px; 
  top: 50%; 
  transform: translateY(-51%); 
  font-size: 20px;
}

#main .regist .registIn .social_login_wrapper .sns .click_memberlp_g {
  display: block; 
  color: #fff; 
  background: #fff; 
  color: #323232; 
  border: solid 1px #d7d7d7; 
  font-size: 14px; 
  text-decoration: none; 
  border-radius: 3px; 
  padding: 8px 10px; 
  position: relative;
}

#main .regist .registIn .social_login_wrapper .sns .click_memberlp_g img {
  position: absolute; 
  left: 10px; 
  top: 50%; 
  transform: translateY(-51%);
}


/* ログインリンク部分 */

#main .regist .registIn .link{
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

#main .regist .registIn .link a {
  color: #0086cb;
  text-decoration: none;
}

#main .regist .registIn .link a:hover{
  opacity: 0.7;
}


/*会員特典*/

#mypage {
  padding-top: 70px;
  position: relative;
}

#mypage .heading {
  font-size:36px; 
  text-align:center;
}


/* 会員特典コンテンツ */

#mypage .slide {
  margin-top:55px;
}

#mypage .slide li + li {
  margin-top: 60px;
}

#mypage .slide li .box {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
  display: flex;
}

#mypage .slide li .box:after {
  content: '';
  display: block;
  clear: both;
}

#mypage .slide li:nth-child(even) .box {
  direction: rtl;
}

#mypage .slide li:nth-child(even) .box .img,
#mypage .slide li:nth-child(even) .box .txtBox {
  direction: ltr;
}

#mypage .slide li .box .txtBox {
  box-sizing: border-box;
  width: 53.6%;
  vertical-align: middle;
}

#mypage .slide li .box .txtBox:nth-child(1) {
    margin-right:60px;
}

#mypage .slide li .box .txtBox:nth-child(2) {
    margin-right:60px;
}

#mypage .slide li .box .txtBox .img {
  box-sizing: border-box;
  width: 39.8%;
  text-align: center;
  display: table-cell;
  vertical-align: bottom;
  margin-bottom: 10px;
}

#mypage .slide li .box .txtBox .img img {
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

#mypage .slide li .box .txtBox .tit {
  display: inline-block;
  text-align: center;
  font-size: 20px;
  line-height: 1.2;
  color: #333;
  padding-top: 20px;
  width: 100%;
  white-space: nowrap;
}

#mypage .slide li .box .txtBox .txt {
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin: 27px 0 42px;
}

#mypage .dotsWrap {
  position: absolute;
  max-width: 1000px;
  width: 90%;
  bottom: 75px;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
}

#mypage .dots {
  width: 53.6%;
  float: right;
  text-align: center;
}


/* 会員規約ボックス */

.privacy {
  margin-top: 5px;
  padding: 16px 18px;
  border: 1px solid #000;
  height: 130px;
  overflow: scroll;
}

.privacy p {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.714;
  letter-spacing: 0;
}

.privacy ul {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.714;
  letter-spacing: 0;
}

.privacy .tit {
  font-size: 1.6rem;
  line-height: 1.3;
  color: #444;
  font-weight: bold;
}

.error-msg {
  margin-top: 20px;
  padding: 16px 18px;
  border: 2px solid #e83b18;
}

p.error {
  color: red;
  margin: auto;
}

.agree-box {
  margin: 10px 25px 10px 0;
  vertical-align: middle;
  text-align: center;
  line-height: 1.4em;
}
.agree-box label {
  font-weight: 700;
  font-size: 14px;
}
.agree-checkbox {
  margin: 5px;
}

/* フッター */

.footer {
  padding: 30px 0;
  background: #000;
  bottom:0;
  width: 100%;
}

.footerCopy {
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
}