@charset 'UTF-8';
/*--------------------------------------
	copyright : d-techno
-----------------------------------*/
/*smart_phone_config*/
/*共通パーツ化が困難だったため追記*/
/* *****************************
 *
 * INDEX file to Scss or Sass.
 *
 **************************** */
/*base setting*/
/*margin-setting*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
.mb5px
{
    margin-bottom: 5px;
}

.mr5px
{
    margin-right: 5px;
}

.ml5px
{
    margin-left: 5px;
}

.mb10px
{
    margin-bottom: 10px;
}

.mr10px
{
    margin-right: 10px;
}

.ml10px
{
    margin-left: 10px;
}

.mb15px
{
    margin-bottom: 15px;
}

.mr15px
{
    margin-right: 15px;
}

.ml15px
{
    margin-left: 15px;
}

.mb20px
{
    margin-bottom: 20px;
}

.mr20px
{
    margin-right: 20px;
}

.ml20px
{
    margin-left: 20px;
}

.mb25px
{
    margin-bottom: 25px;
}

.mr25px
{
    margin-right: 25px;
}

.ml25px
{
    margin-left: 25px;
}

.mb30px
{
    margin-bottom: 30px;
}

.mr30px
{
    margin-right: 30px;
}

.ml30px
{
    margin-left: 30px;
}

.mb35px
{
    margin-bottom: 35px;
}

.mr35px
{
    margin-right: 35px;
}

.ml35px
{
    margin-left: 35px;
}

.mb40px
{
    margin-bottom: 40px;
}

.mr40px
{
    margin-right: 40px;
}

.ml40px
{
    margin-left: 40px;
}

.mb45px
{
    margin-bottom: 45px;
}

.mr45px
{
    margin-right: 45px;
}

.ml45px
{
    margin-left: 45px;
}

.mb50px
{
    margin-bottom: 50px;
}

.mr50px
{
    margin-right: 50px;
}

.ml50px
{
    margin-left: 50px;
}

.mb55px
{
    margin-bottom: 55px;
}

.mr55px
{
    margin-right: 55px;
}

.ml55px
{
    margin-left: 55px;
}

.mb60px
{
    margin-bottom: 60px;
}

.mr60px
{
    margin-right: 60px;
}

.ml60px
{
    margin-left: 60px;
}

.mb65px
{
    margin-bottom: 65px;
}

.mr65px
{
    margin-right: 65px;
}

.ml65px
{
    margin-left: 65px;
}

.mb70px
{
    margin-bottom: 70px;
}

.mr70px
{
    margin-right: 70px;
}

.ml70px
{
    margin-left: 70px;
}

.mb75px
{
    margin-bottom: 75px;
}

.mr75px
{
    margin-right: 75px;
}

.ml75px
{
    margin-left: 75px;
}

.mb80px
{
    margin-bottom: 80px;
}

.mr80px
{
    margin-right: 80px;
}

.ml80px
{
    margin-left: 80px;
}

.mb85px
{
    margin-bottom: 85px;
}

.mr85px
{
    margin-right: 85px;
}

.ml85px
{
    margin-left: 85px;
}

.mb90px
{
    margin-bottom: 90px;
}

.mr90px
{
    margin-right: 90px;
}

.ml90px
{
    margin-left: 90px;
}

.mb95px
{
    margin-bottom: 95px;
}

.mr95px
{
    margin-right: 95px;
}

.ml95px
{
    margin-left: 95px;
}

.mb100px
{
    margin-bottom: 100px;
}

.mr100px
{
    margin-right: 100px;
}

.ml100px
{
    margin-left: 100px;
}

/*layout-setting*/
.fr
{
    float: right;
}

.fl
{
    float: left;
}

.ac
{
    text-align: center;
}

.ar
{
    text-align: right;
}

.al
{
    text-align: left;
}

/*font-settion*/
em
{
    font-weight: bold;
}

.red
{
    color: #ef4e74;
}

h1
{
    font-weight: normal;
}

/*btn-setting*/
.btnRed
{
    border-bottom: 5px solid #831937; 
    background: #f03e68;
}
.btnRed:hover
{
    transition: .1s; 

    border-top: 5px solid #831937;
    border-bottom: none;
}
.btnRed a
{
    display: block;

    color: #fff;
}

