@charset "Shift_JIS";

/*****************************
/*基本設定
*****************************/

body {
    font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
    font-size: 100%;
    line-height: 1.5;
    padding: 0px;
    background-image:url("../../../img/up/oji_material/bk_oji.png"),url("../../../img/up/oji_material/bk_star.png");
    background-position:bottom,center;
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size:auto,  auto;
    background-color: #ECE9F3; /*背景色*/
    color:#000;
}

/*****************************
/*おじwebスマホとPCでサイズを分ける用のCSS
******************************/

@media screen and (max-width:999px) {
    body{
        font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
        font-size: 100%;
        line-height: 1.5;
        padding: 0;
        /*background-image:url("../../../img/up/oji_material/bk_oji.png"),url("../../../img/up/oji_material/bk_star.png");*/
        background-size: 250%,250%;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-position:bottom center,center center;

        background-color: #ECE9F3;
        color:#000;
    }
    .title_head{
        margin-top: 50px;
        text-align:center;
    }
    .top_btn{
        margin-top:100px;
        width:300px;
        height:100px;
        font-size:35px;
        background-color:#000;
        color:#FFF;
    }
    .title_oji {
        width: 250px;
        height: 180px;
    }
    .result_img{
        border: 3px solid #000000;
        display:block;
        margin:0 auto;
        width:90%;
        height:90%;
    }
    #overlay_privacy {
        display:none;
        position: absolute;
        left: 50%;
        top: 60%;
        z-index: 70;
        width: 90%;
        height: 100%;
        opacity:0.9;
        transform: translate(-50%,-50%);
    }
    #window_privacy{
        width: 90%;
        padding: 20px;
        background: #000;
        z-index: 90;
        opacity: 0.9;
    }
    #overlay_law {
         display:none;
         position: absolute;
         left: 50%;
        top: 60%;
        z-index: 70;
        width: 90%;
        height: 100%;
        opacity:0.9;
        transform: translate(-50%,-50%);
     }
    #window_law{
        width: 90%;
        padding: 20px;
        background: #000;
        z-index: 90;
        opacity: 0.9;
    }
    #overlay_sns {
        visibility: hidden;
        position: fixed;
        left: 0; top: 0;
        width: 100%; height: 100%;
        z-index: 70;
        background:rgba(0,0,0,0.8);
    }
    #window_sns{
        width: 80%;
        height: 70%;
        padding: 20px;
        position: fixed;
        left: 50%;
        top: 50%;
        background: #FFF;
        transform: translate(-50%,-50%);
        z-index: 90;
        text-align:center;
        border-radius:30px;
        display:flex;
        justify-content: center; /*左右中央揃え*/
        align-items: center;
    }
    #oji_sns_text{
        margin-bottom:50px;
        align-items:center;
        font-weight:bolder;
        font-size:22px;
        display:flex;
    }
    #oji_sns_text p{
        margin:0 auto;
    }
    .top_question{
        text-align: center;
        margin:20px auto;
        width:400px;
        font-size:30px;
    }
    #oji_store_apple{
        text-align:center;
    }
    #oji_store_google{
        text-align:center;
    }
    #oji_store_apple img{
        margin:0 auto;
        width:300px;
    }
    #oji_store_google img{
        margin:0 auto;
        width:300px;
    }
    #btn_cloth_sns{
        right:50%;
        display:inline-block;
        justify-content:center;
        align-items:center;
        z-index:100;
        cursor:pointer;
        border-radius:15px;
    }
    sns_msg{
        text-align:center;
    }
    #btn_cloth_sns span{
        text-decoration:underline;
    }

}

@media screen and (min-width:1000px){
    .title_head{
        margin-top:150px;
        text-align:center;
    }
    .top_btn{
        margin-top:200px;
        width:300px;
        height:100px;
        font-size:35px;
        background-color:#000;
        color:#FFF;
    }
    .result_img{
        border: 3px solid #000000;
        display:block;
        margin:0 auto;
        width:60%;
        height:60%;
    }
    #overlay_privacy {
        display:none;
        position: absolute;
        left: 50%;
        top: 60%;
        z-index: 70;
        width: 90%;
        height: 100%;
        opacity:0.9;
        transform: translate(-50%,-50%);
    }
    #window_privacy{
        width: 90%;
        padding: 20px;
        background: #000;
        z-index: 90;
        opacity: 0.9;
    }
    #overlay_law {
        display:none;
        position: absolute;
        left: 50%;
        top: 60%;
        z-index: 70;
        width: 90%;
        height: 100%;
        opacity:0.9;
        transform: translate(-50%,-50%);
    }
    #window_law{
        width: 90%;
        padding: 20px;
        background: #000;
        z-index: 90;
        opacity: 0.9;
    }
    #overlay_sns {
        visibility: hidden;
        position: fixed;
        left: 0; top: 0;
        width: 100%; height: 100%;
        z-index: 70;
        background:rgba(0,0,0,0.8);
    }
    #window_sns{
        width: 80%;
        height: 70%;
        padding: 20px;
        position: fixed;
        left: 50%;
        top: 50%;
        background: #FFF;
        transform: translate(-50%,-50%);
        z-index: 90;
        border-radius:15px;
        display:flex;
        justify-content: center; /*左右中央揃え*/
        align-items: center;
    }
    #oji_sns_text{
        margin-bottom:50px;
        align-items:center;
        font-weight:bolder;
        font-size:30px;
        display:flex;
    }
    #oji_sns_text p{
        margin:0 auto;
    }
    .top_question{
        text-align: center;
        margin:40px auto;
        width:400px;
        font-size:30px;
    }
    #oji_store_apple{
        text-align:center;
    }
    #oji_store_google{
        text-align:center;
    }
    #oji_store_apple img{
        margin:0 auto;
        width:600px;
    }
    #oji_store_google img{
        margin:0 auto;
        width:600px;
    }
    #btn_cloth_sns{
        right:50%;
        display:inline-block;
        justify-content:center;
        align-items:center;
        z-index:100;
        cursor:pointer;
        border-radius:15px;
    }
    #sns_msg{
        text-align:center;
    }
    #btn_cloth_sns span{
        text-decoration:underline;
    }
}

