@charset "Shift_JIS";

/* ----------------------------------------------------------------------

	WIN5の買い方は3通り

---------------------------------------------------------------------- */

/* - レイアウト
---------------------------------------------------------------------- */
/*
div.win5_header {
    border-radius: 4px 4px 0 0;
}
*/

.head_area {
    /*margin-bottom: 30px;*/
}


/* - WIN5の買い方メニュー
---------------------------------------------------------------------- */
#win5_buy_menu > .button-list > div > a > i.fa.fa-chevron-down {
    display: none;
}

#win5_buy_menu > .button-list > div.current > a > i.fa.fa-chevron-down {
    display: inline;
}

#win5_buy_menu > .button-list > div.current > a > i.fa.fa-chevron-right {
    display: none;
}

#win5_buy_menu > .button-list > div.current > a.btn-def-simple {
    background-color: #444;
    color: #fff;
}

#win5_buy_menu > .button-list > div.current > a.btn-def-simple i {
    color: #fff;
}



/* - WIN5の買い方トップ
---------------------------------------------------------------------- */
#win5_buy1 {
    margin-top: 30px;
}

#buy_menu_panel h3.sub_header {
    font-size: 1.6rem;
}

.buy_menu_block {
    border: 1px solid #ddd;
    padding: 4px 0;
    box-sizing: border-box;
    
    border-top: none;
}


.buy_menu_block > .inner {
    display: table;
    width: 100%;
}

.buy_menu_block > .inner > .cell {
    display: table-cell;
    vertical-align: top;
    width: 50%;
    padding: 14px;
    
    padding: 14px 8px 14px 20px;
    text-align: center;
}


.buy_menu_block > .inner > .cell.right {
    padding: 14px 20px 14px 8px;
}

.buy_menu_block > .inner > .cell a {
    display: block;
}

.buy_menu_block > .inner > .cell img {
    vertical-align: top;
}

#buy_random { margin-top: 20px; }



/* - WIN5の買い方 各ページ
---------------------------------------------------------------------- */

/* --- リードブロック --- */
.panel.intro { margin-top: 15px; }

.panel.intro > h3.sub_header {
    font-size: 2.4rem;
    font-weight: bold;
}

.panel.intro > h3.sub_header > span {
    font-size: 1.5rem;
    margin-left: 1em;
}

.panel.intro > .content { padding: 15px; }

.panel.intro > .content > h4 {
    font-size: 2.2rem;
    line-height: 1.2;
}

.panel.intro > .content > h4 > strong > span { font-size: 3.2rem; }
.panel.intro > .content > p { font-size: 1.4rem; }


.unit > p.intro { font-size: 1.6rem; }


/* --- STEPユニット --- */
.step_unit { margin-top: 30px; }

.step_unit > .step_header {
    border-radius: 3px;
    border: 2px solid #ddd;
}

.step_unit > .step_header > h4 {
    font-weight: bold;
    color: #444;
}

.step_unit > .step_header > h4 > .inner { display: table; }

.step_unit > .step_header > h4 > .inner > span {
    display: table-cell;
    vertical-align: middle;
}

.step_unit > .step_header > h4 > .inner > span.cap {
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
}

.step_unit > .step_header > h4 > .inner > span.txt { padding: 6px 10px; }

.step_unit > .grid {
    margin-top: 20px;
    display: table;
    width: 100%;
}

.step_unit > .grid > .cell {
    display: table-cell;
    vertical-align: top;
}

.step_unit > .grid > .cell.img {
    width: 470px;
    padding-left: 30px;
    box-sizing: border-box;
}

.step_unit > .grid.photo > .cell.img:first-child { padding-left: 0; }



