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

body{
background-color:#FFFFFF;
margin:0 auto;
padding:0;
height: 100%;
width: 100%;
}

p {
font-family: "ＭＳ Ｐ明朝", sans-serif;
}

a:hover {
opacity: 0.3;
}


/*-------------------------------------
ヘッダー
-------------------------------------*/

#title{
z-index: 10000;
top: 0;
left: 0;
margin:0 auto;
padding:0;
width: 100%;
height:auto;
text-align: center;
}

#title-box{
clear:both;
width:1030px;
height:173px;
margin:0 auto;
}

#title-box h1 {
height:123px;
margin:0 auto;
padding:0;
}

#title-box h1 img{
width:100%;
position:relative;
margin:0 auto;
}

/*ソーシャルボタン*/
.social{
width:1030px;
height:40px;
margin:0 auto;
padding-top:5px;
padding-bottom:5px;
clear:both;
}

.social img{
height:40px;
margin-right:1%;
margin-left:1%;
}

/*装飾*/

.mizutama{
width:100%;
height:37px;
background-image:url(../img/bg01.png);
}


/*-------------------------------------
メイン
-------------------------------------*/

#main{
width:1030px;
height:auto;
margin-top:20px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}


.marker {
	background: linear-gradient(transparent 60%, rgba(102, 45, 145,0.19) 60%);
	font-size:21px;
	line-height:40px;
	font-weight:bold;
	padding-left:110px;
	padding-right:110px;
}



/*使い方*/

.how_to_box{
width:100%;
height:auto;
}

.how_to_box h2{
width:100%;
height:25px;
text-align:left;
}

.how_to_box h2 img{
height:25px;
}

.how_to{
width:100%;
height:110px;
background-color:rgba(251,210,147,0.43);
padding-top:20px;
padding-bottom:20px;
font-size:15px;
line-height:26px;
color:#000000;
font-weight:bold;
}

.how_to_jyuyo{
font-size:12px;
line-height:24px;
font-weight:bold;
padding-left:10px;
padding-right:10px;
position:relative;
}

.how_to_jyuyo::after {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 100%;
	height: 6px;
	background-color:rgba(255,115,172,0.62);
}

.how_to_tyui{
font-size:12px;
line-height:24px;
color:#ED1C24;
font-weight:bold;
}

.how_to_tyui2{
text-align:left;
font-size:11px;
line-height:18px;
color:#ED1C24;
font-weight:bold;
}

/*シュミレータ*/


#simulator_box{
width:100%;
height:auto;
margin-top:25px;
clear:both;
overflow:hidden;
}

.simulator{
float:left;
width:50%;
}

.simulator h2{
height:25px;
text-align:left;
}

.simulator h2 img{
height:25px;
}

.mock-up{
width:394px;
height:755px;
background:url(../img/mock-up_bg.png) center;
background-size:394px 755px;
background-repeat:no-repeat;
}

.m_top{
width:340px;
height:30px;
padding-top:70px;
margin-left:23px;
}

.menu_box{
width:340px;
height:96px;
margin-left:23px;
background-color:#ED7478;
overflow:hidden;
}

.menu{
width:340px;
height:36px;
}

.menu img{
width:100%;
}

.menu_bg{
position:absolute;
width:340px;
height:60px;
}

.menu_bg img{
position:relative;
width:340px;
height:60px;
}

.menu_btn{
list-style:none;
width:340px;
height:60px;
margin-top:0;
margin-left:-40px;
margin-bottom:0;
}

.menu_btn li{
position:relative;
width:85px;
height:60px;
float:left;
margin:0 auto;
text-align:center;
}

.menu_btn li img{
height:100%;
}

.profile_box{
width:340px;
height:476px;
margin-left:23px;
background-color:#7DB5B8;
margin-top:-16px;
}

.profile_box ul{
width:320px;
padding-left:10px;
padding-right:10px;
list-style:none;
text-align:left;
}

.profile_titl{
height:27px;
color:#FFFFFF;
font-weight:bold;
line-height:27px;
clear:both;
}

.profile{
height:67px;
width:100%;
color:#FFFFFF;
font-weight:bold;
line-height:27px;
clear:both;
}

.profile2{
height:67px;
width:100%;
color:#FFFFFF;
font-weight:bold;
line-height:27px;
border-bottom:1px solid #FFFFFF;
clear:both;
}

.profile_img{
width:47px;
height:47px;
margin:10px;
float:left;
text-align:center;
overflow: hidden;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
background-color:#FFFFFF;
}

.profile_img img{
width:47px;
height:47px;
}

.profile_name{
font-weight:bold;
line-height:67px;
color:#FFFFFF;
padding-left:77px;
}

/*リセットボタン*/

#button_box{
width:394px;
margin-top:10px;
margin-bottom:10px;
text-align:center;
}