/*****************************
/*おじアプリ用のCSS
******************************/

:root {
    --background-navbar: #f5f5f5;
}

.oji_menu {
    list-style: none;
    position: absolute;
    width: 250px;
    height: 80px;
    top: 60px;
    left:60px;
    /*background: var(--background-navbar);*/
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    transform: scale(1, 0);
    transform-origin: top;
}

#apple_store img{
    width:50%;
    height:50%;
    vertical-align: middle;
    margin:5px 0;
}
#google_store img{
    width:55%;
    height:55%;
    vertical-align: middle;
}

/* Hamburger menu button */
.menu-btn:checked ~ .oji_menu {
    transform: scale(1, 1);
    transform-origin: top;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

/* Hamburger menbu text */
.oji_menu label {
    display:block;
    text-decoration: none;
    font-size: 16px;
    color: #fff;
    transition: 0.5s;
}

.oji_menu li{
    text-align:center;
    transition: 0.5s;
    background-color:#000;
}
.oji_menu_top{
    padding: 15px 0;
}
.to2{
    border-top: 1px solid rgb(255,255,255);
}

.menu-btn:checked ~ .oji_menu label,
.menu-btn:checked ~ .oji_menu li {
    /*opacity: 1;*/
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
}

.menu-btn {
    display: none;
}

.menu-icon {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 24px 14px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.navicon {
    background: #000;
    display: block;
    height: 3px;
    width: 26px;
    position: relative;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before,
.navicon:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    background: #000;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before {
    top: 9px;
}

.navicon:after {
    top: 18px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
    top: 0;
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
}

.menu-btn:checked ~ .menu-icon .navicon {
    background: rgba(0, 0, 0, 0);
    transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
/* Hamburger Menu Animation End */

.top_page{
    text-align:center;
}

.head_maker{
    text-align:center;
}
.maker_title_oji{
    width:180px;
    height:120px;
    margin-bottom:10px;
}

#popup_privacy{
    display: none;
}
#popup_law{
    display: none;
}
#popup_sns {
    display: none;
}

#btn_cloth_privacy{
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:40px;
    display:flex;
    transform: translate(50%,-50%);
    justify-content:center;
    align-items:center;
    background-color:#9d9d9d;
    border-radius: 100%;
    z-index:100;
    cursor:pointer;
    opacity:1;
}
#btn_cloth_privacy:hover {
    opacity: 0.7;
}
#btn_cloth_privacy span,
#btn_cloth_privacy span::before {
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #fff;
}
#btn_cloth_privacy span {
    transform: rotate(45deg);
}
#btn_cloth_privacy span::before {
    content: "";
    position: absolute;
    bottom: 0;
    transform: rotate(-90deg);
}

#btn_cloth_law{
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:40px;
    display:flex;
    transform: translate(50%,-50%);
    justify-content:center;
    align-items:center;
    background-color:#9d9d9d;
    border-radius: 100%;
    z-index:100;
    cursor:pointer;
    opacity:1;
}
#btn_cloth_law:hover {
    opacity: 0.7;
}
#btn_cloth_law span,
#btn_cloth_law span::before {
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #fff;
}
#btn_cloth_law span {
    transform: rotate(45deg);
}
#btn_cloth_law span::before {
    content: "";
    position: absolute;
    bottom: 0;
    transform: rotate(-90deg);
}

#btn_cloth_sns:hover {
    opacity: 0.7;
}

#popup_privacy:checked ~ #overlay_privacy {
    display:block;
}
#popup_privacy:checked ~ #overlay_privacy #window_privacy {
    animation: fadein 500ms forwards;
    animation-timing-function: ease-in-out;
}

#popup_law:checked ~ #overlay_law {
    display:block;
}
#popup_law:checked ~ #overlay_law #window_privacy {
    animation: fadein 500ms forwards;
    animation-timing-function: ease-in-out;
}