/* - 完全セレクト
---------------------------------------------------------------------- */
.panel.intro.all > h3.sub_header { background-color: #b30433; }

.panel.intro.all > .content {
    border-color: #b30433;
    border-width: 3px;
}

.panel.intro.all > .content > h4 > strong { color: #b30433; }

#win5_buy_all1 { margin-top: 30px; }
#win5_buy_all1 > p.intro { color: #b30433; }

#win5_buy_all1 .step_unit > .step_header { border-color: #b30433; }
#win5_buy_all1 .step_unit > .step_header > h4 > .inner > span.cap { background-color: #b30433; }


/* - 一部セレクト
---------------------------------------------------------------------- */
.panel.intro.part > h3.sub_header { background-color: #1976d2; }

.panel.intro.part > .content {
    border-color: #1976d2;
    border-width: 3px;
}

.panel.intro.part > .content > h4 > strong { color: #1976d2; }

#win5_buy_part1 { margin-top: 30px; }
#win5_buy_part1 > p.intro { color: #1976d2; }

#win5_buy_part1 .step_unit > .step_header { border-color: #1976d2; }
#win5_buy_part1 .step_unit > .step_header > h4 > .inner > span.cap { background-color: #1976d2; }


/* - ランダム
---------------------------------------------------------------------- */
.panel.intro.random > h3.sub_header { background-color: #138749; }

.panel.intro.random > .content {
    border-color: #138749;
    border-width: 3px;
}

.panel.intro.random > .content > h4 > strong { color: #138749; }

#win5_buy_random1 { margin-top: 30px; }
#win5_buy_random1 > p.intro { color: #138749; }

#win5_buy_random1 .step_unit > .step_header { border-color: #138749; }
#win5_buy_random1 .step_unit > .step_header > h4 > .inner > span.cap { background-color: #138749; }





/* ------------------------------------------------------------

	959px以下

------------------------------------------------------------ */
@media screen and ( max-width : 959px ) {
    
    
    .step_unit > .grid > .cell {
        width: 50%;
    }
    
    .step_unit > .grid > .cell.img {
        width: 50%;
    }
    
    .step_unit > .grid > .cell:nth-child(odd) {
        padding-right: 15px;
    }
    
    .step_unit > .grid > .cell:nth-child(even) {
        padding-left: 15px;
    }
    
    /*
    .step_unit > .grid.photo > .cell.img:nth-child(odd) {
        padding-right: 15px;
    }
    
    .step_unit > .grid.photo > .cell.img:nth-child(even) {
        padding-left: 15px;
    }
    */
    
    
    
    
    
}

/* ------------------------------------------------------------

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
    
    /* - WIN5の買い方メニュー
    ---------------------------------------------------------------------- */
    #win5_buy_menu > ul.nav.pills {
        display: block;
        font-size: 0;
    }
    
    #win5_buy_menu > ul.nav.pills > li {
        display: inline-block;
        font-size: 1.3rem;
        width: 50%;
    }
    
    
    .buy_menu_block { padding: 20px; }
    
    .buy_menu_block > .inner { display: block; }
    
    .buy_menu_block > .inner > .cell {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
    }
    
    .buy_menu_block > .inner > .cell.right {
        padding: 0;
        margin-top: 20px;
    }
}


/* ------------------------------------------------------------

	639px以下

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
    
    .panel.intro > .content > h4 {
        font-size: 1.8rem;
    }
    
    .panel.intro > .content > h4 > strong > span {
        font-size: 2.8rem;
    }
    
    .panel.intro > .content > p {
        font-size: 1.3rem;
    }
    
    .unit > p.intro {
        font-size: 1.5rem;
    }
    
    
    .step_unit > .grid {
        display: block;
    }
    
    .step_unit > .grid > .cell {
        display: block;
        width: auto;
    }
    
    .step_unit > .grid > .cell.img {
        text-align: center;
        width: 100%;
    }
    
    .step_unit > .grid > .cell + .cell {
        margin-top: 20px;
    }
    
    .step_unit > .grid > .cell:nth-child(odd) {
        padding-right: 0;
    }
    
    .step_unit > .grid > .cell:nth-child(even) {
        padding-left: 0;
    }
    
    
    .panel.intro > h3.sub_header > span {
        display: block;
        margin-left: 0;
    }
    
}


/* ------------------------------------------------------------

	479px以下

------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {
    
    .buy_menu_block { padding: 10px; }
    
    .buy_menu_block > .inner > .cell.right {
        margin-top: 10px;
    }
    
    #buy_random { margin-top: 10px; }
    
    
    .panel.intro > h3.sub_header {
        font-size: 2rem;
    }
    
    .panel.intro > h3.sub_header > span {
        font-size: 1.2rem;
    }
    
    .panel.intro > .content > h4 {
        font-size: 1.6rem;
        line-height: 1.4;
    }
    
    .panel.intro > .content > h4 > strong > span {
        font-size: 2.4rem;
    }
    
    
}



/* ------------------------------------------------------------

	359px以下

------------------------------------------------------------ */
@media screen and ( max-width : 359px ) {
    
    #win5_buy_menu > ul.nav.pills > li > a {
        font-size: 1.3rem;
    }
    
    
    
    
}