@charset "UTF-8";

/* =======================================================================

CSSの名前：mailmag.css 

--------------------------------------------------------------------------

ストアメルマガ登録ページ用

======================================================================= */


/* =========▽crearFix========= */
div:after,
ul:after {
    content: "";
    display: block;
    clear: both;
}

/* For modern browsers */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
 
.cf:after {
    clear: both;
}
 
/* For IE 6/7 only */
.cf {
    *zoom: 1;
}

/* =========△crearFix========= */
.wrap {overflow: hidden;}

#mailmag p{font-size: 1.7em;margin:0;line-height: 1.6em;}
#mailmag p+p{margin-top: 15px;}

#mailmag{width:850px;margin:0 120px;padding-bottom:80px;font-size: 62.5%;box-sizing: border-box;}
#mailmag #error{margin: 20px 20px;color:#CC0000;}

#mailmag p.smallTxt{font-size: 1.5em;}
#mailmag p.notes{font-size: 1.4em;color:#999;}


.bigTxt{font-weight: bold;font-size: 120%;}
.red{color:#CC0000;}
.blue{color:#3D7499;}
.org{color:#ff6600;}
.wht{color:#fff;}

#readArea{margin:0 auto!important;width:950px;padding: 20px 90px;background: url("../images/detail/mailmag/ttl_mailmaga_bg.png") no-repeat top; box-sizing: border-box; font-size: 1.2em;}
::placeholder {color: #CCC;}
:focus::placeholder { color: white; } 

.mailTtl {margin: 30px auto 0!important;width:950px;vertical-align:bottom;padding:0;height: 332px;}

h2.touroku{font-size: 3.4em;color: #ff6600;text-align: center;margin:0 0 25px 0;}
h2.btmLine{font-size: 2.6em;color: #333!important;margin-bottom: 20px!important;border-bottom: 3px solid #ff6600;padding: 5px 0 0 15px;}
h3{font-size:2.2em;	margin:0 !important;}

#tourokuBox{padding:10px 20px 10px;	box-sizing: border-box;}
#tourokuBox #magazine_form{	margin:5px 0 0 0;padding:5px 15px;font-size: 1.8em;	width:450px;}

#tourokuBox .btn-square-shadow {display: inline-block; color: #FFF; padding: 0.2em 1em;  text-decoration: none; background: #ff9900; border: solid 1px #ff6600; border-bottom: solid 4px #ff6600; border-radius: 3px; font-size: 2.0em;}
#tourokuBox .btn-square-shadow:active { -webkit-transform: translateY(4px); transform: translateY(4px);  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);border-bottom: none;}

.btn-square-shadow_kaijyo {display: inline-block; color: #FFF; padding: 0.2em 1em; text-decoration: none; background: #7d7d7d; margin: 5px 0 0 10px; border: solid 1px #666;
  border-bottom: solid 4px #666; border-radius: 3px; font-size: 1.7em;}
.btn-square-shadow_kaijyo:active {-webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none;}

.btn-flat-border {display: inline-block; margin:20px auto; padding: 0.3em 1em; font-size: 1.4em; font-weight: bold; text-decoration: none; color: #005ca2!important; border: solid 2px #005ca2; border-radius: 15px; transition: .4s;}

#kaijyoBox{border:2px solid #CCC;padding:30px;width:850px;margin:0 auto 50px;box-sizing: border-box;}

.btn-flat-border:hover { background: #67c5ff; color: white; text-decoration: none;}

.btn-flat-borderBK {display: inline-block; margin:40px auto; padding: 0.4em 2em; font-size: 1.8em;font-weight: bold; text-decoration: none; color: #333!important; border: solid 2px #535353; background:#eeeeee; border-radius: 24px; transition: .4s; box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);}

.btn-flat-borderBK:hover { background: #f9d100; color: white; text-decoration: none;}

.dottedLine{ border-top:dotted 1px #333; padding-top: 30px;}

.errorBox {clear:both; width:720px; padding:10px 0; margin:10px auto 10px; color:#FFF!important; background: #CC0000; text-align: center; font-size:120%; font-weight: bold;}

.note{background: #F2F2F2; padding: 10px 15px; margin-bottom: 50px; border-radius: 10px;}

.Btn_NewMember_news{clear: both; position: relative; margin:0 auto; width:500px; font-weight: bold;  padding: 0.5em 0.5em; text-decoration: none;text-align: center; color: #333; background: #fbc300; transition: .4s;font-size: 28px; box-sizing: border-box; border: 2px solid #fbc300; background-image: url(../images/svg/icon_member.svg); background-repeat: no-repeat; background-size: 28px 28px; background-position: 65px 22px;padding-left: 70px; }
a.Btn_NewMember_news{color: #333;}
a:hover .Btn_NewMember_news{background: #fff100;text-decoration: none;background-image: url(../images/svg/icon_member.svg); background-repeat: no-repeat; background-size: 28px 28px; background-position: 65px 22px; }

.bubble01 {position: relative;display: inline-block; width: 430px;text-align: center; color:#333;padding: 5px 15px; background-color: #fFF;border: 2px solid #fbc300; border-radius: 5px;font-size: 16px;	top: 10px;z-index: 10;}
.bubble01:before {content: ''; position: absolute; display: block; z-index: 1; border-style: solid; border-color: #FFF transparent;  border-width: 10px 10px 0 10px; bottom: -10px; left: 50%; margin-left: -10px;}
.bubble01 .small{font-size: 80%;}

ul.notice {list-style-type: none;	width:600px;margin:0 auto 15px;}
ul.notice li{padding-left: 1em;text-indent: -1em;font-size: 14px;}