#popup_sns:checked ~ #overlay_sns {
    visibility: visible;
}
#popup_sns:checked ~ #overlay_sns #window_sns {
    animation: fadein 500ms forwards;
    animation-timing-function: ease-in-out;
}

@keyframes fadein {
    100% {
        opacity: 1;
    }
}
#privacy_msg {
    color: #fff;
    padding: 0.5em 1.5em;
    text-decoration: none;
    opacity:1;
}
#privacy_msg h2{
    text-align:center;
    margin-bottom:20px;
    opacity:1;
}
#law_msg {
    color: #fff;
    padding: 0.5em 1.5em;
    text-decoration: none;
    opacity:1;
}
#law_msg h2{
    text-align:center;
    margin-bottom:20px;
    opacity:1;
}

/*****************************
/*おじアプリ用のCSS 終了
******************************/

h1{
    font-size:16px;　/*見出し１*/
font-weight:bold;
}

h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form{
    margin: 0px;
    padding: 0px;
}

.Left{float:left;}
.Right{float:right;}
.Clear{clear:both;}

img { border-style:none; }

a {
    text-decoration: none;
    color:#EE7610;
}

a:hover {
    color:#F7B440;
}

/*画像をホバー時・アクティブ時に半透明にする*/
a:hover img.linkimg{
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
    background:none!important;
}

a:active img.linkimg{
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    background:none!important;
}


/*****************************
* header 設定
*****************************/

/*#title{*/
/*    width:1000px;*/
/*    height:100px;*/
/*    margin:0 auto 0 auto;*/
/*    margin-top:10px;*/
/*    margin-bottom:5px*/
/*}*/

#title .text{
    color:#EE7610;
    font-size:13px;
    padding-right:30px;
}


/*****************************
* menu 設定
*****************************/

.menu{
    width:1000px;
    margin:0 auto;
}

.menu li{
    display:block;
    float:left;
    height:50px;
    display:block;
    float:left;
    margin-left:22px;
    padding:0px 25px 0px 25px;
    line-height:50px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    -webkit-border-top-left-radius: 7px;    /* Safari,Google Chrome用 */
    -webkit-border-top-right-radius: 7px;   /* Safari,Google Chrome用 */
    -moz-border-radius-topleft: 7px;   /* Firefox用 */
    -moz-border-radius-topright: 7px;  /* Firefox用 */
    color:#FFF;
    font-weight:bold;
    background:#F7B440;
}

.menu li:hover{
    background:#EE7610;
    height:49px;
    margin-left:20px;
    border-top:1px solid #EE7610;
    border-left:1px solid #EE7610;
    border-right:1px solid #EE7610;
}

.menu li:active{
    height:49px;
    margin-left:20px;
    border-top:1px solid #CF670C;
    border-left:1px solid #CF670C;
    border-right:1px solid #CF670C;
    box-shadow: 0px 1px 3px 2px #CF670C inset;
}

.menu_bar{
    width:100%;
    height:10px;
    background:#EE7610;
}


/*****************************
* main contents 設定
*****************************/

#main{
    background:#FFF;
    padding-bottom:20px;
}

#main_inbox{
    width:1000px;
    margin:0 auto 0 auto;
}

#left_box{
    width:700px;
    margin:20px 10px 10px 20px;
}

#right_box{
    width:240px;
    margin:20px 25px 10px 0px;
}

#bottom_box{
    width:1000px;
    margin:0 auto 0 auto;
}

#social_box{
    background:#FFFF00;
    width:75px;
    height:75px;
    right:60px;
    text-align:center;
    position:fixed;
    bottom:35px;
    list-style-type:none;
    display:none;
    background:#EE7610;
    color:#FFF;
    line-height:80px;
    font-weight:bold;
    border-radius:40px;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
}

.backtop{
    width: 0;
    height: 0;
    float: left;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #FFF;
    border-width: 24px
}

.backtop::before{
    position: relative;
    content: '';
    top: 20px;
    left: -11px;
    float: left;
    width: 21px;
    height: 21px;
    background: #FFF;
    border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 2px 2px;
    -webkit-border-radius: 0 0 2px 2px;
    -ms-border-radius: 0 0 2px 2px
}


/*****************************
* footer 設定
*****************************/

.footer{
    width:850px;
    margin:0 auto;

}

.footer li{
    display:block;
    float:left;
    height:35px;
    display:block;
    float:left;
    margin-left:30px;
    padding:0px 35px 0px 35px;
    font-size:15px;
    line-height:35px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;    /* Safari,Google Chrome用 */
    -webkit-border-bottom-right-radius: 7px;   /* Safari,Google Chrome用 */
    -moz-border-radius-bottomleft: 7px;   /* Firefox用 */
    -moz-border-radius-bottomright: 7px;  /* Firefox用 */
    color:#FFF;
    font-weight:bold;
    background:#F7B440;
}

.footer li:hover{
    background:#EE7610;
    height:34px;
    margin-left:28px;
    border-bottom:1px solid #EE7610;
    border-left:1px solid #EE7610;
    border-right:1px solid #EE7610;
}

