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


/* --------------------------------------------------------------------------------
 web fonts
-------------------------------------------------------------------------------- */
@import url('//fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap');
/*
font-family: 'Noto Sans JP', sans-serif;
font-weight:400; regular
font-weight:500; medium
font-weight:700; bold
*/


body{
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'メイリオ', meiryo, sans-serif;
}

.clearfix:after {
content: ".";   
display: block;   
height: 0;   
clear: both;   
visibility: hidden;  
font-size: 0.1em;  
line-height: 0;  
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.leftArea {
float:left;
_display:inline;
}
.rightArea {
float:right;
_display:inline;
}

header{
width:950px;
margin:0 auto;
padding: 5px;
text-align: left;
}

header .forSmp {
display:none;
}

#rogo img{
    width: 25%;
    height: auto;
}



#appExpWrapper {
width:950px;
margin:0 auto;
}

#appExpWrapper .forSmp {
display:none;
}


/* 冒頭キャッチ */
#appExp2000 {
margin:0 5px 5px;
padding:0 0 10px;
}

/* ヘッダー */
#appExpHeader {
position:relative;
margin:0 0 30px;
border-bottom:5px solid #bf0000;
}

#appExpHeader h1 {
margin:0;
padding:0;
}

#appExpHeader .catch {
margin:0;
padding:55px 0 0 84px;
}

#appExpHeader .date {
width:340px;
position:absolute;
top:310px;
right:0;
margin:0;
padding:0;
font-size:100%;
}

#appExpHeader .date div {
padding:3px;
width:120px;
color:#fff;
text-align:center;
background:#4d3208;
font-weight:bold;
}

#appExpHeader .date strong {
font-weight:bold;
}


/* コンテンツ */
#appExpPoint {
margin:0 0 30px;
padding:0 0 10px;
background:#f8f5ec url(../images/kuji_cp1502_ul_bg.gif) left bottom no-repeat; }

#appExpPoint h2 {
margin:0 0 10px;
}

#appExpPoint ul {
padding:0 0 0 41px;
text-align:center;
color:#452c06;
font-size:150%;
font-weight:bold;
}

#appExpPoint ul li {
text-align:center;
float:left;
_display:inline;
}

#appExpPoint ul li img {
margin:0 0 10px;
}

#appExpPoint ul li.step1 {
width:270px;
margin:0 20px 0 0;
padding-right:50px;
background:url(../images/kuji_cp1502_arrow.gif) right 15px no-repeat;
}

#appExpPoint ul li.step2 {
width:220px;
margin:0 20px 0 0;
padding-right:50px;
background:url(../images/kuji_cp1502_arrow.gif) right 15px no-repeat;
}

#appExpPoint ul li.step3 {
width:238px;
}



#appExpFlow {
width:810px;
margin:0 auto 20px;
padding:0 0 50px;
background:url(../images/kuji_cp1502_steparrow.gif) center bottom no-repeat;
}

#appExpFlowBtm {
width:810px;
margin:0 auto 20px;
padding:0;
}

#appExpFlow h2 {
margin:0 0 10px;
text-align:center;
background:url(../images/kuji_cp1502_stepbg.gif) left bottom repeat-x;
}

#appExpFlow .btnArea,
#appExpFlowBtm .btnArea {
margin:0 0 20px;
text-align:center;
}

#appExpFlow .step3 {
text-align:center;
font-size:250%;
color:#452c06;
}

#appExpFlow .googleplay,
#appExpFlowBtm .googleplay {
width:360px;
margin:0 10px 10px 0;
padding:10px;
background:url(https://image.infoseek.rakuten.co.jp/content/top/campaign/kuji/images/kuji_cp1502_download_bg.gif);
float:left;
_display:inline;
border-radius:5px;
}

#appExpFlow .appstore,
#appExpFlowBtm .appstore {
width:360px;
margin:0 0 10px 10px;
padding:10px;
background:url(https://image.infoseek.rakuten.co.jp/content/top/campaign/kuji/images/kuji_cp1502_download_bg.gif);
float:right;
_display:inline;
border-radius:5px;
}

#appExpFlow h3,
#appExpFlowBtm h3 {
text-align:center;
margin:0;
padding:0 0 10px;
font-size:140%;
font-weight:bold;
color:#bf0000;
}

#appExpFlow h3 span{
margin-left:10px;
font-size:70%;
font-weight:normal;
}


#appExpFlow .appInfo,
#appExpFlowBtm .appInfo {
background-color:#fff;
padding:10px;
border-radius:5px;
}


#appExpFlow .textArea,
#appExpFlowBtm .textArea  {
width:220px;
text-align:center;
float:left;
_display:inline;
margin-top:6px;
}