.btnBlue
{
    border-bottom: 5px solid #1e396a; 
    background: #357ac7;
}
.btnBlue:hover
{
    transition: .1s; 

    border-top: 5px solid #1e396a;
    border-bottom: none;
}
.btnBlue a
{
    display: block;

    color: #fff;
}

.btnGlay
{
    border-bottom: 5px solid #666; 
    background: #dbdbdb;
}
.btnGlay:hover
{
    transition: .1s; 

    border-top: 5px solid #666;
    border-bottom: none;
}
.btnGlay a
{
    display: block;

    color: #606060;
}

@font-face
{
    font-family: 'icomoon';
    font-weight: normal;
    font-style: normal; 

    src: url('../font/icomoon.eot?-qz7pb2');
    src: url('../font/icomoon.eot?#iefix-qz7pb2') format('embedded-opentype'), url('../font/icomoon.woff?-qz7pb2') format('woff'), url('../font/icomoon.ttf?-qz7pb2') format('truetype'), url('../font/icomoon.svg?-qz7pb2#icomoon') format('svg');
}
[class^='icon-'],
[class*=' icon-']
{
    font-family: 'icomoon';
    font-size: 26px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 40px;

    display: block;

    min-width: 40px;

    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    text-transform: none;

    speak: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class^='icon-']:before,
[class*=' icon-']:before
{
    display: table-cell;

    min-width: 40px;
}

.icon-evernote:before
{
    content: '\e004';
}

.icon-feedly:before
{
    content: '\e007';
}

.icon-pocket:before
{
    content: '\e008';
}

.icon-line:before
{
    content: '\e009';
}

.icon-hatena:before
{
    content: '\e00a';
}

.icon-feedly-square:before
{
    content: '\e601';
}

.icon-googleplus:before
{
    content: '\e608';
}

.icon-facebook:before
{
    content: '\e60d';
}

.icon-instagram:before
{
    content: '\e610';
}

.icon-twitter:before
{
    content: '\e611';
}

.icon-feed:before
{
    content: '\e614';
}

.icon-youtube:before
{
    content: '\e617';
}

.icon-flickr2:before
{
    content: '\e61e';
}

.icon-githubmark:before
{
    content: '\e626';
}

.icon-github:before
{
    content: '\e627';
}

.icon-wordpress:before
{
    content: '\e629';
}

.icon-tumblr:before
{
    content: '\e62d';
}

.icon-yahoo:before
{
    content: '\e62f';
}

.icon-apple:before
{
    content: '\e631';
}

.icon-android:before
{
    content: '\e633';
}

.icon-windows:before
{
    content: '\e634';
}

.icon-windows8:before
{
    content: '\e635';
}

.icon-skype:before
{
    content: '\e636';
}

.icon-delicious:before
{
    content: '\e638';
}

.icon-pinterest:before
{
    content: '\e63a';
}

.icon-facebook:hover,
.icon-facebook:focus,
.icon-twitter:hover,
.icon-twitter:focus,
.icon-line:hover,
.icon-line:focus
{
    background-color: var(--hover) !important;
}

.icon-facebook:visited,
.icon-facebook:link,
.icon-twitter:visited,
.icon-twitter:link,
.icon-line:visited,
.icon-line:link
{
    color: var(--link);
}

.icon-facebook
{
    --color: #254887;
    --hover: #254887;
    --link: #254887;
}

.icon-twitter
{
    --color: #1da1f2;
    --hover: #1da1f2;
    --link: #1da1f2;
}

.icon-line
{
    --color: #00b900;
    --hover: #00b900;
    --link: #00b900;
}

.icon-facebook
{
    transition: .5s;
}
.icon-facebook:hover,
.icon-facebook:focus
{
    color: #fff;
    border-radius: 6px;
}

.icon-twitter
{
    transition: .5s;
}
.icon-twitter:hover,
.icon-twitter:focus
{
    color: #fff;
    border-radius: 6px;
}

.icon-line
{
    transition: .5s;
}
.icon-line:hover,
.icon-line:focus
{
    color: #fff;
    border-radius: 6px;
}

/*responsive-config*/
img
{
    display: block; 

    max-width: 100%;
    height: auto;
}