.footer li:active{
    height:34px;
    margin-left:28px;
    border-bottom:1px solid #CF670C;
    border-left:1px solid #CF670C;
    border-right:1px solid #CF670C;
    box-shadow: 0px 0px 3px 2px #CF670C inset;
}

.footer_box{
    clear: both;
    width:100%;
    margin:70px 0px;
    font-size:13px;
    color:#EE7610;
    text-align:center;
}


/*****************************
* 新規登録ボタン
*****************************/

.touroku{
    width:238px;
    height:70px;
    margin:0px;
    border:1px solid #59C3E0;
    background: #0096BD;
    background: -prefix-linear-gradient(top, #00B1E0, #0096BD);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #00B1E0, #0096BD);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    font-size:22px;
    color:#FFF;
    font-weight:bold;
    text-align:center;
    line-height:70px;
}

.touroku:hover{
    border:1px solid #59C3E0;
    background: -prefix-linear-gradient(top, #5BC7E5, #37A4BF);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #5BC7E5, #37A4BF);    /* 標準ブラウザ用グラデーション */
}

.touroku:active{
    border:1px solid #135466;
    background:#1E87A3;
    box-shadow: 2px 2px 3px 1px #135466 inset;
}



/*****************************
* 新規登録フォーム
*****************************/

.regist_form{
    width:600px;
    padding:10px 10px 25px 10px;
    margin:3px 40px 60px 40px;
    border:1px solid #CACACA;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    font-size:15px;
    color:#EE7610;
    text-align: center;
}

.regist_form .form-title{
    text-align: center;
    font-size:16px;
    font-weight:bold;
    border-bottom:1px solid #CACACA;
    padding-bottom:8px;
    margin-bottom:10px;
}

.regist_form .label{
    margin:10px 0px 10px 15px;
    text-align: left;
    float:left;
}

.regist_form .radio{
    padding:5px;
    margin:7px 13px 0px;
}

.regist_form .input{
    width: 380px;
    padding:5px;
    font-size: 13px;
    margin:7px 15px 13px 0px;
    border:1px solid #CACACA;
    float:right;
}

.regist_form .select{
    width: 391px;
    padding:5px;
    font-size: 13px;
    margin:7px 15px 13px 0px;
    border:1px solid #CACACA;
    float:right;
}

.regist_form .textarea{
    width: 380px;
    height:150px;
    padding:5px;
    font-size: 13px;
    margin:7px 15px 13px 0px;
    border:1px solid #CACACA;
    float:right;
}

.regist_form .submit{
    height:54px;
    background-color: #dedede;
    background: -moz-linear-gradient(top, #FFF, #EAEAEA);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFF), color-stop(1.0, #EAEAEA));
    border: 1px solid #CACACA;
    color: #484848;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 15px;
    margin-top:15px;
}

.regist_form .submit:hover{
    border:1px solid #EE7610;
    background: -prefix-linear-gradient(top, #FFF, #F5F5F5);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FFF, #F5F5F5);    /* 標準ブラウザ用グラデーション */
}

.regist_form .submit:active{
    color:#FFF;
    border:1px solid #EE7610;
    background:#EE7610;
    box-shadow: 1px 1px 2px 1px #CF670C inset;
}


/*****************************
* ログインフォーム
*****************************/

.login_form{
    width:218px;
    height:180px;
    padding:10px;
    margin:-10px 0px 10px 0px;
    border:1px solid #59C3E0;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    font-size:13px;
    color:#2D92B1;
    text-align: center;
}

.login_form .form-title{
    text-align: center;
    font-size:13px;
    border-bottom:1px solid #59C3E0;
    padding-bottom:3px;
    margin-bottom:10px;
}

.login_form p{
    text-align: left;
}

.login_form input{
    width: 210px;
    padding:3px;
    font-size: 13px;
    margin-bottom:10px;
    border:1px solid #59C3E0;
}

.login_form .submit{
    font-family: Arial;
    width:100px;
    height:30px;
    margin: 7px 0 auto;
    border:1px solid #59C3E0;
    background:#0096BD;
    background: -prefix-linear-gradient(top, #00B1E0, #0096BD);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #00B1E0, #0096BD);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    font-size:14px;
    color:#FFF;
    font-weight:bold;
}
.login_form .submit:hover{
    border:1px solid #59C3E0;
    background: -prefix-linear-gradient(top, #5BC7E5, #37A4BF);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #5BC7E5, #37A4BF);    /* 標準ブラウザ用グラデーション */
}

.login_form .submit:active{
    border:1px solid #135466;
    background:#1E87A3;
    box-shadow: 1px 1px 2px 1px #135466 inset;
}


/*****************************
* 下段パーツ
*****************************/

.free_box{
    width:280px;
    height:130px;
    border:1px solid #CACACA;
    margin:0px 14px 0px 10px;
    float:left;
    padding:10px;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    font-size:12px;
    color:#000;
    text-align:left;
}

.free_box:hover,
.free_box:active{
    background: #FBFBFB;
    background: -prefix-linear-gradient(top, #FFF, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FFF, #EBECEC);    /* 標準ブラウザ用グラデーション */
}

.free_box .title{
    width:277px;
    border-bottom:1px solid #F7B440;
    padding-bottom:5px;
    margin-bottom:10px;
    font-size:14px;
    font-weight:bold;
    color:#333;
}

.free_box_img{
    width:300px;
    height:150px;
    border:1px solid #CACACA;
    margin:0px 14px 0px 10px;
    float:left;
}

/*****************************
* ログイン後下段パーツ
*****************************/

.free_box .prof{
    height:130px;
    float:left;
}

.free_box .name{
    margin:10px;
    font-size:15px;
    font-weight:bold;
    color:#333;
}

.free_box .text{
    margin:10px;
    font-size:13px;
    color:#333;
}

/*****************************
* 下段スクロール用
*****************************/
.als-container {
    position: relative;
    width: 1000px;
    margin: 0px auto;
}

.als-viewport {
    position: relative;
    overflow: hidden;
    margin: 0px auto;
}

.als-wrapper {
    position: relative;
    list-style: none;
}

.als-item {
    position: relative;
    display: block;
    text-align: center;
    cursor: pointer;
    float: left;
}

.als-prev, .als-next {
    position: absolute;
    cursor: pointer;
    clear: both;
}

#bottom_box .als-item {
    margin: 0px 0px;
}

#bottom_box .als-item img {
    position: relative;
    display: block;
    vertical-align: middle;
}

#bottom_box .als-prev, #bottom_box .als-next {
    top: 60px;
    width: 15px;
    height: 22px;
}

#bottom_box .als-prev {
    left: 0px;
}

#bottom_box .als-next {
    right: 0px;
}


/*****************************
* メイン部分パーツ 設定
*****************************/

#left_box .title{
    width:670px;
    font-size:17px;
    font-weight:bold;
    border-bottom:1px solid #EE7610;
    border-left:10px solid #EE7610;
    padding:5px 0px 5px 10px;
    margin:15px 0px 20px 5px;
}

#left_box .text{
    width:650px;
    font-size:12px;
    padding:5px 0px 5px 25px;
}

