@charset "UTF-8";
/* CSS Document */
html { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; height: 100%; }
body {
	margin: 0;
	padding: 0;
	position: relative;
	right: 0;
	height: 100%;
	vertical-align:bottom;
	background:#fffffF;
	color: #4f4f4f;
}
#container{
	margin: 0;
	padding: 0;
}
/* =基本スタイル
-----------------------------------------------------*/
p {
	padding: 16px;
	margin: 0;
	font-size:small;
}
a {
	display: inline-block;
	padding: 0 4px;
	color: #3eacc2;
}
a:active {
	background: #eee;
	color: #000;
}
/* =ヘッダー
-----------------------------------------------------*/
header {
	padding: 0;
	overflow: hidden;
	position:relative;
	z-index: 100;
}
h1 {
	margin: 0;
	padding: 0;
	font-size: medium;
	float: left;
}
.cmn_logo {
	padding: 8px;
	height: 24px;
	width: auto;
}
.logo{
	margin: 0 0 0 16px;
	text-align: left;
}
.logo_img{
	width: 80px;
	height: auto;
	vertical-align: middle;
}
.logo a{
	display: inline;
}
.white{
	background-color: rgba(255,255,255,0.8) !important;
}
/* =フッター
-----------------------------------------------------*/
#main{
	padding: 0;
	min-width: 320px;
	z-index: 0;
}
footer {
	padding: 8px 0;
	font-size: x-small;
	text-align: center;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.footer_wrap {
	background: #1c1c1c;
	color: #a0a0a0;
}
.footer_link {
	font-size: small;
	border-bottom: solid 1px #a0a0a0;
	color: #fff;
}
.cmn_li_link_foot {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #a0a0a0;
}
.cmn_li_link_foot a {
	display: block;
	padding: 1em 8px;
	border-top: 1px solid #a0a0a0;
	color: #a0a0a0;
	text-decoration: none;
}
.cmn_li_link_foot a:after {
	content: '';
	float: right;
	margin-top: .3em;
	width: .8em;
	height: .8em;
	background: url(../Content/img/cmn_i_arrow.png) no-repeat;
	background-size: auto 100%;
}

/* =フッターリンク
------------------------------------------------------------------*/
.footer_menu{
	padding: 8px 0;
	background: #eee;
	text-align: center;
	border-bottom: 1px dashed #a0a0a0;
}
.FooterLink{
	margin: 0 0 16px;
	padding: 0;
	overflow:hidden;
	text-align:center;
}
.footer_link_a{
	display:block;
	padding:8px 0;
	background: url(img/cmn_i_arrow.png) no-repeat;
	background-size: auto 1em;
	background-position: 99% center;
	text-decoration: none;
	color: #888;
}
.footer_link_a:hover{
	background: #eee url(img/cmn_i_arrow.png) no-repeat;
	background-size: auto 1em;
	background-position: 99% center;
}
.FooterLink li:last-child{
	border-bottom: 1px dashed #a0a0a0;
}
.FooterLink li{
	margin: 0;
	font-size: small;
	list-style:none;
	border-top: 1px dashed #a0a0a0;	
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
}
.FooterNav li{
	display: inline;
	padding: 0;
	width:45%;
	border: none !important;
	font-size: small;
	vertical-align:middle;
}
.li_btn{
	display: inline-block;
	padding: 4px;
	height: 1em;
	color: #888;
	text-decoration:none;
}
.li_btn:before{
	content: '';
	display:inline-block;
	margin: 0 4px -.2em 0;
	width: 1.2em;
	height: 1.3em;
	background:url(img/cmn_i_foot.png) 0 0 no-repeat;
	background-size: 100% auto; 
	-moz-background-size: 100% auto; 
	-o-background-size: 100% auto;
	-webkit-background-size: 100% auto;
}
.cmn_i_foot_rule:before{ background-position: 0 0; } /*利用規約*/
.cmn_i_foot_faq:before{ background-position: 0 13%; }/*FAQ*/
.cmn_i_foot_privacy:before{ background-position: 0 26%; }/*プライバシーポリシー*/
.cmn_i_foot_setting:before{ background-position: 0 39.5%; }/*設定*/
.cmn_i_foot_delete:before{ background-position: 0 52.5%; }/*解約*/
.cmn_i_foot_mail:before{ background-position: 0 65%; }/*お問い合わせ*/
.cmn_i_foot_regist:before{ background-position: 0 92%; }/*有料会員登録*/
/* =タイトル系
-----------------------------------------------------*/

h2 {
	margin: 0;
	padding: 8px;
	font-size: medium;
	text-align:center;
	color: #4f4f4f;
}
h2{
position: relative;
margin-bottom: 1em;
}
h2:before {
content: '';
position: absolute;
bottom: -10px;
display: inline-block;
width: 30%;
height: 4px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background: -moz-linear-gradient(65deg, #e83837, #f3981e); 
background: -webkit-linear-gradient(65deg, #e83837, #f3981e); 
background: linear-gradient(25deg, #e83837, #f3981e);
border-radius: 2px;
}



h3 {
	margin: 0;
	padding: 8px 16px;
	border-bottom: 2px solid #ff8201;
	font-size: medium;
	text-align: center;
}
h4 {
	margin: 0;
	padding: 4px 16px;
	border-bottom: 1px dotted #808080;
	font-size: small;
	text-align: center;
}
/* =メインスライドメニュー
-----------------------------------------------------*/
nav a{
	color: #000;
}
nav .nav-wrapper{
	position: static;
}
.cmn_menu_btn {
	position: relative;
	top: 0;
	float: right;
}
.cmn_menu_btn:hover,
.cmn_menu_btn:active{
	background: none;
}
nav .cmn_menu_i{
	list-style: none;
	float: right;
	margin: 0 0 0 -56px;
	padding: 10px 10px 0;
	width: 56px;
	overflow: hidden;
}
.cmn_menu_i span{
	display: inline-block;
	overflow: hidden;
	height: 35px;
}
.cmn_menu_i img{
	height: auto;
	width: 100%;
	vertical-align: central;
}
.cmn_menu_back{
	float: left;
	width: 50px;
}
.side-nav{
	background: #fff;
}
.side-nav li{
	padding: 0;
	background: #fff;
}
.cmn_menu_li{
	border-bottom: 1px solid #c0c0c0;
	word-break: break-all;
}
.cmn_menu_li a,
.cmn_menu_li_b{
	display:block;
}
.side-nav a,
.cmn_menu_li_b{
	padding: 16px 8px 16px 16px;
	height: auto;
	text-align: left;
	font-size: medium;
	line-height: normal;
	overflow: hidden;
	color: #FF337A !important;
	font-weight: normal !important;
}
.drag-target{ z-index:1; }

/*マイプリ手帳ボタン*/
.cmn_menu_li_puri{
	overflow: hidden;
}
.cmn_menu_li_puri a{
	margin: 16px;
	padding: 0 !important;
	overflow: hidden;
	box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	border-radius: 6px;
}
.cmn_menu_li_puri_l,
.cmn_menu_li_puri_r{
	display: table-cell;
	position:relative;
	overflow: hidden;
	width: 50%;
	height: 100px;
	float: left;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.cmn_menu_puri_txt{
	display: block;
	content: '';
	width: 100%;
	height: 100px;
	padding-top: 1em;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	z-index: 1;
}
.cmn_menu_li_puri_r img{
	-webkit-filter: blur(5px);
    filter: blur(5px);
}
.cmn_menu_li_puri_r:after{
	display: block;
	content: '';
	width: 100%;
	height: 100px;
	background: #ff8201;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-opacity: 0.7;
	-o-opacity: 0.7;
	opacity: 0.7;
}
.cmn_menu_li_puri img{
	width: 100%;
	height: auto;
}
/*メニューアイコン*/
.cmn_menu_li_mypuri{
	display: inline-block;
	overflow: hidden;
	width: 2em;
	height: 2em;
}
.cmn_menu_li_mypuri img{
	margin-top: -8em;
	-webkit-filter: none;
    filter: none;
	width: 100%;
	height: auto;
}
.cmn_menu_li_prof,
.cmn_menu_li_puriki,
.cmn_menu_li_present,
.cmn_menu_li_stamp,
.cmn_menu_li_deco,
.cmn_menu_li_help,
.cmn_menu_li_mypuri0,
.cmn_menu_li_close{
	margin: -.2em 1em 0 0;
	display: inline-block;
	overflow: hidden;
	float: left;
	width: 2em;
	height: 2em;
	word-break: break-all;
}
.cmn_menu_li_prof img,
.cmn_menu_li_puriki img,
.cmn_menu_li_present img,
.cmn_menu_li_stamp img,
.cmn_menu_li_deco img,
.cmn_menu_li_help img,
.cmn_menu_li_mypuri0 img,
.cmn_menu_li_close img{
	width: 100%;
	height: auto;
}
.cmn_menu_li_prof img{ margin-top: -6em; }
.cmn_menu_li_puriki img{ margin-top: -2em; }
.cmn_menu_li_present img{ margin-top: -10em; }
.cmn_menu_li_stamp img{ margin-top: -12em; }
.cmn_menu_li_deco img{ margin-top: -4em; }
.cmn_menu_li_help img{ margin-top: -14em; }
.cmn_menu_li_mypuri0 img{ margin-top: -18em; }

.cmn_menu_li_prof{
	margin-bottom: 16px;
}
.cmn_menu_li_prof_txt{
	display: block;
	line-height: 1.3;
	color: #a0a0a0;
	font-size: small;
}
/*メニュー閉じるボタン*/
.cmn_menu_li_close{
	margin: -8px 0 0 0;
	float: right;
	width: 2.5em;
	height: 2.5em;
}
.cmn_menu_li_close_box a:active{
	background: none;
}
.cmn_menu_li_close img{ margin-top: -25em; }
.cmn_menu_li_close_box{
	height: 60px;
}
/* =共通パーツ
-----------------------------------------------------*/
.cmn_txt{
	text-align:center;
}
.cmn_txt_red{
	text-align:center;
	color: red;
}
.cmn_txt a{
	text-decoration: underline;
}
.cmn_txt_s{
	text-align:center;
	font-size: x-small;
}
.cmn_txt_s_red{
	text-align:center;
	font-size: x-small;
	color: red;
}
.cmn_txt_s a{
	text-decoration: underline;
}
.cmm_txt_few{  /*コンテンツが少なすぎる時に使う*/
	text-align:center;
	min-height: 280px;
}
.cmn_txt_pink{
	color: #ff337a;
}
.cmn_error_txt{
	margin: 32px;
	padding: 16px;
	text-align: center;
	background: #ffbfd5;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	border-radius: 6px;
}
.cmn_txt_box{
	margin: 0 16px;
	padding: 8px;
	border: 1px solid #a0a0a0;
	font-size: x-small;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.txt_strong { color: #f00; }
.btn_li,
#main_menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.btn_form,
.btn,
.btn2{
	display: block;
	padding: .5em;
	margin: 0;
	height: auto;
	background: #f7f7f7;
	border: 1px solid #aaa;
	text-align: center;
	font-size:medium;
	color: #000;
	text-transform: none;
	text-decoration: none;
	border-radius: 1px;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
}
.btn:hover,
.btn:active,
.btn_form:hover,
.btn_form:active{
	background: #ccc;
}
.btn_form{ width: 100%; }
.btn2 {
	display: inline-block;
	margin: 20px 10px;
	padding: 1em 2em;
}
.btn_posi {
	background: #ff8201;
	
	background: -moz-linear-gradient(65deg, #e83837, #f3981e); 
	background: -webkit-linear-gradient(65deg, #e83837, #f3981e); 
	background: linear-gradient(25deg, #e83837, #f3981e); 
	
	
	color: #fff;
	border: none;
}
.btn_nega {
	background: #cccccc;
	color: #4f4f4f;
	border: none;
}
.btn_box .btn,
.btn_box .btn_posi,
.btn_box .btn_nega { margin: 16px 0; }
.btn_box .btn_posi:active,
.btn_box .btn_posi:hover{
	background: #ff9426;
	color:#fff;
}
.btn_box .btn_nega:hover,
.btn_box .btn_nega:active{
	background: #a9a9a9;
}
.btn_box_2 {
	margin: 16px 0;
	text-align: center;
}
.btn_box_2 .btn,
.btn_box_2 .btn_form{
	display:inline-block;
	margin: 0 2%;
	width:40%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.btn_box_2 .btn_posi:hover,
.btn_box_2 .btn_posi:active{
	background: #ff9426;
	color:#fff;
}
.btn_box_2 .btn_nega:active,
.btn_box_2 .btn_nega:hover{
	background: #a9a9a9;
}

.cmn_aside{
	margin: 16px;
	border: 1px solid #a0a0a0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 1px;
	-moz-border-radius: 1px;
	-webkit-border-radius: 4px;
	background: #fff;
}
.cmn_aside h4 {
	padding: 8px 16px;
}
.cmn_aside img{
	display: block;
	margin: 8px auto;
	width: 60%;
	height: auto;
}
.cmn_aside a,
.cmn_aside_txt a{
	text-decoration: underline;
}
.cmn_aside_txt{
	border-bottom: 1px dotted #000;
}
.cmn_aside .cmn_aside_txt:last-child{
	margin-bottom: none;
	border-bottom: none;
}

/* =キャリアボタン
-----------------------------------------------------*/
.btn_docomo, .btn_au, .btn_softbank {
	margin-bottom: 16px;
	color: #fff;
	border: none;
	line-height: 56px;
	background: #cc0033;
}
.btn_docomo:hover, .btn_docomo:active {
	background: #6c001b;
}
.btn_au {
	background: #ff6c1e;
}
.btn_au:hover, .btn_au:active {
	background: #a43901;
}
.btn_softbank {
	background: #13a5bf;
}
.btn_softbank:hover, .btn_softbank:active {
	background: #006a7d;
}
.btn_carrier2{
	line-height: 28px;
}
.btn_carrier_txt_s{
	font-size: x-small;
}

/* ページトップに戻るリンク
------------------------------------------------------------------*/
.page_top_link{
	text-align:right;
	font-size: 10px;
	padding: 0 10px 20px;
	position:relative;
}
.page_top_link a{
	padding: 0 0 0 12px;
	color:#a98154;
	background:url(../Content/img/icon_arrow_pagetop.png) 0 50% no-repeat;
	background-size: 1em auto;
	-moz-background-size: 1em auto;
	-o-background-size: 1em auto;
	-webkit-background-size: 1em auto;
}
/* =メンテナンス告知
-----------------------------------------------------*/
.cmn_notice,
.cmn_notice2{
	margin: 16px;
	padding: 8px;
	background: #ffe6be;
	text-align: center;
	color: #cf0000;
	font-size: small;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	-o-border-radius: 1px;
	-ms-border-radius: 1px;
	border-radius: 1px;
}
.cmn_notice2 {
	margin: 16px;
	background:#ffd5e0;
	color: #ff2d64;
}
.cmn_notice h2,
.cmn_notice2 h2{
	margin: 0;
	padding: 0 0 .3em 0;
	background: none;
	font-size: medium;
	color: #cf0000;
	position: static;
}
.cmn_notice2 h2{
	color: #ff2d64;
}
.notice_inline{
	display: block;
	margin: 8px;
	padding: 8px;
	background: #fff;
	color: #000;
	font-size: small;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
/* =form用エラーテキスト
-----------------------------------------------------*/
.form_error{
	display: block;
	color: #F00;
}
.form_error a{
	text-decoration: underline;
}
.slider{
	margin-top: 56px;
}

/* =Materializeハック
-----------------------------------------------------*/
/* label color */
.input-field label {
 color: #a0a0a0;
}
/* label focus color */
.input-field input[type=text]:focus + label,
.input-field input[type=email]:focus + label,
.input-field input[type=password]:focus + label,
.input-field input[type=tel]:focus + label {
	color: #FF337A;
}
/* label underline focus color */
.input-field input[type=text]:focus,
.input-field input[type=tel]:focus,
.input-field input[type=email]:focus,
.input-field input[type=password]:focus {
	border-bottom: 1px solid #FF337A;
	box-shadow: 0 1px 0 0 #FF337A;
}

#sidenav-overlay{
	width: 100%;
	 overflow: hidden;
	 background: #ccc;
}
/* =言語選択
-----------------------------------------------------*/
.language_select_box {
	margin: 16px auto;
	width: 45%;
	color:#fff;
	text-align: center;
}
.language_select_box div {
	margin-bottom: 15px;
}
.lan_jp,
.lan_en,
.lan_ck,
.lan_ch {
	padding: 0;
	position: relative;
	line-height: 2em;
	text-indent: 2.5em;
	font-size: large;
}
.lan_jp:before{
	position: absolute;
	left: 0;
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	background: url(../Content/img/language_j.jpg) no-repeat;
	background-size: contain;
}
.lan_en:before{
	position: absolute;
	left: 0;
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	background: url(../Content/img/language_en.jpg) no-repeat;
	background-size: contain;
}
.lan_ck:before{
	position: absolute;
	left: 0;
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	background: url(../Content/img/language_ck.jpg) no-repeat;
	background-size: contain;
}
.lan_ch:before{
	position: absolute;
	left: 0;
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	background: url(../Content/img/language_ch.jpg) no-repeat;
	background-size: contain;
}
.language_select {
	padding: 0 16px;
}


header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 200px;
  background: #3498db;
  transition: .3s;
}
header h1 {
  color: #fff;
  transition: .3s;
}
.is-animation {
  height: 100px;
}
.is-animation h1 {
  color: #000;
}
/* =他サイトジャンプ画面
-----------------------------------------------------*/
.warning {
	margin: 16px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
	
	}

/*フッターのポップアップ*/
.footer_popup {
	width: 100%;
	background: rgba(0,0,0,0.75);
	z-index: 10000;
	position: fixed;
	bottom: 0;
	display: none;
	text-align: center;
}
.footer_popup a {
	display: block;
}
.footer_popup img{
	width: 100%;
	height: auto;
}
@media screen and (max-width: 320px) {
.footer_popup_txt{
	margin: 10px 0;
	color: #fff;
	font-size: x-small;
	text-align: center;
}}
@media screen and (min-width: 321px) {
.footer_popup_txt{
	color: #fff;
	font-size: x-small;
	text-align: center;
}}
.footer_popup_close {
	left: 5px;
	top: 5px;
	width: 30px;
	height: auto;
	position: absolute;
}
.footer_popup_close img{
	width: 20px;
}
/* =その他
-----------------------------------------------------*/
.padding_none {
	padding: 0;
}