header,
article,
section,
ul,
div,
dl,
li,
select,
option,
table,
td,
th,
figure,
figcaption
{
    box-sizing: border-box;
}

/*pc_sp_changer*/
.pc
{
    display: block;
}
@media screen and (max-width: 768px)
{
    .pc
    {
        display: none;
    }
}

.sp
{
    display: none;
}
@media screen and (max-width: 768px)
{
    .sp
    {
        display: block;
    }
}

/*animation-config*/
header,
article,
section,
ul,
div,
dl,
li,
table,
td,
th,
figure,
figcaption
{
    transition: .8s;
}

/* hover-setting */
img.s_hov
{
    -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out; 
    -webkit-transform: scale(1);
            transform: scale(1);
}

img.s_hov:hover
{
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
}

.dline_hov
{
    position: relative;

    padding: .5rem 1rem;

    cursor: pointer; 

    color: #027c36;
    border: 3px solid #027c36;
    background-color: transparent;
}

.dline_hov::before
{
    position: absolute;
    z-index: 2;
    top: -.6rem;
    left: -.7rem;

    width: 100%;
    height: 100%;

    content: '';
    transition: all 200ms ease-out; 

    border: 3px solid #027c36;
}

.dline_hov:hover
{
    transition: all 200ms ease-out; 

    color: #fff;
    background-color: #027c36;
}

.dline_hov:hover::before
{
    top: .3rem;
    left: .3rem;
}

.dline_hov:active
{
    transform: translateY(5px);
}

/* body ----------*/
body
{
    font-family: 'Noto Sans JP', thin, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
    font-size: 13px;
    line-height: 1.6em;

    position: relative; 

    text-justify: inter-word;

    color: #706c6d;

    -webkit-text-size-adjust: 100%;
}

input,
button,
select,
li,
p,
a
{
    font-family: 'Noto Sans JP', thin, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;

    text-justify: inter-word;
}

/* 共通リンク設定 */
a:link,
a:visited
{
    text-decoration: none;
}

a:hover,
a:active
{
    color: #ef4e74;
}