#left_box .text p{
    font-size:13px;
    font-weight:bold;
    padding:15px 0px 3px 0px;
}


/*****************************
* よくある質問　設定
*****************************/

ul.faq-menu {
    width:650px;
    margin-left: 20px;
    list-style:none;
    border-top:1px solid #CACACA;
    border-top-style: dashed;
}

.question {
    width: 620px;
    height: 20px;
    background: #FFF;
    color: #696969;
    text-align: left;
    font-size: 13px;
    padding: 8px 15px;
    cursor: pointer;
    line-height: 20px;
    border-bottom:1px solid #CACACA;
    border-bottom-style: dashed;
}
.question:hover {
    background: #F7B440;
    color: #ffffff;
}

.answer {
    width: 620px;
    height: auto;
    background-color: #F5F5F5;
    color: #000;
    text-align: left;
    font-size: 12px;
    padding: 10px 15px 15px 15px;
    cursor: pointer;
    display: none;
    list-style:none;
}

.answer p {
    color: #deb887;
    font-size: 16px;
    font-weight: bold;
}


/*****************************
* 問い合わせフォーム
*****************************/

.mail_form{
    width:600px;
    height:380px;
    padding:10px;
    margin:25px 40px;
    border:1px solid #CACACA;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    font-size:15px;
    color:#EE7610;
    text-align: center;
}

.mail_form .form-title{
    text-align: center;
    font-size:14px;
    border-bottom:1px solid #CACACA;
    padding-bottom:8px;
    margin-bottom:10px;
}

.mail_form .label{
    margin:10px 15px;
    text-align: left;
    float:left;
}

.mail_form .input{
    width: 400px;
    padding:5px;
    font-size: 13px;
    margin:7px 25px 13px 0px;
    border:1px solid #CACACA;
    float:right;
}

.mail_form .textarea{
    width: 400px;
    height:150px;
    padding:5px;
    font-size: 13px;
    margin:7px 25px 13px 0px;
    border:1px solid #CACACA;
    float:right;
}

.mail_form .submit{
    background-color: #dedede;
    background: -moz-linear-gradient(top, #FFF, #EAEAEA);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFF), color-stop(1.0, #EAEAEA));
    border: 1px solid #CACACA;
    color: #484848;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 15px;
    margin-top:10px;
}
.mail_form .submit:hover{
    border:1px solid #EE7610;
    background: -prefix-linear-gradient(top, #FFF, #F5F5F5);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FFF, #F5F5F5);    /* 標準ブラウザ用グラデーション */
}

.mail_form .submit:active{
    color:#FFF;
    border:1px solid #EE7610;
    background:#EE7610;
    box-shadow: 1px 1px 2px 1px #CF670C inset;
}


/*****************************
* 会社概要など
*****************************/

.contents_l{
    width:189px;
    font-size:15px;
    padding:10px 0px 10px 10px;
    margin:0px 0px 10px 40px;
    border-bottom:1px solid #CACACA;
    border-bottom-style: dashed;
    float:left;
}

.contents_r{
    width:385px;
    font-size:15px;
    padding:10px 0px 10px 30px;
    margin:0px 0px 10px 0px;
    border-bottom:1px solid #CACACA;
    border-bottom-style: dashed;
    float:left;
}

/*****************************
* ログイントップ　パーツ
*****************************/

#left_box .box{
    width:220px;
    height:270px;
    border:1px solid #CACACA;
    margin:15px 11px 0px 0px;
    float:left;
}

#left_box .search{
    width:645px;
    height:150px;
    border:1px solid #8EC220;
    padding:10px 20px 10px 25px;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    text-align: center;
}