#button_box button, #button_box input[type=button],  
#button_box input[type=reset], #button_box input[type=submit] {  
    -webkit-box-shadow: inset 0 1px 3px #F1F1F1, inset 0 -15px #DFDFDF, 1px 1px 2px #E7E7E7;  
    -moz-box-shadow: inset 0 1px 3px #F1F1F1, inset 0 -15px #DFDFDF, 1px 1px 2px #E7E7E7;  
	padding: 6px 20px 4px;  
}  
#button_box button:hover, #button_box input[type=button]:hover,  
#button_box input[type=reset]:hover, #button_box input[type=submit]:hover {  
    -webkit-box-shadow: inset 0 1px 3px #e1e1e1, inset 0 -15px #cfcfcf, 1px 1px 2px #E7E7E7;  
    -moz-box-shadow: inset 0 1px 3px #e1e1e1, inset 0 -15px #cfcfcf, 1px 1px 2px #E7E7E7;  
	padding: 6px 20px 4px;  
}  
#button_box button:active, #button_box input[type=button]:active,  
#button_box input[type=reset]:active, #button_box input[type=submit]:active   {  
    background: #ccc;  
    padding: 6px 20px 4px;  
}  


/*白黒文字色切り替えボタン*/
.tgl {
  display: none;
}

.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 15em;
  height: 2em;
  position: relative;
  cursor: pointer;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-flat + .tgl-btn {
  padding: 2px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  background: #fff;
  border: 4px solid #f2f2f2;
  border-radius: 2em;
  float:left;
}
.tgl-flat + .tgl-btn:after {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  background: #f2f2f2;
  content: "";
  border-radius: 1em;
}
.tgl-flat:checked + .tgl-btn {
  border: 4px solid #7C7C7C;
}
.tgl-flat:checked + .tgl-btn:after {
  left: 50%;
  background: #7C7C7C;
}

#mojiiro{
width:340px;
margin-bottom:10px;
margin-top:0px;
overflow:hidden;
padding-left:30px;
}

.white{
float:left;
line-height:32px;
padding-right:20px;
font-weight:bold;
}

.black{
float:left;
line-height:32px;
padding-left:20px;
font-weight:bold;
}

/*画面背景色*/

.setumei{
text-align:left;
padding-left:37px;
font-weight:bold;
font-size:12px;
margin-top:-15px;
}

.main_bg{
width:394px;
height:100px;
margin-top:10px;
background-color:#FFFFFF;
border:4px solid #00A9A8;
border-radius:5px;        /* CSS3草案 */  
-webkit-border-radius:5px;    /* Safari,Google Chrome用 */  
-moz-border-radius:5px;   /* Firefox用 */ 
overflow:auto; 
}

ul#change-background-color {
    list-style: none;
	margin:0 auto;
	padding:10px;
}
ul#change-background-color li {
    float: left;
    margin: 5px;
    width: 20px;
	height:20px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
}


/*スクロールバー*/

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
background-color:#CCCCCC;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: rgba(242,10,126,0.8); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(242,10,126,0.4); 
}


/*-----------------------------
ドラッグ＆ドロップ画面
-----------------------------*/

.drop{
float:right;
width:40%;
padding-left:10%;
}

.drop h2{
height:25px;
text-align:left;
}

.drop h2 img{
height:25px;
}

/*メニューボタン*/

#btn_box{
clear:both;
overflow:hidden;
margin:0 auto;
padding:0;
height:auto;
width:auto;
}

.manu_btn{
width:185px;
height:97px;
line-height:25px;
font-weight:bold;
font-size:12px;
text-align:center;
margin-top:5px;
margin-bottom:5px;
margin-right:11px;
background-color:#FFFFFF;
border:4px solid #70ABCC;
border-radius:5px;        /* CSS3草案 */  
-webkit-border-radius:5px;    /* Safari,Google Chrome用 */  
-moz-border-radius:5px;   /* Firefox用 */ 
overflow:auto;
float:left;
}
.manu_btn img{
height:100%;
}

.manu_btn2{
width:185px;
height:97px;
line-height:25px;
font-weight:bold;
font-size:12px;
text-align:center;
margin-top:5px;
margin-bottom:5px;
margin-left:11px;
background-color:#FFFFFF;
border:4px solid #70ABCC;
border-radius:5px;        /* CSS3草案 */  
-webkit-border-radius:5px;    /* Safari,Google Chrome用 */  
-moz-border-radius:5px;   /* Firefox用 */ 
overflow:auto; 
}

.manu_btn2 img{
height:100%;
}

/*メニュー背景*/

.setumei2{
text-align:left;
padding-left:37px;
font-weight:bold;
font-size:12px;
margin-top:0px;
margin-bottom:0px;
}

.manu_bg{
width:394px;
height:100px;
line-height:100px;
font-weight:bold;
text-align:center;
margin-top:10px;
margin-bottom:15px;
background-color:#FFFFFF;
border:4px solid #FF9CAC;
border-radius:5px;        /* CSS3草案 */  
-webkit-border-radius:5px;    /* Safari,Google Chrome用 */  
-moz-border-radius:5px;   /* Firefox用 */ 
overflow:auto; 
}
.manu_bg img{
width:80%;
padding-top:10px;
}