/*input 装飾キャンセル*/
input,
button,
textarea,
select
{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
input[type='checkbox'],
button[type='checkbox'],
textarea[type='checkbox'],
select[type='checkbox']
{
    -webkit-appearance: checkbox;
       -moz-appearance: checkbox;
            appearance: checkbox;
}

select
{
    font-size: inherit;

    margin: 0;
    padding: 0;

    vertical-align: middle;

    color: inherit; 
    border: 0;
    border-radius: 0;
    background: none transparent;

       -moz-appearance: none;
    -webkit-appearance: none;
            appearance: none;
}

select::-ms-expand
{
    display: none;
}

#colorbox
{
    transition: 0s;
}

#cboxContent
{
    transition: 0s;
}

#cboxLoadedContent
{
    transition: 0s;
}

#cboxWrapper
{
    transition: 0s;
}

#dHallSpecial
{
    float: none;

    width: 500px !important;
    margin: 0 auto; 
    padding: 85px 0;
}
@media screen and (max-width: 768px)
{
    #dHallSpecial
    {
        width: 96%; 
        padding: 45px 0;
    }
}
#dHallSpecial h2
{
    font-size: 25px;
    font-weight: normal;
    line-height: 1.5em;

    display: block;

    width: 55%;
    margin: 0 auto 35px auto;
    padding: 0;
    padding-left: 40px;

    text-align: center;

    color: #b4234c;
    background: url(../images/index/icon/icon_dHoll.png) no-repeat top left;
}
@media screen and (max-width: 768px)
{
    #dHallSpecial h2
    {
        font-size: 26px;

        width: 72%;
        margin: 0 auto 20px auto;
    }
}
#dHallSpecial .hollExpla
{
    font-size: 123.1%;
    line-height: 1.8em;

    margin-bottom: 30px; 
    padding: 0 0 0 125px;

    color: #b4234c;
    background: url(../images/index/icon/icon_hollLogin.png) no-repeat top left;
}
@media screen and (max-width: 768px)
{
    #dHallSpecial .hollExpla
    {
        font-size: 13px;

        margin-bottom: 15px; 
        padding: 0 0 0 0;

        background: none;
    }
}
#dHallSpecial ul.hollLogin
{
    width: 80%;
    margin: 0 auto; 

    text-align: center;
}
#dHallSpecial .inputHollID
{
    width: 250px;
    margin-bottom: 35px; 
    padding: 1%;

    text-align: center;
}
@media screen and (max-width: 768px)
{
    #dHallSpecial .inputHollID
    {
        margin-bottom: 15px;
    }
}
#dHallSpecial .btnBlue
{
    font-size: 138.5%;

    padding: 1% 12%;

    cursor: pointer; 
    text-align: center;

    color: #fff;
    border-top: none;
    border-right: none;
    border-bottom: 5px solid #1e396a;
    border-left: none;
}
#dHallSpecial .btnBlue:hover
{
    border-top: 5px solid #1e396a;
    border-bottom: none;
}
#dHallSpecial .btnRed
{
    font-size: 20px;

    clear: both;

    width: 250px;
    padding: 1% 0;
    padding-right: 7%;
    padding-left: 14%;

    cursor: pointer;
    text-align: center;

    color: #fff;
    border-color: #831937; 
    border-top: none;
    border-right: none;
    border-bottom: 5px solid;
    border-left: none;
    background-image: url('http://daiichi777.jp/css/../images/product/syousaiIcon.png');
    background-repeat: no-repeat;
    background-position: 10% 51%;
    background-size: 5%;
}
#dHallSpecial .btnRed:hover
{
    border-top: 5px solid  #831937;
    border-bottom: none;
}

/* contents ----------*/
/* コンテンツ共通処理 */
#content
{
    display: none;
}
#content .inner
{
    width: 50%;
    padding: 5%;

    color: #fff; 
    background: #000;
}

.inner
{
    max-width: 1120px;
    margin: 0 auto;
}

/* ページトップボタン */
#page-top
{
    font-size: 14px;

    position: fixed;
    z-index: 9999; 
    right: 5%;
    bottom: 50px;

    display: block;
}
@media screen and (max-width: 768px)
{
    #page-top
    {
        right: 10px;
        bottom: 10px;
    }
}

#page-top a
{
    display: block;

    width: 60px; 

    text-align: center;
    text-decoration: none;
}
@media screen and (max-width: 768px)
{
    #page-top a
    {
        width: 44px;
    }
    #page-top a img
    {
        width: 44px;
    }
}

section.popular .bx-wrapper
{
    max-width: 1140px !important; 

    background-color: none;
}

section#kanren .bx-wrapper
{
    max-width: 1140px !important; 

    background-color: none;
}

#bottom
{
    display: block;

    height: 10%;
    padding-top: 20px;
    padding-bottom: 20px;

    background-color: #e8e8e9;
}
@media screen and (max-width: 768px)
{
    #bottom img
    {
        width: 100%;
    }
}

.bx-wrapper .bxslider
{
    display: inline-block;
}

.bx-wrapper .bxslider .bx-viewport li
{
    width: 150px;
}

.bx-wrapper .bxslider .bx-viewport li img
{
    height: 120px;
}

/* 新着情報共通リスト */
.hide
{
    display: none;
}

#news .green
{
    margin-bottom: 50px; 
    padding-top: 40px;

    background-color: #3fa79e;
}
@media screen and (max-width: 768px)
{
    #news .green
    {
        margin: 0 0 4% 0;
        padding: 5% 0 2% 0;

        border-bottom: 2px solid #3fa79e; 
        background-color: #fff;
    }
}
#news .green h2
{
    font-size: 28px;
    font-weight: normal;

    margin-bottom: 25px; 

    text-align: center;

    color: #fff;
}
@media screen and (max-width: 768px)
{
    #news .green h2
    {
        font-size: 153.9%;

        box-sizing: border-box;
        width: 100%;
        margin-bottom: 15px; 

        color: #3fa79e;
    }
}
#news .green h2.titleFanContents
{
    margin-bottom: 15px; 

    text-align: center;
}
@media screen and (max-width: 768px)
{
    #news .green h2.titleFanContents
    {
        padding-top: 4%; 

        border-top: 2px solid #3fa79e;
    }
}
#news .green h2.titleFanContents span
{
    line-height: 1.8; 

    display: inline-block;

    padding-left: 60px;

    background-image: url(../images/fan/wingIcon.png);
    background-repeat: no-repeat;
    background-position: left center;
}
@media screen and (max-width: 768px)
{
    #news .green h2.titleFanContents span
    {
        background-image: url(../images/fan/icon_news.png);
    }
}
#news .green h2.titleFanContentsTV
{
    margin-bottom: 15px; 

    text-align: center;
}
@media screen and (max-width: 768px)
{
    #news .green h2.titleFanContentsTV
    {
        padding-top: 4%; 

        border-top: 2px solid #3fa79e;
    }
}
#news .green h2.titleFanContentsTV span
{
    line-height: 1.8; 

    display: inline-block;

    padding-left: 55px;

    background-image: url(../images/fan/TVIcon2.png);
    background-repeat: no-repeat;
    background-position: left center;
}
@media screen and (max-width: 768px)
{
    #news .green h2.titleFanContentsTV span
    {
        background-image: url(../images/fan/TVIcon2green.png);
    }
}
#news .green h2.news
{
    font-size: 20px;
}
#news .green ul.tab
{
    text-align: center;
}
@media screen and (max-width: 768px)
{
    #news .green ul.tab
    {
        font-size: 0; 

        width: 100%;
    }
}
#news .green ul.tab li
{
    font-size: 19px;

    display: inline-block;

    margin-bottom: 1%;
    margin-left: 1%;

    cursor: pointer; 

    color: #3fa79e;
    background-color: #fff;
}
#news .green ul.tab li:hover
{
    background: #f1f1f1;
}
@media screen and (max-width: 768px)
{
    #news .green ul.tab li
    {
        font-size: 15px;

        width: 47%;
        margin-bottom: 2%;
        margin-left: 0;
        padding: 2% 1%;

        border-top: 1px solid #3fa79e;
        border-right: 1px solid #3fa79e; 
        border-bottom: 3px solid #3fa79e;
        border-left: 1px solid #3fa79e;
    }
    #news .green ul.tab li.even
    {
        margin-right: 2%;
    }
    #news .green ul.tab li.illusttab
    {
        width: 31%; 
        margin: 1%;
    }
}
#news .green ul.tab li a
{
    display: block;

    padding: 15px; 

    color: #3fa79e;
}
@media screen and (max-width: 768px)
{
    #news .green ul.tab li a
    {
        padding: 0;
    }
}
#news .green ul.tab li a:link
{
    color: #3fa79e;
}
#news .green ul.tab li a:visited
{
    color: #3fa79e;
}
#news .green ul.tab li a:hover
{
    background: #f1f1f1;
}
#news .green ul.tab li.select
{
    font-weight: bold;

    margin-top: 1%; 
    margin-bottom: 0;
}
@media screen and (max-width: 768px)
{
    #news .green ul.tab li.select
    {
        margin-top: 0;
        padding: 2% 1%; 

        color: #fff;
        border-top: 3px solid #397670;
        border-bottom: 1px solid #3fa79e;
        background: #3fa79e;
    }
    #news .green ul.tab li.select a
    {
        color: #fff;
    }
    #news .green ul.tab li.select a:link
    {
        color: #fff;
    }
    #news .green ul.tab li.select a:visited
    {
        color: #fff;
    }
}
#news ul.content
{
    padding: 0 0 40px 0;
}
@media screen and (max-width: 768px)
{
    #news ul.content
    {
        padding: 0;
    }
}
#news .btnBlue
{
    width: 300px;
    margin: 0 auto; 

    text-align: center;
}
@media screen and (max-width: 768px)
{
    #news .btnBlue
    {
        width: 70%;
        margin: 0 auto 6% auto;
    }
}
#news .btnBlue a
{
    font-size: 20px; 

    padding: 5% 10%;
}
@media screen and (max-width: 768px)
{
    #news .btnBlue a
    {
        font-size: 17px; 

        padding: 5% 10%;
    }
}
#news a.btnBlue
{
    font-size: 123.1%;
    font-weight: normal; 

    width: 30%;
    margin-top: 3%;
    padding: 1% 5%;

    color: #fff;
}
@media screen and (max-width: 768px)
{
    #news a.btnBlue
    {
        font-size: 153.9%;

        display: block;

        box-sizing: border-box;
        width: 80%;
        margin: 0 auto 5% auto;
        margin-bottom: 3%; 
        padding: 4% 0;

        vertical-align: middle;
    }
}

dl.newsList
{
    font-size: 116%;

    display: block; 

    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    margin-bottom: 40px;
}
@media screen and (max-width: 768px)
{
    dl.newsList
    {
        width: 94%;
        margin: 0 auto 5% auto;
    }
}
dl.newsList dt
{
    font-weight: normal;

    float: left;
    clear: both;

    width: 19%;
    margin: 0 2% 0 0;
    padding: 1% 0;

    text-align: center; 

    color: #fff;
    background-color: #3fa79e;
}
@media screen and (max-width: 768px)
{
    dl.newsList dt
    {
        font-size: 12px;

        width: 36%;
        margin-bottom: 2%;
    }
}
dl.newsList dt.cat1,
dl.newsList dt.cat2,
dl.newsList dt.cat3,
dl.newsList dt.cat7
{
    color: #3fa79e; 
    border: 1px solid #3fa79e;
    background: #fff;
}
dl.newsList dt.cat4
{
    background: #357ac7;
}
dl.newsList dt.cat5
{
    background: #f03e68;
}
dl.newsList dd
{
    margin: 0 0 2% 0;
    margin-left: 0;
    padding: 0 0 2% 0;
    padding-left: 0;

    text-align: left;

    color: #696969;
    border-bottom: dotted 1px #000;
}
dl.newsList dd .iconNew
{
    font-weight: normal; 

    margin-right: 0;
    padding: 1px 8px;

    color: #fff;
    border-radius: 5px;
    background: #ef4e74;
}
dl.newsList dd .date
{
    font-size: 16px;
    font-weight: normal; 

    margin-right: 15px;

    color: #696969;
}
@media screen and (max-width: 768px)
{
    dl.newsList dd .date
    {
        font-size: 12px; 

        margin-right: 10px;
    }
}
dl.newsList dd .newsTitle
{
    float: right; 

    width: 100%;
    max-width: 460px;
}
@media screen and (max-width: 768px)
{
    dl.newsList dd .newsTitle
    {
        font-size: 14px; 

        width: 100%;
    }
}
dl.newsList dd a
{
    display: block; 

    padding: 1%;

    color: #696969;
}
dl.newsList dd a:hover
{
    background: #f1f1f1;
}

section.howToGetDtip
{
    position: relative;

    margin-bottom: 6%;
}
@media screen and (max-width: 768px)
{
    section.howToGetDtip .info
    {
        position: relative;

        padding: 0 2%; 

        background: url(../images/fan/howToGetDtip/sp/bgArrows.png) no-repeat center top;
        background-size: 65%;
    }
    section.howToGetDtip .info .info1
    {
        float: left;

        width: 46%;
        margin-top: 21%;
    }
    section.howToGetDtip .info .info2
    {
        float: right;

        width: 46%;
        margin-top: 39%;
    }
    section.howToGetDtip .info .info3
    {
        display: block;
        clear: both; 

        width: 54%;
        margin: 0 auto;
    }
}
section.howToGetDtip .btnGreen
{
    font-size: 16px;

    position: absolute;
    bottom: 30%;
    left: 29.5%;

    padding: 7px 20px;

    color: #fff;
    border-bottom: #1e534e 3px solid; 
    background: #3fa79e;
}
@media screen and (max-width: 768px)
{
    section.howToGetDtip .btnGreen
    {
        font-size: 13px;

        position: absolute;
        bottom: 31%;
        left: 2%;

        width: 38%;
        padding: 5px 5px;

        text-align: center;

        color: #fff;
        background: #3fa79e;
    }
}
section.howToGetDtip .btnGreen:hover
{
    border-top: #1e534e 3px solid; 
    border-bottom: none;
}
section.howToGetDtip .btnBlue
{
    font-size: 16px;

    position: absolute;
    bottom: 30%;
    left: 56%;

    padding: 7px 20px;

    color: #fff;
    border-bottom: 3px solid #1e396a;
}
@media screen and (max-width: 768px)
{
    section.howToGetDtip .btnBlue
    {
        font-size: 13px; 

        position: absolute;
        bottom: 24%;

        padding: 5px 5px;
    }
}
section.howToGetDtip .btnBlue:hover
{
    border-top: 3px solid #1e396a; 
    border-bottom: none;
}

.popular .bx-wrapper
{
    margin: 0 auto;
}

#kanren .bx-wrapper
{
    margin: 0 auto;
}

.bx-pager-item
{
    display: none;
}

#number
{
    clear: both;

    margin-right: auto;
    margin-bottom: 45px;
    margin-left: auto;

    text-align: center;
}
#number ul li
{
    font-size: 153.9%;
    font-weight: bold;
    line-height: 153.9%;

    display: inline-block;

    width: 40px;
    height: 153.9%;

    text-align: center;
    vertical-align: middle;

    color: #3fa79e;
}
#number ul li a
{
    margin: 0; 
    padding-top: 5px;

    text-decoration: none;

    color: #3fa79e;
}
#number ul li.int
{
    font-size: 153.9%;
    font-weight: bold;
    line-height: 153.9%;

    width: 40px;
    height: 153.9%;
    margin: 0 6px; 

    text-align: center;
    vertical-align: middle;

    color: #3fa79e;
}
#number ul li.int a
{
    box-sizing: border-box;
    padding: 6% 17%;

    border: solid 1px #3fa79e;
}
#number ul li.int a:hover
{
    color: #fff;
    background-color: #3fa79e;
}
#number ul li.last.even.odd
{
    margin-left: 15px;
}
@media screen and (max-width: 768px)
{
    #number ul li.last.even.odd
    {
        margin-left: 0;
    }
}
@media screen and (max-width: 768px)
{
    #number ul li
    {
        font-size: 123.1%;
        line-height: 123.1%; 

        width: 20px;
        height: 123.1%;
    }
    #number ul li a
    {
        margin: 0; 
        padding-top: 5px;

        color: #3fa79e;
    }
    #number ul li.int
    {
        font-size: 123.1%;
        line-height: 123.1%;

        width: 35px; 
        height: 123.1%;
        margin: 0;
    }
    #number ul li.int a
    {
        display: block; 

        box-sizing: border-box;
        padding: 6% 1%;
    }
    #number ul li.int a:hover
    {
        color: #fff;
        background-color: #3fa79e;
    }
}

@media screen and (max-width: 768px)
{
    #head
    {
        padding-top: 72px;
    }
}
#clear #top_back a img
{
    margin: 0 auto;
}

.popular
{
    width: 100%;
    margin: 0 auto;
    padding-bottom: 3%;

    text-align: center;

    background-color: #f1f1ea;
}
@media screen and (max-width: 768px)
{
    .popular
    {
        overflow: hidden;

        width: 100%;
        margin-bottom: 12%; 
        padding-bottom: 3%;
    }
}
.popular h2.popularcontents
{
    font-size: 28px;
    font-weight: normal;

    display: block;

    width: 350px;
    margin: 0 auto;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 1%;

    text-align: center;

    color: #3fa79e;
    background-image: url(../images/fan/happy50.png);
    background-repeat: no-repeat;
    background-position: 8% 50%;
}
@media screen and (max-width: 768px)
{
    .popular h2.popularcontents
    {
        font-size: 20px;

        box-sizing: border-box;
        width: 100%;
        padding-top: 8%;
        padding-bottom: 9%;
        padding-left: 14%;

        background-position: 24% 47%; 
        background-size: 10%;
    }
}
.popular .kanrenTitle
{
    display: inline-block;
}
.popular .kanrenTitle img
{
    float: left;

    margin-right: 10px; 
    padding-top: 63px;

    text-align: center;
}
.popular .kanrenTitle h2
{
    font-size: 28px;
    font-weight: normal;
    line-height: 70px;

    display: block;

    padding: 3% 0; 

    text-align: center;

    color: #3fa79e;
    background: url(../images/product/starIcon.png) no-repeat left center;
}
.popular .kanrenTitle h2 span
{
    padding: 0 0 0 50px;
}
@media screen and (max-width: 768px)
{
    .popular .kanrenTitle h2
    {
        font-size: 131%; 
        line-height: 1;

        width: 100%;
        padding: 7% 0;

        white-space: pre-line;

        background-position: 5% 50%;
        background-size: 8%;
    }
}
.popular ul
{
    font-size: 0;

    width: 100%;
    margin: 0 auto;
    margin-top: 3px;
}
@media screen and (max-width: 768px)
{
    .popular ul
    {
        margin-top: 0;
    }
}
.popular ul li
{
    font-size: 13px;

    display: inline-block;

    max-width: 224px;
    height: 285px; 
    margin-top: -5px;
    padding: 0 10px 0 10px;
}
@media screen and (max-width: 768px)
{
    .popular ul li
    {
        display: inline-block;

        max-width: 150px;
        height: 253px;
        margin: 0; 
        padding: 0;
    }
}
.popular ul li a
{
    display: inline-block;

    width: 100%;
    margin: .7%;

    text-align: left;
    vertical-align: top; 

    color: #606060;
    background-color: #fff;
}
@media screen and (max-width: 768px)
{
    .popular ul li a
    {
        height: 253px;
    }
}
.popular ul li a #imageFrame
{
    display: block;

    padding: auto;

    vertical-align: middle;

    box-shadow: 0 0 4px 4px rgba(0, 0, 0, .2) inset;
}
.popular ul li a p.text
{
    font-size: 13px;

    min-height: 40px;
    padding: 10px;

    text-align: left;

    color: #606060;
    border-right: 1px solid #fff; 
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    background: #fff;
}
.popular ul li a p.tag
{
    font-size: 14px;

    text-align: center; 

    color: #fff;
}
.popular ul li a:hover .text
{
    border-right: 1px solid #29a297;
    border-bottom: 1px solid #29a297;
    border-left: 1px solid #29a297;
    background: #f1f1f1;
}
.popular ul li li img
{
    margin: auto;

    vertical-align: middle;
}

#kanren
{
    width: 100%;
    margin: 0 auto;
    padding-bottom: 3%;

    text-align: center;

    background-color: #f1f1ea;
}
@media screen and (max-width: 768px)
{
    #kanren
    {
        overflow: hidden; 

        width: 100%;
    }
}
#kanren ul
{
    font-size: 0;

    width: 100%;
    margin: 0 auto;
}
@media screen and (max-width: 768px)
{
    #kanren ul
    {
        width: 100%;
    }
}
#kanren ul li
{
    font-size: 13px;

    display: inline-block;

    width: 20% !important;
    max-width: 224px;
    height: 285px; 
    padding: 0 10px 0 10px;
}
@media screen and (max-width: 768px)
{
    #kanren ul li
    {
        display: inline-block;

        width: 6% !important;
        height: 253px;
        margin: 0;
        margin-left: -.2%; 
        padding: 0;
    }
}
#kanren ul li a
{
    display: inline-block;

    margin: .7%;

    text-align: left;
    vertical-align: top; 

    color: #606060;
    background-color: #fff;
}
@media screen and (max-width: 768px)
{
    #kanren ul li a
    {
        height: 253px;
    }
}
#kanren ul li a #imageFrame
{
    display: block;

    padding: auto;

    vertical-align: middle;

    box-shadow: 0 0 4px 4px rgba(0, 0, 0, .2) inset;
}
#kanren ul li a p.text
{
    font-size: 13px;

    min-height: 40px;
    padding: 10px;

    text-align: left;

    color: #606060;
    border-right: 1px solid #fff; 
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    background: #fff;
}
#kanren ul li a p.tag
{
    font-size: 14px;

    text-align: center; 

    color: #fff;
}
#kanren ul li a:hover .text
{
    border-right: 1px solid #29a297;
    border-bottom: 1px solid #29a297;
    border-left: 1px solid #29a297;
    background: #f1f1f1;
}
#kanren ul li li img
{
    margin: auto;

    vertical-align: middle;
}

#sb-overlay
{
    position: relative;

    width: 100%;
    height: 100% !important;
}

.placeholder
{
    color: #777;
}

.pointer
{
    cursor: pointer;
}

/* PIE IE6～8のCSS3プロパティを表示可能にする ----------*/
/* url(“/_js/PIE.htc”); CSSのプロパティを使ったスタイルシートの末尾に、behaviorプロパティを記述する。設置場所によりパスを変える ------------------- */
/* display:inline-block; *display:inline; *zoom:1; */
/* -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; */