#appExpFlow .textArea h4,
#appExpFlowBtm .textArea h4 {
margin:0 0 5px;
color:#bf0000;
font-size:140%;
font-weight:bold;
}

#appExpFlow .textArea p,
#appExpFlowBtm .textArea p {
margin:5px 0 0;
text-align:left;
color:#666;
}

#appExpFlow .qrArea,
#appExpFlow .qrAreaBtm {
width:110px;
}

#appExpFlow .appSearchBar,
#appExpFlowBtm .appSearchBar {
margin:0 0 30px;
text-align:center;
clear:both;
}


#appExpCatch {
width:950px;
margin:0 0 30px;
padding:0 0 20px;
background:#ecc35b url(https://image.infoseek.rakuten.co.jp/content/top/campaign/kuji/images/kuji_cp1502_catch_bg.gif) left 80px repeat-x;
border-radius:10px;
}

#appExpCatch h2 {
margin:0 0 10px;
}

#appExpCatch .catch1 {
width:440px;
margin:0 0 0 20px;
float:left;
_display:inline;
}

#appExpCatch .catch2 {
width:440px;
margin:0 20px 0 0;
float:right;
_display:inline;
}

/* line友だち追加 */
#line {
width:950px;
margin:0 0 30px;
padding:0 0 20px;
background:#00B900 url(images/line_bg.png) left 80px repeat-x;
border-radius:10px;
}

/* 今なら友だち追加でポイントGET */
#highlight_red{
	background-color: #bf0000;
	padding: 12px;
	text-align:center;
	font-weight:bold;
}


.mojiiro1{
	font-size: 250%;
    color:#fff; /*文字色_白*/
    }

.mojiiro2{
    color:#FFFF01; /*文字色_黄色*/
	font-size: 250%;
}


.mojismall{
	font-size: 130%;
	color:#fff; /*文字色_白*/
}
/* END_今なら友だち追加でポイントGET */



.line_img{
text-align:center;
padding:5px;
}

/* line友だち追加の白枠 */
.line_description{
    position: relative;
    background-color: #fff;
    font-size: 14px;
    max-width: 800px;
    height: 200px;
    margin: 5px auto 5px;
    padding:10px;
}


.line_btn h2{
    max-width:100%;
    text-align: left;
    font-size:150%; /*フォントサイズの調整*/
    font-weight:bold; /*文字の太さの変更*/
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    margin: auto;
}

h2 .mojiiro{
    color:#00B900; /*文字色の変更*/
}

 /*QRコードから友だち追加_タイトル*/
#line_qrcode h2{
    position: absolute;
    top: 10%;
    left:35px;
}


 /*ID検索から友だち追加_タイトル*/
#line_kensaku h2{
    position: absolute;
    top: 10%;
    left: 450px;
}

 /*QRコードから友だち追加_QR画像*/
#line_qrcode p img{
    position: absolute;
    top: 30%;
    left: 12%;
}

 /*ID検索から友だち追加_テーブル*/
#line_kensaku table{
    position: absolute;
    top: 40%;
    left: 55%;
    border:#00B900 solid 3px;
    text-align: center;
    font-size:130%; /*フォントサイズの調整*/
    font-weight:bold; /*文字の太さの変更*/
}

 /*ID検索から友だち追加_テーブル見出し*/
#line_kensaku table th{
    background:#00B900;
    padding:5px;
    color: #fff;
}

 /*ID検索から友だち追加_テーブル中身*/
#line_kensaku table td{
    padding:20px;
}



/* 注意事項 */
#appExpAttention {
margin:0 0 20px;
padding:10px 0;
color:#666;
}

#appExpAttention h2 {
margin:0 0 10px;
padding:8px 20px;
color:#fff;
font-weight:bold;
background:#4e4745;
}

#appExpAttention h3 {
margin:0 20px 5px;
padding:0;
}

#appExpAttention p {
margin:0 20px 10px;
padding:0;
line-height:130%;
}


#appExpAttention ul {
margin:0 10px 0 25px;
padding:0;
line-height:180%;
}

/* 追加分 */
#Topimage {
margin:0 0 15px;
}

.Topimage-Detail {
padding: 5px;
margin:0 0 30px;
background-color: #fff000;
color: #c50000;
font-size: 140%;
font-weight: bold;
text-align: center;
}

.Introduction {
margin-bottom: 30px;
}


.line_text{
	font-weight:bold;
    color: #fff;
    text-align: center;
    font-size: 15px;
    line-height: 1.5em;
    list-style-type: none;
    margin:0 0 10px;
    padding: 0;
}

.highlight{
	background-color: #00B900;
	padding: 5px;
}


.line_text li a{
    color: #fff;
}

.line_text li a:hover{
    color: #ffff01;
}

.information a:visited{
    color: #fff;
}