#left_box .search .select{
    width:115px;
    height:30px;
    border:1px solid #CACACA;
    padding:5px;
    margin:10px 10px 0px 0px;
}

#left_box .search .submit{
    width:250px;
    height:40px;
    margin: 20px 0 auto;
    border:1px solid #8EC220;
    background:#8EC220;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    font-size:16px;
    color:#FFF;
    font-weight:bold;
}

#left_box .search .submit:hover{
    border:1px solid #8EC220;
    background:#6E9618;
    background: -prefix-linear-gradient(top, #8EC220, #6E9618);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #8EC220, #6E9618);    /* 標準ブラウザ用グラデーション */
}

#left_box .search .submit:active{
    border:1px solid #527012;
    background:#678C16;
    box-shadow: 0px 1px 3px 2px #527012 inset;
}

.login_title{
    width:673px;
    height:24px;
    padding:5px 10px;
    color:#FFF;
    font-size:16px;
    font-weight:bold;
    background:#8EC220;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
}

.newmail_img{
    width:20px;
    height:20px;
    background: url("../img/newmail.png");
    float:left;
    margin-bottom:8px;
    padding-bottom:3px;
    border-bottom:1px dashed #EE7610;
}
.newmail{
    width:300px;
    height:20px;
    font-size:14px;
    font-weight:bold;
    color:#EE7610;
    float:left;
    padding-left:8px;
    padding-bottom:3px;
    margin-bottom:8px;
    border-bottom:1px dashed #EE7610;
}

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

.profile{
    width:218px;
    height:417px;
    padding:10px;
    margin:-25px 0px 10px 0px;
    border:1px solid #CACACA;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    text-align: center;
    font-size:12px;
}

.profile .name{
    font-size:15px;
    font-weight:bold;
    color:#333;
    text-align:center;
    margin-bottom:7px;
}

.profile .leftbox{
    width:70px;
    font-size:13px;
    font-weight:bold;
    color:#FFF;
    padding:5px 0px;
    border-top:1px solid #EE7610;
    border-left:1px solid #EE7610;
    border-right:1px solid #EE7610;
    background:#F7B440;
    float:left;
}

.profile .rightbox{
    width:145px;
    font-size:13px;
    padding:5px 0px;
    border-top:1px solid #EE7610;
    border-right:1px solid #EE7610;
    background:#FFF;
    float:left;
}

.profile hr{
    width:218px;
    border:none;
    border-top:1px solid #EE7610;
    height:1px;
    margin:0px 0px 10px 0px;
}

.profile .coin{
    width:20px;
    height:20px;
    background: url("../img/coin.png");
    float:left;
    margin-left:45px;
    margin-bottom:5px;
}
.profile .point{
    font-size:15px;
    font-weight:bold;
    color:#333;
    float:left;
    margin-left:10px;
    margin-bottom:5px;
}


/*****************************
* フレンドページ
*****************************/

.friend_list{
    width:670px;
    border:1px solid #8EC220;
    margin:10px 0px 20px 0px;
    float:left;
    padding:10px 10px 20px 10px;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    font-weight:bold;
}

.friend_list p{
    margin:10px;
    font-size:17px;
    color:#8EC220;
    text-align:center;
    padding:0px 0px 5px 0px;
}

.friend{
    width:300px;
    height:90px;
    border:1px solid #CACACA;
    margin:10px 5px 0px 7px;
    float:left;
    padding:9px;
    background: #FFF;
    font-size:12px;
    color:#000;
    text-align:left;
}

.friend img{
    height:90px;
    float:left;
}

.friend p{
    margin-left:10px;
    font-size:14px;
    line-height:70px;
    color:#333;
    float:left;
}

.friend p:hover{
    color:#CACACA;
}

.friend .button{
    width:60px;
    height:20px;
    font-size:14px;
    text-align:center;
    color:#333;
    float:right;
    margin-top:27px;
    padding:5px;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border:1px solid #CACACA;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
}

.friend .button:hover{
    background: #F7B440;
    border:1px solid #EE7610;
    color:#FFF;
}

.friend .button:active{
    background: #EE7610;
    border:1px solid #CF670C;
    box-shadow: 0px 1px 3px 2px #CF670C inset;
    color:#FFF;
}


/*****************************
* メールボックス
*****************************/