/*プロフィール画像*/

.profile_bg{
width:394px;
height:100px;
line-height:100px;
font-weight:bold;
text-align:center;
margin-top:10px;
margin-bottom:15px;
background-color:#FFFFFF;
border:4px solid #8CC63F;
border-radius:5px;        /* CSS3草案 */  
-webkit-border-radius:5px;    /* Safari,Google Chrome用 */  
-moz-border-radius:5px;   /* Firefox用 */ 
overflow:auto; 
}
.profile_bg img{
height:80%;
padding-top:10px;
}



/*-----------------------------
フッター
-----------------------------*/

#footer{
		height: 350px;
		width: 100%;
		background: #C9C9C9;
		text-align:center;
		color: #f2f2f2;
		font-size:8px;
		bottom:0px;
		clear:both;
		display: block;
	}

#footer p{
font-size: 15px;
line-height: 20px;
color:#4D4D4D;
margin-top:5px;
}

/*装飾2*/

.mizutama2{
width:100%;
height:20px;
background-image:url(../img/bg02.png);
}

/*新着情報*/

#oshirase{
width:1030px;
height:auto;
clear:both;
overflow:hidden;
margin:0 auto;
}

#news{
width:400px;
height:auto;
float:left;
margin:15px auto 15px auto;
}

#news h2{
width:400px;
height:34px;
text-indent:-9999px;
background:url(../img/news.png) no-repeat top left;
background-size:auto 24px;
background-position:5px 5px;
background-color:#FF9CAC;
margin:0 auto;
}


.news_box{
width:380px;
height:140px;
background-color:#787878;
padding:10px;
}

.news_box ul{
width:100%;
height:110px;
overflow:auto;
padding:0;
margin:0 auto;
list-style:none;
}

.news_box ul li{
margin-left:0;
   padding:5px;
   font-size:12px;
   line-height:10px;
   border-bottom: 1px dashed #FFFFFF;
   text-align:left;
   list-style:none;
   height:58px;
   clear:both;
}

.news_img{
float:left;
height:58px;
}

.news_day{
padding:0;
height:22px;
float:left;
margin-left:10px;
display: block;
}

.news_day strong{
width:135px;
height:22px;
font-size:15px;
font-weight:bold;
line-height:22px;
color:#000000;
background-color:#FFFF00;
text-align:center;
margin-right:0;
margin-bottom:0;
right:0;
padding:0;
float:left;
}

.news_text{
font-size:12px;
font-weight:bold;
line-height:15px;
color:#FFFFFF;
margin-left:-205px;
margin-top:27px;
float:left;
display: block;
}

.news_text2{
font-size:12px;
font-weight:bold;
line-height:15px;
color:#FFFFFF;
margin-left:-135px;
margin-top:27px;
float:left;
display: block;
}

/*自作スタンプ紹介*/

.stamp_box{
width:600px;
float:right;
margin:15px auto 15px auto;
}


.stamp_t{
width:600px;
height:22px;
text-align:center;
background-color:#5ED334;
}

.stamp_t img{
padding-top:6px;
padding-bottom:6px;
}

.stamp{
background-color:#FFFFFF;
}

.stamp td{
width:118px;
border:1px solid #E6E6E6;
text-align:center;
color:#000000;
}

.stamp td img{
width:90%;
margin:0 auto;
}

.stamp td a{
color:#000000;
font-weight:bold;
line-height:15px;
width:100%;
}

.stamp_me{
height:26px;
text-align:right;
background-color:#5ED334;
}

.stamp_me img{
padding-top:7px;
padding-bottom:7px;
padding-right:20px;
}



/*-----------------------------
使い方
-----------------------------*/

.marker2 {
	background: linear-gradient(transparent 60%, rgba(102, 45, 145,0.19) 60%);
	font-size:21px;
	line-height:40px;
	font-weight:bold;
	padding-left:210px;
	padding-right:210px;
}


#tukaikata_box{
width:760px;
margin:0 auto;
text-align:left;
}

#tukaikata_box p{
text-align:left;
font-weight:bold;
font-size:14px;
line-height:20px;
padding-left:20px;
}

#tukaikata_box h2{
text-align:left;
clear:both;
}

.use_text{
width:378px;
float:left;
}

.use_img01{
float:right;
}

.use_img01 img{
width:100%;
}

.use_img02{
clear:both;
text-align:center;
margin:0 auto;
}

.use_img02{
width:90%;
}

.use_text2{
text-align:left;
padding-left:20px;
}

.how_to_jyuyo2{
font-size:12px;
line-height:24px;
font-weight:bold;
padding-left:10px;
padding-right:10px;
width: 100%;
position:relative;
}

.how_to_jyuyo2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 100%;
	height: 6px;
	background-color:rgba(255,115,172,0.62);
}


.how_to_tyui3{
font-size:12px;
line-height:24px;
color:#ED1C24;
font-weight:bold;
}