.Down_ttl {
margin-bottom: 20px;
}

#Superpoint {
padding:10px;
width: 100%;
border-bottom: 2px solid #bf0000;
margin-bottom: 5px;
}

#Superpoint .logo {
float: left;
padding-left: 10px;
}
#Superpoint .help {
float: right;
color: #0033cc;
display: block;
padding: 30px 20px 0 0;
}

.Challenge {
margin-bottom: 30px;
}


/*----------------------------------------
 footer設定
----------------------------------------*/
footer{
text-align: center;
color: #ffffff;
font-size: 13px;
background-color: #bf0000;
padding: 20px;
margin-top:5px;
}

footer a{
    color: #ffffff;
    text-decoration: none;
}

footer a:hover{
    color: #ffffff;
    text-decoration: underline;
}

footer a:visited{
    color: #ffffff;
}


@media screen and (max-width: 480px) {
header{
width:100%;
margin:0 auto;
padding-left:5px;
/*font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
}

header .forPC {
display:none;
}

header .forSmp {
display:inherit;
}

#rogo img{
    width: 20%;
    height: auto;
    padding-left:10px;
}


#appExpWrapper {
width:100%;
margin:0 auto;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#appExpWrapper .forPC {
display:none;
}

#appExpWrapper .forSmp {
display:inherit;
}

/* 冒頭キャッチ */
#appExp2000 {
width:100%;
}

/* ヘッダー */
#appExpHeader {
width:100%;
position:relative;
margin:0 0 30px;
border-bottom:5px solid #bf0000;
}

#appExpHeader h1 {
margin:0;
padding:0;
}

#appExpHeader h1 img {
width:100%;
height:auto;
}

#appExpHeader .date {
position:reative;
top:auto;
left:auto;
width:100%;
margin:0;
padding:0 0 5px;
color:#fff;
text-align:center;
background-color:#bf0000;
}

#appExpHeader .date div {
width:auto;
background-color:#bf0000;
font-size:14px;
font-weight:bold;
}

#appExpHeader .date strong {
font-size:13px;
font-weight:bold;
}

#appExpHeader .date span {
font-size:11px;
}


/* コンテンツ */
#appExpPoint {
width:96%;
margin:80px auto 30px;
padding:0 0 10px;
background:#f8f5ec url(../images/kuji_cp1502_ul_bg.gif) left bottom no-repeat; }

#appExpPoint h2 {
margin:0 0 10px;
padding-top: 20px;
}

#appExpPoint h2 img {
width:100%;
height:auto;
}

#appExpPoint ul {
padding:0 5%;
text-align:center;
color:#452c06;
font-size:16px;
font-weight:bold;
}

#appExpPoint ul li {
text-align:left;
}

#appExpPoint ul li br {
display:none;
}

#appExpPoint ul li p {
width:40%;
float:right;
font-size:13px;
}

#appExpPoint ul li.step1 p {
padding-top:5px;
}

#appExpPoint ul li.step2 p {
padding-top:0;
}

#appExpPoint ul li.step3 p {
padding-top:10px;
}

#appExpPoint ul li img {
margin:0 0 10px;
}

#appExpPoint ul li.step1 {
width:100%;
margin:0 0 5px;
padding-right:0;
background:none;

background-size:auto 40px;
}

#appExpPoint ul li.step1 img {
width:auto;
height:50px;
float:left;
}

#appExpPoint ul li.step2 {
width:100%;
margin:0 0 5px;
padding-right:0;
background:none;

background-size:auto 40px;
}

#appExpPoint ul li.step2 img {
width:auto;
height:50px;
float:left;
}

#appExpPoint ul li.step3 {
width:100%;
}

#appExpPoint ul li.step3 img {
width:auto;
height:50px;
float:left;
}



#appExpFlow {
width:96%;
margin:0 auto 20px;
padding:0 0 50px;
background:url(../images/kuji_cp1502_steparrow.gif) center bottom no-repeat;
}

#appExpFlowBtm {
width:96%;
margin:0 auto 20px;
padding:0;
}

#appExpFlow h2 {
margin:0 0 10px;
text-align:center;
background:url(../images/kuji_cp1502_stepbg.gif) left bottom repeat-x;
}

#appExpFlow h2 img {
width:100%;
height:auto;
}

#appExpFlow .btnArea,
#appExpFlowBtm .btnArea {
margin:0 0 20px;
text-align:center;
}

#appExpFlow .btnArea img,
#appExpFlowBtm .btnArea img {
width:100%;
height:auto;
}

#appExpFlow .step3 {
text-align:center;
font-size:24px;
color:#452c06;
}

#appExpFlow .appstore,
#appExpFlowBtm .appstore {
width:94%;
margin:0 0 20px;
padding:10px 3%;
background:url(https://image.infoseek.rakuten.co.jp/content/top/campaign/kuji/images/kuji_cp1502_download_bg.gif);
float:none;

border-radius:5px;
}