.mail_list{
    width:100px;
    border-top:1px solid #8EC220;
    border-bottom:1px solid #8EC220;
    border-left:1px solid #8EC220;
    margin:10px 0px 20px 0px;
    float:left;
    padding:10px;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    -webkit-border-top-left-radius: 7px;    /* Safari,Google Chrome用 */
    -webkit-border-bottom-left-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius-topleft: 7px;   /* Firefox用 */
    -moz-border-radius-bottomleft: 7px;   /* Firefox用 */
    text-align:right;
}

.mail_list a{
    font-size:15px;
    color:#8EC220;
    margin:3px;
}

.mail_list a:hover,
.mail_list a:active{
    color:#CACACA;
}

.mail_box{
    width:670px;
    border:1px solid #8EC220;
    margin:10px 0px 20px 0px;
    float:left;
    padding:10px;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    font-size:14px;
    color:#333;
}

.mail_contents{
    width:666px;
    height:345px;
    border:1px solid #CACACA;
    margin-top:5px;
    background: #FFF;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
}

.mail_contents a{
    color:#8EC220;
}

.mail_contents a:hover,
.mail_contents a:active{
    color:#CACACA;
}

.mail_contents .back{
    font-size:12px;
    float:left;
    margin:3px 0px 3px 5px;
}

.mail_contents .next{
    font-size:12px;
    float:right;
    margin:3px 5px 3px 0px;
}

.mail_contents .sender{
    width:180px;
    margin:3px 0px;
    padding:2px 0px 2px 3px;
    font-size:12px;
    float:left;
}

.mail_contents .subject{
    width:331px;
    margin:3px 0px;
    padding:2px 0px 2px 3px;
    font-size:12px;
    float:left;
}

.mail_contents .time{
    width:140px;
    margin:3px 0px;
    padding:2px 0px 2px 3px;
    font-size:12px;
    float:left;
}

.mail_contents .gry{
    color:#666666;
    background:#F7F7F7;
    border-top:1px solid #CACACA;
    border-bottom:1px solid #CACACA;
    border-right:1px solid #CACACA;
    border-left:1px solid #FFF;
}

.mail_contents .wht{
    color:#666666;
    background:#FFF;
    border-bottom:1px dashed #CACACA;
    border-right:1px solid #FFF;
    border-left:1px solid #FFF;
}

.mail_contents .mail_img{
    padding:12px;
    background:#FFF;
    border-top:1px solid #CACACA;
    border-right:1px solid #CACACA;
    float:left;
}

.mail_contents .mail_title{
    width:545px;
    height:20px;
    font-size:13px;
    color:#666666;
    padding:8px;
    background:#F7F7F7;
    border-top:1px solid #CACACA;
    float:left;
}

.mail_contents .mail_inside{
    width:646px;
    height:155px;
    font-size:12px;
    color:#666666;
    padding:10px;
    background:#FFF;
    border-top:1px dashed #CACACA;
    border-bottom:1px dashed #CACACA;
    overflow:auto;
}

.mail_contents .button{
    width:100px;
    height:20px;
    font-size:14px;
    text-align:center;
    color:#333;
    margin:5px;
    padding:1px 5px;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border:1px solid #CACACA;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
}

.mail_contents .org:hover{
    background: #F7B440;
    border:1px solid #EE7610;
    color:#FFF;
}

.mail_contents .org:active{
    background: #EE7610;
    border:1px solid #CF670C;
    box-shadow: 0px 1px 3px 2px #CF670C inset;
    color:#FFF;
}

.mail_contents .grn:hover{
    background: #8EC220;
    border:1px solid #8EC220;
    color:#FFF;
}

.mail_contents .grn:active{
    background: #678C16;
    border:1px solid #527012;
    box-shadow: 0px 1px 3px 2px #527012 inset;
    color:#FFF;
}

/*****************************
* ポイント購入
*****************************/

.inbox{
    width:650px;
    background:#FFF;
    margin:10px 10px 0px 10px;
    font-size:13px;
    font-weight:normal;
    text-align:center;
    border:1px solid #CACACA;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
}

.inbox p{
    font-size:18px;
    text-align:center;
}

.inbox a{
    color:#8EC220;
}

.inbox a:hover,
.inbox a:active{
    color:#CACACA;
}

.point_button{
    width:300px;
    height:40px;
    text-align:center;
    line-height:40px;
    padding:5px;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border:1px solid #CACACA;
    border-radius: 10px;
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
    margin: 0 auto 0 auto;
    margin-bottom:10px;
}

.point_button a{
    color:#333;
    display:block;
    font-size:16px;
    font-weight:bold;
}

.point_button:hover{
    background: #8EC220;
    border:1px solid #8EC220;
    color:#FFF;
}

.point_button:active{
    background: #678C16;
    border:1px solid #527012;
    box-shadow: 0px 1px 3px 2px #527012 inset;
    color:#FFF;
}

.point_button a:hover,
.point_button a:active{
    color:#FFF;
    display:block;
}

.point_form{
    width:400px;
    padding:40px 22px;
    background: #FFF;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    text-align: center;
    margin:0 auto 0 auto;
}