#appExpFlow .googleplay,
#appExpFlowBtm .googleplay {
width:94%;
margin:0 0 20px 0;
padding:10px 3%;
background:url(https://image.infoseek.rakuten.co.jp/content/top/campaign/kuji/images/kuji_cp1502_download_bg.gif);
float:none;

border-radius:5px;
}

#appExpFlow h3,
#appExpFlowBtm h3 {
text-align:center;
margin:0;
padding:0 0 10px;
font-size:140%;
font-weight:bold;
}

#appExpFlow .appInfo,
#appExpFlowBtm .appInfo {
background-color:#fff;
padding:10px;

border-radius:5px;
}

#appExpFlow .textArea,
#appExpFlowBtm .textArea  {
width:100%;
text-align:center;
}

#appExpFlow .textArea h4,
#appExpFlowBtm .textArea h4 {
margin:0 0 5px;
color:#bf0000;
font-size:140%;
font-weight:bold;
}

#appExpFlow .textArea p,
#appExpFlowBtm .textArea p {
margin:5px 0 0;
text-align:center;
color:#666;
}

#appExpFlow .qrArea,
#appExpFlow .qrAreaBtm {
width:110px;
}

#appExpFlow .appSearchBar,
#appExpFlowBtm .appSearchBar {
margin:0 0 30px;
text-align:center;
clear:both;
}


#appExpCatch {
width:96%;
margin:0 auto 30px;
padding:0 0 1px;
background:#ffee9c url(https://image.infoseek.rakuten.co.jp/content/top/campaign/kuji/images/kuji_cp1502_catch_bg.gif) left bottom repeat-x;

border-radius:10px;
}

#appExpCatch h2 {
margin:0 0 10px;
}

#appExpCatch img {
width:100%;
height:auto;
}

#appExpCatch .catch1,
#appExpCatch .catch2 {
width:90%;
margin:0 auto 20px;
float:none;
}

/* line友だち追加 */
#line {
width:96%;
margin:0 auto 15px;
padding:0 0 1px;
background:#00B900 url(images/line_bg.png)  left bottom repeat-x;
border-radius:10px;
}



/* 今なら友だち追加でポイントGET */
.mojiiro1{
	font-size: 150%;
    color:#fff; /*文字色の変更*/
    }

.mojiiro2{
    color:#FFFF01; /*文字色の変更*/
	font-size: 150%;
}

.mojismall{
	font-size: 90%;
}
/* END_今なら友だち追加でポイントGET */


.line_img{
text-align:center;
width:80%;
height:auto;
margin:0 auto 3px;
}

/* line友だち追加の白枠 */
.line_description{
    position: relative;
    background-color: #fff;
    font-size: 14px;
    text-align: left;
    max-width:80%;
    height: 200px;
    margin: 0 auto 15px;
    padding:10px;
}

.line_btn h2{
    max-width:90%;
    text-align:center;
    font-size:110%; /*フォントサイズの調整*/
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    margin: auto;
}


.line_description p{
    position: absolute;
    top: 50%;
    left: 12%;
    right: 0;
    margin: auto;
}



/* 注意事項 */
#appExpAttention {
margin:0 0 20px;
padding:10px 0;
color:#666;
}

#appExpAttention h2 {
margin:0 0 10px;
padding:8px 20px;
color:#fff;
font-weight:bold;
background:#4e4745;
}

#appExpAttention h3 {
margin:0 20px 5px;
padding:0;
}

#appExpAttention p {
margin:0 20px 10px;
padding:0;
line-height:130%;
}


#appExpAttention ul {
margin:0 10px 0 5px;
padding:0;
line-height:180%;
}

/* 追加分 */
#Topimage img {
width:100%;
height:auto;
}

.Topimage-Detail {
padding: 5px;
margin:0 0 30px;
background-color: #fff000;
color: #c50000;
font-size: 120%;
font-weight: bold;
text-align: center;
}

.Introduction img {
width:100%;
height:auto;
}


.line_text{
		font-weight:bold;
        font-size: 12px;
    }


.Down_ttl img {
width:100%;
height:auto;
}

#Superpoint {
padding:0 0 10px;
width: 100%;
}

#Superpoint img {
width:90%;
height:auto;
}

#Superpoint .logo {
float: left;
margin: 5px 0 0 5px;
}
#Superpoint .help {
float: right;
color: #0033cc;
display: block;
padding: 10px 20px 0 0;
}

.Challenge img {
width:100%;
height:auto;
margin-bottom: 20px;
}



footer{
padding: 20px;
}
    
    
footer a{
display: block;
line-height: 25px;
}



}