.point_form .input{
    width:290px;
    height:30px;
    border:1px solid #CACACA;
    padding:0px 5px;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    margin:0px 0px 10px 10px;
}

.point_form .select{
    width:300px;
    height:30px;
    border:1px solid #CACACA;
    padding:5px;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    margin:0px 0px 10px 10px;
}

.point_form .textarea{
    width:290px;
    height:150px;
    border:1px solid #CACACA;
    padding:0px 5px;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    margin:0px 0px 10px 10px;
}

.point_form .submit{
    width:250px;
    height:40px;
    margin: 40px 0 auto;
    border:1px solid #CACACA;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
    font-size:16px;
    color:#333;
    font-weight:bold;
}

.point_form .submit:hover{
    background: #8EC220;
    border:1px solid #8EC220;
    color:#FFF;
}

.point_form .submit:active{
    background: #678C16;
    border:1px solid #527012;
    box-shadow: 0px 1px 3px 2px #527012 inset;
    color:#FFF;
}

.tradetable{
    margin:0 auto 0 auto;
}

/*****************************
* 足跡ページ　設定
*****************************/

.visitor_day{
    width:200px;
    border-bottom:1px dashed #CACACA;
    padding:4px 0px;
    float:left;
}

.visitor_time{
    width:100px;
    border-bottom:1px dashed #CACACA;
    padding:4px 0px;
    float:left;
}

.visitor_name{
    width:304px;
    border-bottom:1px dashed #CACACA;
    padding:4px 0px 4px 40px;
    text-align:left;
    float:left;
}

.visitor_name a{
    color:#8EC220;
}

.visitor_name a:hover,
.visitor_name a:active{
    color:#CACACA;
}

.visitor_gry{
    color:#666666;
    background:#F7F7F7;
    border-top:1px solid #CACACA;
    border-bottom:1px solid #CACACA;
    border-right:1px solid #CACACA;
    border-left:1px solid #FFF;
}

.visitor_wht{
    color:#666666;
    background:#FFF;
    border-bottom:1px dashed #CACACA;
    border-right:1px solid #FFF;
    border-left:1px solid #FFF;
}

.inbox .next{
    color:#8EC220;
    padding:5px 15px;
}



/*****************************
* アルバム　設定
*****************************/

#wrap{
    width:100%;
}

.trim{
    display:block;
    width:160px; /*トリミング後の横幅*/
    height:160px; /*トリミング後の縦幅*/
    overflow:hidden;
    position:relative;
    z-index:1;
    float:left;
    background-color: #fff;
    border: 1px solid #CCC;
    margin: 0px 5px 14px 5px;
}

.trim img{
    position:absolute;
}

/*****************************
* ユーザープロフィール　設定
*****************************/

.user_img{
    width:150px;
    background-color: #fff;
    border:1px solid #CACACA;
    padding: 5px 5px 0px 5px;
    float:left;
}

.user_prof{
    width:200px;
    padding:5px 0px 0px 0px;
    margin-left:15px;
    float:left;
}

.user_prof table {
    width: 230px;
    border: 1px #000000;
}

.user_prof td {
    font-size:13px;
    font-weight:normal;
    border-bottom: 1px #CACACA solid;
    padding-top:3px;
}

.user_text {
    width:156px;
    height:126px;
    font-size:14px;
    font-weight:normal;
    float:left;
    margin:28px 0px 0px 45px;
    text-overflow:ellipsis;
    overflow:hidden;
}

.user_text p{
    font-size:16px;
    font-weight:bold;
    text-align:left;
    color:#000;
    margin:0px 0px -3px 0px;
}

.user_button{
    width:200px;
    padding:5px 0px 0px 0px;
    text-align:right;
    float:right;
}

.user_button .button{
    width:200px;
    height:30px;
    font-size:14px;
    text-align:center;
    line-height:30px;
    color:#333;
    float:right;
    margin-top:10px;
    margin-right:18px;
    padding:5px;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border:1px solid #CACACA;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
}

.user_button .button:hover{
    background:#8EC220;
    border:1px solid #8EC220;
    color:#FFF;
}

.user_button .button:active{
    background: #678C16;
    border:1px solid #527012;
    box-shadow: 0px 1px 3px 2px #527012 inset;
    color:#FFF;
}

.comment {
    position: relative;
    width:670px;
    padding:10px;
    margin-bottom:20px;
    font-size:13px;
    background: #ffffff;
    background: #EBECEC;
    background: -prefix-linear-gradient(top, #FBFBFB, #EBECEC);  /* 古いブラウザ用グラデーション */
    background: linear-gradient(to bottom, #FBFBFB, #EBECEC);    /* 標準ブラウザ用グラデーション */
    border:1px solid #8EC220;
    border-radius: 7px;
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 7px;   /* Firefox用 */
}

.comment:after, .comment:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.comment:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #FAFAFA;
    border-width: 12px;
    left: 15%;
    margin-left: -10px;
}
.comment:before {
    border-color: rgba(43, 167, 223, 0);
    border-bottom-color: #8EC220;
    border-width: 13px;
    left: 15%;
    margin-left: -11px;
}