@charset "UTF-8";

/* ---------------------------
	Modules
    - Layout
    - Structure
    - Utilities
    - Icon
    - Button
    - Headings
    - Text
    - List
    - Link
    - Tables
    - Form
    - Divider
    - Section
    - Module
--------------------------- */


/* ---------------------------
    Layout
--------------------------- */

.wrapper {
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}


/* Container
-----------------------------*/
.container {
    padding-left: 5%;
    padding-right: 5%;
}
.container-wide {
    padding-left: 2.5%;
    padding-right: 2.5%;
}


/* Grid
-----------------------------*/
.grid-row:after {
    content: "";
    display: block;
    clear: both;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
    margin-left: 2.083333333%;
    float: left;
}
.grid-row > [class*="grid-"]:first-child {
    margin-left: 0;
}
.grid-1 { width: 6.423611111%; }
.grid-2 { width: 14.930555555%; }
.grid-3 { width: 23.4375%; }
.grid-4 { width: 31.944444444%; }
.grid-5 { width: 40.451388888%; }
.grid-6 { width: 48.958333333%; }
.grid-7 { width: 57.465277777%; }
.grid-8 { width: 65.972222222%; }
.grid-9 { width: 74.479166666%; }
.grid-10 { width: 82.986111111%; }
.grid-11 { width: 91.493055555%; }
.grid-12 { width: 100%; }


/* Colomn
-----------------------------*/
.col-row:after {
    content: "";
    display: block;
    clear: both;
}
.col-2 {
    width: 50%;
    float: left;
    box-sizing: border-box;
}
.col-3 {
    width: 33.3333%;
    float: left;
    box-sizing: border-box;
}



/* ---------------------------
    Structure
--------------------------- */

/* Header
-----------------------------*/
.header {
    padding: 0 3%;
    line-height: 40px;
    height: 55px;
    background-color: #09f;
    border-bottom: 4px solid #66c2ff;
    color: #fff;
	position: relative;
}
.header-logo {
    display: inline-block;
    width: 99px;
    height: 20px;
    vertical-align: middle;
}
.header-logo a {
    display: block;
}
.header-text {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    height: 20px;
}
.header .btn-cube {
	position: absolute;
	right: 3%;
	top: 50%;
	transform: translateY(-50%);
}

.header-logo-ty2 {
    width: 66vw;
    max-width: 225px;
    height: 15px;
    vertical-align: middle;
    position: relative;
    top: 4px;
}
.header-logo-ty2 a {
    display: block;
}
.header-text-ty2 {
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    position: relative;
    height: 26px;
    top: -5px;
}

.header .logout {
    position: absolute;
    right: 0;
    top: 25%;
    padding-right: 18px;
    width: 71px;
    height: 26px;
}

/* Breadcrumb
-----------------------------*/
.breadcrumb {
    text-align: center;
    line-height: 31px;
    border-bottom: 1px solid #e0e0e0;
    color: #565656;
}
.breadcrumb dt {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
}
.breadcrumb dd {
    display: inline-block;
    vertical-align: top;
    margin-left: -3px;
}
.breadcrumb li {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    position: relative;
}
.breadcrumb li:before {
    content: "";
    display: block;
    width: 5px;
    height: 7px;
    background: url(../img/ico-arrow-step.png) no-repeat center;
    background-size: contain;
    position: absolute;
    left: -5px;
    top: 50%;
    margin-top: -4px;
}
.breadcrumb li:first-child:before {
    display: none;
}
.breadcrumb li:last-child {
    margin-left: 8px;
    width: auto;
}
.breadcrumb li:last-child:before {
    left: -12px;
}
.breadcrumb li.current {
    font-weight: bold;
    color: #00c300;
}
.breadcrumb li.current:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #00c300;
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
}

/* Local Navigation
-----------------------------*/
.local-nav {
    margin-bottom: 18px;
    border: 1px solid #09f;
    border-radius: 2px;
}
.local-nav li {
    border-left: 1px solid #09f;
}
.local-nav li:first-child {
    border-left: 0;
}
.local-nav a {
    display: block;
    padding: 8px 10px 8px 30px;
    background: url(../img/ico-arrow-down.png) no-repeat 9px center;
    background-size: 16px auto;
    color: #000;
}
.local-nav em {
    display: block;
}


/* Conversion
-----------------------------*/
.conversion {
    margin-bottom: 20px;
    padding-top: 16px;
}
.conversion dl {
    margin-top: 8px;
    padding: 2px 10px 12px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}
.conversion dt {
    margin-bottom: 7px;
}
.conversion dd p {
    margin-top: 5px;
}
.conversion dd .btn {
    margin: 0 14px;
}
.conversion dd em {
    display: block;
    font-weight: bold;
    color: #565656;
}
.conversion-tel {
    background-color: #e6f5ff;
}
.conversion-tel .btn-tel {
    margin-top: 8px;
}
.conversion-help {
    background-color: #f5f5f5;
}
.conversion-help a {
    display: block;
    line-height: 36px;
    text-align: center;
    font-weight: bold;
    color: #09f;
}
.conversion-help a:after {
    content: "";
    display: inline-block;
    margin-left: 2px;
    width: 10px;
    height: 10px;
    background: url(../img/ico-external-blue.png) no-repeat center;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

dl.conversion-tel-renew {
    background-color: #e6f5ff;
    margin-top: 8px;
    padding: 2px 10px 12px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

dl.conversion-tel-renew p
{
    margin-bottom: 10px;
}

.conversion-tel-renew .tel-renew-img01 {
    margin-bottom: 0;
}


/* Footer
-----------------------------*/
.footer {
    margin-top: 40px;
}

/* Footer Button */
.footer-btn {
    display: block;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    line-height: 35px;
    color: #09f;
}
.footer-btn span {
    display: inline-block;
}
.footer-btn span {
    display: inline-block;
    position: relative;
}
.footer-btn span:before,
.footer-btn span:after {
    content: "";
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}
.footer-btn span:before {
    background-image: url(../img/ico-arrow-up.png);
    width: 16px;
    height: 16px;
    top: 50%;
    right: 100%;
    margin-top: -9px;
    margin-right: 4px;
}
.footer-btn span:after {
    background-image: url(../img/ico-charactor-03.png);
    width: 63px;
    height: 49px;
    left: 90%;
    top: -20px;
}

/* Footer Navigation */
.footer-nav {
    background: #09f;
}
.footer-nav a {
    display: block;
}
.footer-nav-btn {
    padding: 16px 2.5%;
}
.footer-nav-btn a {
    padding: 10px 0 8px;
    background: #fff;
    border-radius: 2px;
    text-align: center;
    color: #09f;
}
.footer-nav-btn img {
    display: block;
    margin: 0 auto 8px;
    width: 99px;
    height: auto;
}
.footer-nav-btn span {
    display: block;
}
.footer-nav-btn span:after {
    content: "";
    display: inline-block;
    margin-left: 2px;
    width: 10px;
    height: 10px;
    background: url(../img/ico-external-blue.png) no-repeat top center;
    background-size: contain;
}
.footer-nav-item {
    border-top: 1px solid #fff;
}
.footer-nav-item a {
    padding: 0 5%;
    line-height: 38px;
    font-size: 14px;
    color: #fff;
    position: relative;
}
.footer-nav-item a:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: url(../img/ico-external-white.png) no-repeat top center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 5%;
    margin-top: -5px;
}

/* Footer Bottom */
.footer-bottom {
    display: table;
    padding: 12px 2.5%;
    width: 100%;
    box-sizing: border-box;
    background-color: #e0e0e0;
}
.footer-bottom p {
    display: table-cell;
    vertical-align: middle;
}
.footer-copy small {
    display: block;
    padding-left: 1em;
    line-height: 14px;
    font-size: 12px;
    position: relative;
}
.footer-copy small span {
    display: block;
    font-size: 10px;
    position: absolute;
    top: 0;
    left: 0;
}
.footer-privacy {
    width: 68px;
}
.footer-privacy a {
    display: block;
    width: 100%;
}



/* Modals
-----------------------------*/
.modal {
    position: relative;
    min-height: 100%;
    display: none;
}

/* Head */
.modal-head {
    padding-left: 2.5%;
    padding-right: 93px;
    line-height: 45px;
    background-color: #3a3a3a;
    position: relative;
}
.modal-head-text {
    font-size: 16px;
    color: #9e9e9e;
}
.modal-head-text span {
    margin-left: 6px;
    color: #fff;
}
.modal-close {
    width: 93px;
    box-sizing: border-box;
    border-left: 1px solid #000;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}
.modal-close a {
    display: block;
    color: #fff;
}
.modal-close a:after {
    content: "";
    display: inline-block;
    margin-left: 4px;
    width: 14px;
    height: 14px;
    background: url(../img/ico-close-white.png) no-repeat center;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Body */
.modal-body {
	min-height: 100%;
}



/* ---------------------------
    Utilities
--------------------------- */

/* Clear
-----------------------------*/
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}


/* Margin
-----------------------------*/
.mb4 { margin-bottom: 4px !important; }
.mb8 { margin-bottom: 8px !important; }
.mb12 { margin-bottom: 12px !important; }
.mb16 { margin-bottom: 16px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb24 { margin-bottom: 24px !important; }
.mb28 { margin-bottom: 28px !important; }
.mb32 { margin-bottom: 32px !important; }
.mb36 { margin-bottom: 36px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb44 { margin-bottom: 44px !important; }
.mb48 { margin-bottom: 48px !important; }
.mb52 { margin-bottom: 52px !important; }
.mb56 { margin-bottom: 56px !important; }
.mb60 { margin-bottom: 60px !important; }


/* Padding
-----------------------------*/
.pb4 { padding-bottom: 4px !important; }
.pb8 { padding-bottom: 8px !important; }
.pb12 { padding-bottom: 12px !important; }
.pb16 { padding-bottom: 16px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb24 { padding-bottom: 24px !important; }
.pb28 { padding-bottom: 28px !important; }
.pb32 { padding-bottom: 32px !important; }
.pb36 { padding-bottom: 36px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb44 { padding-bottom: 44px !important; }
.pb48 { padding-bottom: 48px !important; }
.pb52 { padding-bottom: 52px !important; }
.pb56 { padding-bottom: 56px !important; }
.pb60 { padding-bottom: 60px !important; }

/* Fixed
-----------------------------*/
.fixed {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

/* For Android Bug */
@media screen and (orientation: landscape) {
    .fixed {
        width: 100%;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
    }
    .fixed [class*="img-btn-ty"] {
        display: block;
    	margin-left: auto;
    	margin-right: auto;
    	max-width: 288px;
    	width: 100%;
    }
}

.fixed-top {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
}

/* ---------------------------
    Icon
--------------------------- */

/* Required / Free
-----------------------------*/
.ico-required,
.ico-free {
    display: inline-block;
    padding: 3px 4px 2px;
    border-radius: 2px;
    text-align: center;
    line-height: 1.25;
    font-weight: normal;
    font-size: 12px;
    color: #fff;
}
.ico-required {
    background-color: #e60000;
}
.ico-free {
    background-color: #565656;
}


/* Open / Close
-----------------------------*/
.ico-open,
.ico-close {
    display: inline-block;
    padding-right: 18px;
    color: #09f;
    position: relative;
}
.ico-open:before,
.ico-close:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -9px;
}
.ico-open:before {
    background-image: url(../img/ico-toggle-open.png);
}
.ico-close:before {
    background-image: url(../img/ico-toggle-close.png);
}



/* ---------------------------
    Button
--------------------------- */

/* Image Button Container
-----------------------------*/
.img-btn-container {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #3a3a3a;
}

.img-btn-container.tel {
	position: absolute;
	bottom: 0;
    left: 0;
    right: 0;
}

.img-btn-container + .img-btn-container {
    padding-top: 0;
}

/* Image Button Base
-----------------------------*/
[class*="img-btn-ty"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 288px;
    width: 100%;
}

/* Image Button Step
-----------------------------*/
.img-btn-ty03 li:first-child {
    position: relative;
}
.img-btn-ty03 .grid-3 a {
    display: block;
    position: relative;
}
.img-btn-ty03 .count {
    display: block;
    width: 30px;
    text-align: center;
    position: absolute;
    right: -12px;
    top: -3px;
}
.img-btn-ty03 .count span {
    display: inline-block;
    padding: 0 5px;
    max-width: 100%;
    min-width: 24px;
    box-sizing: border-box;
    background-color: #e60000;
    border-radius: 11px;
    line-height: 22px;
    vertical-align: top;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}
.img-btn-ty03 .countdes {
    display: block;
    width: 30px;
    text-align: center;
    position: absolute;
    right: -12px;
    top: -3px;
}
.img-btn-ty03 .countdes span {
    display: inline-block;
    padding: 0 5px;
    max-width: 100%;
    min-width: 24px;
    box-sizing: border-box;
    background-color: #6b6868;
    border-radius: 11px;
    line-height: 22px;
    vertical-align: top;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}
.img-btn-ty03 [src$="btn-cart-disabled.png"] + .count span {
    background-color: #565656;
    color: rgba(255, 255, 255, 0.5);
}
.img-btn-ty03 .grid-9 a {
    display: block;
    margin-left: 10px;
}

/* Image Button Survey
-----------------------------*/
.img-btn-survey {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 288px;
    width: 100%;
}
.img-btn-survey p {
    /* margin-bottom: 8px; */
}


/* Image Button Common
-----------------------------*/
.img-btn-common {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 288px;
    width: 48.958333333%;
}

/* Image Button Done
-----------------------------*/
.img-btn-ty06 li:first-child a {
    display: block;
    padding-top: 6px;
    height: 48px;
    background: url(../img/btn-bg-white.png) no-repeat top center;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty06 li:first-child a:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 108px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}
.img-btn-ty06 li:first-child.count-disabled a {
    background-image: url(../img/btn-bg-grey.png);
}
.img-btn-ty06 .count-disabled a:before {
    background-image: url(../img/img-count-disabled.png);
}
.img-btn-ty06 .count0 a:before {
    background-image: url(../img/img-count0.png);
}
.img-btn-ty06 .count1 a:before {
    background-image: url(../img/img-count1.png);
}
.img-btn-ty06 .count2 a:before {
    background-image: url(../img/img-count2.png);
}
.img-btn-ty06 .count3 a:before {
    background-image: url(../img/img-count3.png);
}
.img-btn-ty06 .count4 a:before {
    background-image: url(../img/img-count4.png);
}
.img-btn-ty06 .count5 a:before {
    background-image: url(../img/img-count5.png);
}

/* Image Button Done
-----------------------------*/
.img-btn-ty07 li:first-child.count0 a {
    display: block;
    padding-top: 6px;
    height: 48px;
    background: url(../img/btn-premium15-default.png) no-repeat top center;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count1 a {
    background: url(../img/btn-premium15-checked-1.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count2 a {
    background: url(../img/btn-premium15-checked-2.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count3 a {
    background: url(../img/btn-premium15-checked-3.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count4 a {
    background: url(../img/btn-premium15-checked-4.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count5 a {
    background: url(../img/btn-premium15-checked-5.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count6 a {
    background: url(../img/btn-premium15-checked-6.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count7 a {
    background: url(../img/btn-premium15-checked-7.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count8 a {
    background: url(../img/btn-premium15-checked-8.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count9 a {
    background: url(../img/btn-premium15-checked-9.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count10 a {
    background: url(../img/btn-premium15-checked-10.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count11 a {
    background: url(../img/btn-premium15-checked-11.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count12 a {
    background: url(../img/btn-premium15-checked-12.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count13 a {
    background: url(../img/btn-premium15-checked-13.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count14 a {
    background: url(../img/btn-premium15-checked-14.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count15 a {
    background: url(../img/btn-premium15-done.png) no-repeat top center;
    display: block;
    padding-top: 6px;
    height: 48px;
    background-size: contain;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    color: #565656;
    position: relative;
}
.img-btn-ty07 li:first-child.count-disabled a:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    background: #999;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    opacity: .8;
    border-radius: 3px;
}


/* Image Button Tel
-----------------------------*/
.img-btn-tel {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 288px;
    width: 100%;
}
.img-btn-tel li {
    margin-top: 8px;
}
.img-btn-tel li:first-child {
    margin-top: 0;
}

/* Image Button Address
-----------------------------*/
.img-btn-address {
    display: block;
    padding: 40px 0 0;
    margin: 0;
    max-width: 92px;
    width: 100%;
    height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: none;
    background-image: url(../img/btn-address-active.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.img-btn-address.disabled {
    background-image: url(../img/btn-address-default.png);
}

.img-btn-address.clear {
	background-image: url(../img/btn-address-clear.png);
}


/* Button
-----------------------------*/
.btn {
    margin-top: 8px;
    border: 1px solid #9e9e9e;
    border-radius: 2px;
    text-align: center;
}
.btn:first-child {
    margin-top: 0;
}

/* Button Tel
-----------------------------*/
.btn-tel {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 239px;
    width: 100%;
    text-align: center;
    border: 1px solid #9e9e9e;
    background-color: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    line-height: 38px;
    font-size: 14px;
    font-weight: bold;
    color: #09f;
}
.btn-tel.active {
    border-color: #09f;
    position: relative;
}
.btn-tel.active:before {
    content: "";
    display: block;
    border: 1px solid #09f;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Button Detail
-----------------------------*/
.btn-detail {
    width: 60px;
}
.btn-detail a {
    display: block;
    line-height: 36px;
    line-height: 28px;
    border: 1px solid #09f;
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    color: #09f;
}

/* Button All */
.btn-all {
    display: block;
    overflow: auto;
}
.btn-all p{
    width:100px;
    float:right;
}
.btn-all a {
    display: block;
    line-height: 28px;
    border: 1px solid #09f;
    border-radius: 5px;
    background-color: #09f;
    text-align: center;
    color: #fff;
}

/* Button Items
-----------------------------*/
.btn-items {
	margin-top: 16px;
	margin-bottom: 16px;
	overflow: hidden;
}
.btn-items-note:first-child {
	margin-bottom: 16px;
}
.btn-items-note:last-child {
	margin-top: 16px;
}
.btn-items ul {
	margin: -6px -3px 0;
}
.btn-items ul:after {
	content: "";
	display: block;
	clear: both;
}
.btn-items li {
	padding: 6px 3px 0;
	width: 25%;
	box-sizing: border-box;
	float: left;
}
.btn-items li a {
    border: 1px solid #09f;
    border-radius: 2px;
    text-align: center;
	color: #000;
}
.btn-items li span {
	font-size: 13px;
}

/* Button Cube
-----------------------------*/
.btn-cube {
	padding-bottom: 2px; /* For Shadow */
}
.btn-cube a {
	display: block;
	padding: 6px 8px 5px;
	background-color: #fff;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: 0 2px 0 #999;
	box-shadow: 0 2px 0 #999;
	line-height: 1.25;
	text-align: center;
	font-weight: bold;
	font-size: 11px;
	color: #565656;
}



/* ---------------------------
    Headings
--------------------------- */

/* Heading Level 1
-----------------------------*/
.hdg-lv1 {
    margin: 14px 0;
    padding-left: 25px;
    line-height: 22px;
    font-size: 20px;
    position: relative;
}
.hdg-lv1 span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Heading Level 1 Plain
-----------------------------*/
.hdg-lv1-plain {
    margin: 14px 0;
    line-height: 22px;
    font-size: 20px;
}


/* Heading Level2
-----------------------------*/
.hdg-lv2 {
    margin: 14px 0;
    line-height: 17px;
    font-size: 16px;
    font-weight: bold;
}
.hdg-lv2.pack,
.hdg-lv2.channel,
.hdg-lv2.recommend,
.hdg-lv2.checked {
    margin-top: 17px;
}
.hdg-lv2.pack:before,
.hdg-lv2.channel:before,
.hdg-lv2.recommend:before,
.hdg-lv2.checked:before,
.hdg-lv2.tel:before,
.hdg-lv2.help:before {
    content: "";
    display: inline-block;
    margin-right: 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: relative;
}
.hdg-lv2.pack:before {
    width: 27px;
    height: 23px;
    background-image: url(../img/ico-pack.png);
    top: -2px;
}
.hdg-lv2.channel:before {
    width: 25px;
    height: 20px;
    background-image: url(../img/ico-channel.png);
    top: -2px;
}
.hdg-lv2.recommend:before {
    width: 24px;
    height: 19px;
    background-image: url(../img/ico-recommend.png);
    top: -2px;
}
.hdg-lv2.checked:before {
    width: 24px;
    height: 19px;
    background-image: url(../img/ico-checked.png);
    top: -2px;
}.hdg-lv2.tel:before {
    margin-right: 5px;
    width: 16px;
    height: 18px;
    background-image: url(../img/ico-tel.png);
    top: -3px;
}
.hdg-lv2.help:before {
    margin-right: 5px;
    width: 16px;
    height: 16px;
    background-image: url(../img/ico-help.png);
    top: -2px;
}
.hdg-lv2.modify {
    padding-right: 95px;
    position: relative;
}
.hdg-lv2.modify a {
    font-weight: normal;
    position: absolute;
    top: -10px;
    right: 0;
    font-weight: normal;
}

/* Heading Level3
-----------------------------*/
.hdg-lv3 {
    margin: 10px 0;
    line-height: 16px;
    font-size: 14px;
    font-weight: bold;
    color: #000;
}
.hdg-lv3.sub {
    color: #565656;
}

/* Heading Form Type 01
-----------------------------*/
.hdg-form-ty01 {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.hdg-form-ty01-inner {
    display: block;
    padding: 10px 0 10px 40px;
    position: relative;
}
.hdg-form-ty01-inner.no-icon {
    padding-left: 0;
}
.hdg-form-ty01 .ico-required,
.hdg-form-ty01 .ico-free {
    position: absolute;
    top: 10px;
    left: 0;
}
.hdg-form-ty01 .em {
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}
.hdg-form-ty01 .sub {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: normal;
}

/* Heading Form Type Filled
-----------------------------*/
.hdg-form-ty01.filled {
    background-color: #f5f5f5;
}

/* Heading Form Type Icon
-----------------------------*/
.hdg-form-ty01.icon {
    min-height: 60px;
    position: relative;
}
.hdg-form-ty01.icon:before {
    content: "";
    display: block;
    width: 53px;
    height: 45px;
    background: url(../img/ico-charactor-04.png) no-repeat center;
    background-size: contain;
    position: absolute;
    right: 5%;
    top: 50%;
    margin-top: -22px;
}
.hdg-form-ty01.icon .hdg-form-ty01-inner {
    padding-right: 56px;
}

/* Heading Form Type 02
-----------------------------*/
.hdg-form-ty02 {
    display: block;
    padding-top: 10px;
    padding-bottom: 7px;
    background-color: #f5f5f5;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.hdg-form-ty02 .ico-required,
.hdg-form-ty02 .ico-free {
    margin-right: 8px;
}
.hdg-form-ty02 .order {
    display: inline-block;
    line-height: 20px;
    position: relative;
    top: 2px;
}
.hdg-form-ty02 .text {
    display: block;
    margin-top: 6px;
}

/* Heading Form Type 03
-----------------------------*/
.hdg-form-ty03 {
    display: block;
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.hdg-form-ty03 .em {
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}
.hdg-form-ty03 .sub {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: normal;
}



/* ---------------------------
    Text
--------------------------- */

/* Align
-----------------------------*/
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }

/* Text
-----------------------------*/
.text-em {
    font-weight: bold;
}
.text-strong-01 {
    font-size: 16px;
    font-weight: bold;
}
.text-strong-02 {
    font-weight: bold;
    color: #565656;
}
.text-italic {
    font-style: italic;
}
.text-light {
    color: #565656;
}
.text-light-size {
    color: #565656;
    font-size: 15px;
}

/* Text Paterns
-----------------------------*/
.text-note {
    margin-bottom: 8px;
    padding-left: 1em;
    position: relative;
}
.text-note-icon  {
    content: "※";
        display: block;
        font-size: 12px;
        position: absolute;
        left: 0;
        top: .12em;
}
.text-note-attention01 {
    margin-bottom: 8px;
    padding-left: 1em;
    position: relative;
    color: #e60000 !important;
}
.text-note-attention01-icon {
    content: '※';
        display: block;
        font-size: 12px;
        position: absolute;
        left: 0;
        top: .12em;
        color: #e60000 !important;
}
.text-ex {
    margin-top: 2px;
    margin-bottom: 4px;
}
.text-lead {
    margin-top: 16px;
    margin-bottom: 16px;
    line-height: 16px;
    color: #000;
}
.text-lead:first-child {
    margin-top: 0;
}
.text-lead:last-child {
    margin-bottom: 0;
}
.text-side {
    margin-bottom: 8px;
    padding-left: 1em;
    position: relative;
    padding: 0 30px;
}
.text-note-side  {
    display: block;
    position: absolute;
    left: 15px;
}

/* Price Text
-----------------------------*/
.text-price-01,
.text-price-02,
.text-price-03 {
    margin-top: 5px;
    text-align: right;
    font-weight: bold;
}
.text-price-01 em,
.text-price-02 em,
.text-price-03 em {
    margin-right: 2px;
    vertical-align: middle;
    font-size: 20px;
    position: relative;
    top: -1px;
}
.text-price-01 {
    text-align: right;
    color: #000000;
}
.text-price-02 {
    color: #000;
}
.text-price-03 {
    color: #565656;
}
.label .text-price-03 {
    margin-top: 0;
    float: right;
}

/* Error Text
-----------------------------*/
.text-form-error {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #e60000;
}
.text-error {
    padding-left: 20px;
    background: url(../img/ico-error.png) no-repeat top left;
    background-size: 16px auto;
    line-height: 1.14285;
    font-weight: bold;
    color: #e60000;
}


/* Notification Type 01
-----------------------------*/
.text-notice-ty01 {
    margin-top: 12px;
    margin-bottom: 8px;
    min-height: 55px;
    position: relative;
}
.text-notice-ty01 span {
    display: block;
    padding: 7px 72px 7px 8px;
    background: url(../img/bg-stripe-01-min.png) top left;
    background-size: 8px auto;
}
.text-notice-ty01:after {
    content: "";
    display: block;
    width: 63px;
    height: 47px;
    background: url(../img/ico-charactor-01.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 8px;
    right: 4px;
}

/* Notification Type 02
-----------------------------*/
.text-notice-ty02 {
    padding-left: 65px;
    min-height: 47px;
    background: url(../img/ico-charactor-02.png) no-repeat left 2px;
    background-size: 55px 45px;
    line-height: 16px;
    color: #565656;
}

/* Notification Type 03
-----------------------------*/
.text-notice-ty03 {
    padding: 3px 5% 2px;
    background-color: #565656;
    color: #fff;
    position: relative;
}
.text-notice-ty03 span {
    display: block;
    padding-left: 21px;
    position: relative;
}
.text-notice-ty03 span:before {
    content: "";
    display: block;
    width: 15px;
    height: 11px;
    background: url(../img/ico-check.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 2px;
    left: 0;
}

/* Notification Type 04
-----------------------------*/
.text-notice-ty04 {
    padding: 3px 5% 2px;
    background-color: #565656;
    color: #fff;
}
.text-notice-ty04 span {
    display: block;
}

/* Notification Type 05
-----------------------------*/
.text-notice-ty05 {
	padding-left: 65px;
	min-height: 47px;
	background: url(../img/ico-charactor-05.png) no-repeat left 2px;
	background-size: 55px 45px;
	padding-top: 14px;
	color: #565656;
	margin-top: 14px;
	font-weight: bold;
}

/* ---------------------------
    List
--------------------------- */

/* List Type 01
-----------------------------*/
.list-ty01 li {
    margin: 5px 0;
    padding-left: 1em;
    line-height: 1.14285;
    color: #565656;
    position: relative;
}
.list-ty01 li:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #565656;
    position: absolute;
    top: .35em;
	left: .35em;
}

/* List Type 02
-----------------------------*/
.list-ty02 li {
    margin: 5px 0;
    padding-left: 24px;
    line-height: 1.14285;
    position: relative;
}
.list-ty02 li .order {
    display: block;
    width: 18px;
    height: 13px;
    text-align: center;
    background: url(../img/ico-list-brackets.png) no-repeat center;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0;
}

/* List Type 03
-----------------------------*/
.list-ty03 li {
    margin: 5px 0;
    padding-left: 1em;
    line-height: 1.14285;
    color: #565656;
    position: relative;
}
.list-ty03 li .order {
    position: absolute;
    top: 0;
    left: 0;
}

/* List Type 04
-----------------------------*/
.list-ty04 li {
    margin: 5px 0;
    padding-left: 1.5em;
    line-height: 1.14285;
    color: #565656;
    position: relative;
}
.list-ty04 li .order {
    width: 1.5em;
    position: absolute;
    top: 0;
    left: 0;
}

/* List Note Type 01
-----------------------------*/
.list-note-ty01 > li {
    margin: 5px 0;
    padding-left: 1em;
    line-height: 1.14285;
    color: #565656;
    position: relative;
}
.list-note-ty01 > li:before {
    content: "※";
    display: block;
    font-size: 12px;
    position: absolute;
    left: 0;
    top: .15em;
}
.list-note-ty01 > li > span {
    display: block;
    margin-top: 8px;
}
/* List Note Type 02
-----------------------------*/
.list-note-ty02 > li {
    margin: 5px 0;
    padding-left: 1em;
    line-height: 1.14285;
    color: #e60000;
    position: relative;
}
.list-note-ty02 > li:before {
    content: "※";
    display: block;
    font-size: 12px;
    position: absolute;
    left: 0;
    top: .15em;
}

/* List Note Type 03
-----------------------------*/
.list-note-ty03 > li {
    margin: 5px 0;
    padding-left: 1.5em;
    line-height: 1.14285;
    color: #565656;
    position: relative;
}
.list-note-ty03 > li .order {
    font-size: 12px;
    position: absolute;
    left: 0;
    top: .15em;
}

/* List Description Type 01
-----------------------------*/
.list-desc-ty01 dt {
    margin-bottom: 4px;
    padding-left: 24px;
    line-height: 1.4;
    position: relative;
}
.list-desc-ty01 dd + dt {
    margin-top: 8px;
    color: #000;
}
.list-desc-ty01 dt .order {
    display: block;
    width: 18px;
    height: 16px;
    text-align: center;
    background: url(../img/ico-list-brackets.png) no-repeat center;
    background-size: contain;
    line-height: 1.25;
    position: absolute;
    left: 0;
    top: 1px;
}
.list-desc-ty01 dd {
    color: #565656;
}

/* List Box Type 01
-----------------------------*/
.list-box-ty01 {
    border: 1px solid #9e9e9e;
    border-radius: 2px;
}
.list-box-ty01 li {
    padding: 9px 8px 8px;
    border-top: 1px solid #9e9e9e;
    background-color: #fff;
}
.list-box-ty01 li:first-child {
    border-top: 0;
}
.list-box-ty01 .label {
    margin-bottom: 2px;
    color: #565656;
}
.list-box-ty01 .text {
    line-height: 17px;
    font-size: 16px;
}
.list-box-ty01 .text:first-child {
    margin: 2px 0 3px;
}
.list-box-ty01 .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    line-height: 17px;
    font-size: 16px;
}
.list-box-ty01 .flex span {
    color: #9e9e9e;
    position: relative;
    top: -2px;
}

.list-box-ty01 > li > .flex{
	color: #000000;
}

.list-box-ty01 > li > .text{
	color: #000000;
}

/* List Box Type 02
-----------------------------*/
.list-box-ty02 {
    border: 1px solid #9e9e9e;
    border-radius: 2px;
}
.list-box-ty02 li {
    position: relative;
    padding: 9px 8px 10px;
    border-top: 1px solid #9e9e9e;
    background-color: #fff;
}
.list-box-ty02 li:first-child {
    border-top: 0;
}
.list-box-ty02 .label {
    margin-bottom: 2px;
    color: #565656;
}

.list-box-ty03 .list-box-ty02 .text {
    line-height: 16px;
    margin-bottom: 0;
}

.list-box-ty02 .text-price-03 {
    position: absolute;
    top: 12px;
    right: 8px;
}

.list-box-ty02 .alacarte {
    padding: 0px 0px 0px 12px;
}

.list-box-ty02 .alacarte .alacarte-ch {
    padding: 0px 8px 0px 0px;
}

/* List Box Type 03
-----------------------------*/
.list-box-ty03 {
    border-top: 1px solid #9e9e9e;
}
.list-packset > li .list-box-ty03 {
    border: none;
}
.list-box-ty03 > li {
    margin-top: 12px;
    padding: 10px 8px 9px;
    background-color: #fff;
    color: #565656;
    position: relative;
    border: 1px solid #9e9e9e;
    border-radius: 2px;
}
.list-box-ty03 > li:first-child {
    margin-top:0;
}
.list-box-ty03 > li:after {
    content: "";
    display: block;
    clear: both;
}
.list-box-ty03 > li:first-child {
    border-top: 0;
}
.list-box-ty03 .label {
    margin-bottom: 2px;
    color: #000;
}
.list-box-ty03 .label span {
    margin-right: 5px;
	vertical-align: middle;
	font-weight: bold;
	font-size: 10px;
	color: #565656;
    position: relative;
    top: -2px;
}
.list-box-ty03 .text {
    margin-bottom: 5px;
    line-height: 17px;
    font-size: 16px;
    color: #000;
}
.list-box-ty03 .note {
    margin-left: 1em;
	text-indent: -1em;
}
.list-box-ty03 .company {
    margin-top: 5px;
    margin-bottom: 4px;
	line-height: 14px;
    float: left;
	font-size: 12px;
	color: #565656;
}
.list-box-ty03 .text-price-01,
.list-box-ty03 .text-price-02,
.list-box-ty03 .text-price-03 {
    margin-top: 3px;
}
.list-box-ty03 .company + .text-price-01,
.list-box-ty03 .company + .text-price-02,
.list-box-ty03 .company + .text-price-03 {
    margin-top: 0;
    float: right;
}
.list-box-ty03 .text-strong-02 {
    margin-top: 12px;
    margin-bottom: 6px;
}
.list-box-ty03 .text-strong-02 a {
    display: block;
    padding: 9px 62px 9px 0;
    line-height: 16px;
    color: #000;
    position: relative;
    color: #565656 !important;
}

.list-box-ty03 .text-strong-02.mod-toggle-head
{
    font-weight: normal;
}

.list-box-ty03 .text-strong-02 a .ico-open,
.list-box-ty03 .text-strong-02 a .ico-close
{
    position: absolute;
    right: 3px;
}


.note-black{
	color: #000000;
}

/* List Border Type 01
-----------------------------*/
.list-border-ty01 li {
    padding: 9px 5% 10px;
    border-bottom: 1px solid #9e9e9e;
}
.list-border-ty01 .label {
    margin-bottom: 2px;
    color: #565656;
}
.list-border-ty01 .text {
    line-height: 17px;
    font-size: 16px;
}

/* List Border Type 02
-----------------------------*/
.list-border-ty02 li {
    padding: 9px 5% 10px;
    border-bottom: 1px solid #9e9e9e;
}
.list-border-ty02 li:after {
    content: "";
    display: block;
    clear: both;
}
.list-border-ty02 .label {
    margin-bottom: 2px;
}
.list-border-ty02 .label span {
    margin-right: 5px;
    vertical-align: middle;
    font-weight: bold;
    font-size: 10px;
    color: #565656;
    position: relative;
    top: -2px;
}
.list-border-ty02 .text {
    line-height: 17px;
    font-size: 16px;
}
.list-border-ty02 .note {
    margin-top: 5px;
    line-height: 16px;
    font-size: 14px;
    color: #565656;
}

/* List Channel
-----------------------------*/
.list-channel-head a {
    display: block;
    padding: 15px 75px 15px 12px;
    border-bottom: 1px solid #9e9e9e;
    background-color: #fff;
    color: #000;
    position: relative;
}
.list-channel-head a:before {
    content: "";
    display: block;
    width: 4px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 15px;
    bottom: 16px;
}
.list-channel-head .ico-open,
.list-channel-head .ico-close {
    position: absolute;
    right: 8px;
    top: 16px;
}

/* Body */
.list-channel-body {
    display: none;
    padding-top: 8px;
    padding-bottom: 12px;
}

/* Open */
.list-channel-open a {
    background-color: transparent;
}
.list-channel-open + .list-channel-body {
    display: block;
}

/* Color */
.list-channel-1 a:before { background-color: #bf1920; }
.list-channel-2 a:before { background-color: #005bab; }
.list-channel-3 a:before { background-color: #00773b; }
.list-channel-4 a:before { background-color: #ed8599; }
.list-channel-5 a:before { background-color: #bf4d96; }
.list-channel-6 a:before { background-color: #9cc715; }
.list-channel-7 a:before { background-color: #ea6000; }
.list-channel-8 a:before { background-color: #9983bb; }
.list-channel-9 a:before { background-color: #4cabe1; }
.list-channel-10 a:before { background-color: #d35315; }
.list-channel-11 a:before { background-color: #717071; }
.list-channel-12 a:before { background-color: #476d1d; }
.list-channel-13 a:before { background-color: #1f2585; }
.list-channel-16 a:before { background-color: #e65498; }

/* List Product
-----------------------------*/
.list-product li {
}
.list-product li:first-child {
    margin-top: 0;
}

.list-product-inner {
    margin-top: 12px;
    border: 2px solid #9e9e9e;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    z-index: 1;
}

/* Head */
.list-product-head {
    background-color: #f5f5f5;
    border-bottom: 1px solid #9e9e9e;
    height: 44px;
    position: relative;
}
.list-product-head p {
    display: block;
    padding: 15px 12px 0px 0px;
    margin: 0px
}
.list-product-head span {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: bold;
    color: #565656;
}

/* Body */
.list-product-body {
    padding: 10px 0;
    background-color: #fff;
}
.list-product-body:after {
    content: "";
    display: block;
    clear: both;
}
.list-product-body .caption {
    margin-bottom: 6px;
    padding: 0 12px;
    font-weight: bold;
    color: #565656;
}
.list-product-body .thumb {
    padding-left: 12px;
    width: 77px;
    box-sizing: border-box;
    float: left;
    text-align: center;
}
.list-product-body .body {
    padding-right: 12px;
    padding-left: 12px;
    overflow: hidden;
    color: #565656;
}
.list-product-body .body p {
    margin-bottom: 5px;
}
.list-product-body .body p:last-child {
    margin-bottom: 0;
}
.list-product-body .text {
    line-height: 1.4;
    font-size: 16px;
    color: #000;
}
.list-product-body .note {
    margin-left: 1em;
    text-indent: -1em;
}
.list-product-foot {
    background-color: #fff;
    height: 42px;
}
.list-product-under {
    margin: 3px 0px 10px 0px;
}

/* Check Input */
.list-product-check {
    position: absolute;
    top: 12px;
    left: 11px;
    z-index: 3;
}
.list-product-check input[type="checkbox"] {
    margin-right: 6px;
}

.list-osusume-check {
    position: absolute;
    top: 12px;
    left: 11px;
    z-index: 3;
}

/* Detail Button */
.list-product-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
}

/* Checked */
.list-product-inner.checked {
    border-color: #00c300;
}

.list-product li.checked {
    border-color: #00c300;
}

.list-product-inner.checked .list-product-head {
    background-color: #e6f9e6;
}

.list-product.renew li.disabled
{
    cursor: default;
}
.list-product.renew li.disabled .list-product-head
{
    padding-left: 16px;
}
.list-product.renew li.disabled .text-price-01
{
    color: #565656;
}


/* List Guide
-----------------------------*/
.list-guide li {
    margin-top: 12px;
    cursor: pointer;
}
.list-guide li:first-child {
    margin-top: 0;
}

/* Note */
.list-guide-note {
    margin-top: -2px;
    margin-bottom: 6px;
    color: #565656;
}

/* Body */
.list-guide-body {
    padding: 8px 8px 4px 38px;
    overflow: hidden;
    background-color: #fff;
    border: 2px solid #9e9e9e;
    border-radius: 2px;
    position: relative;
}
.list-guide-body.checked {
    border-color: #00c300;
}
.list-guide-body .label {
    margin-bottom: 2px;
}
.list-guide-body .label span {
    margin-right: 5px;
    vertical-align: middle;
    font-weight: bold;
    font-size: 10px;
    color: #565656;
    position: relative;
    top: -2px;
}
.list-guide-body .text {
    line-height: 17px;
    font-size: 16px;
}
.list-guide-body .company {
    margin-top: 8px;
    margin-bottom: 4px;
    line-height: 14px;
    float: left;
    font-size: 12px;
    color: #565656;
}
.list-guide-body .text-price-01,
.list-guide-body .text-price-02,
.list-guide-body .text-price-03 {
    margin-top: 3px;
}
.list-guide-body .company + .text-price-01,
.list-guide-body .company + .text-price-02,
.list-guide-body .company + .text-price-03 {
    float: right;
}



/* Check */
.list-guide-check {
    position: absolute;
    left: 9px;
    top: 50%;
    margin-top: -8px;
    z-index: 3;
}

/* Checked */
.list-guide li.checked .list-guide-body {
    border-color: #00c300;
}
.list-guide li.checked  .list-guide-body:after {
    content: "";
    display: block;
    border: 1px solid #00c300;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
}

/* Disabled */
.list-guide li.disabled .list-guide-body {
    background-color: #fafafa;
    border-color: #c9c9c9;
}
.list-guide li.disabled input[disabled="disabled"] {
    opacity: 0;
}
.list-guide li.disabled .text-price-01
{
    color: #565656;
}

/* List Packset
-----------------------------*/
.list-packset > li {
    margin-top: 12px;
	border: 1px solid #9e9e9e;
	border-radius: 2px;
	position: relative;
}
.list-packset > li:first-child {
    margin-top: 0;
}

/* Head */
.list-packset-head {
    padding: 14px 100px 13px 8px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #9e9e9e;
    position: relative;
}
.list-packset-head .label span {
    margin-right: 5px;
	vertical-align: middle;
	font-weight: bold;
	font-size: 10px;
	color: #565656;
    position: relative;
    top: -2px;
}
.list-packset-head a {
    display: block;
    padding: 14px 8px 13px;
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

/* Body */
.list-packset-body {
    padding: 9px 11px;
    background-color: #fff;
}
.list-packset-body .text-strong-02 {
    margin-top: 12px;
    margin-bottom: 6px;
}

/* Discerpt */
.list-packset-discerpt .text {
    line-height: 17px;
    font-size: 16px;
}

/* Note */
.list-packset-body .text-note {
    margin-top: 8px;
    line-height: 16px;
}
.list-packset-body .text-note:last-child {
    margin-bottom: 0;
}
.list-packset-body .note {
    font-size: 14px;
    color: #565656;
}

/* List Product Price
-----------------------------*/
.list-product-price li {
    padding: 6px 8px 4px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}
.list-product-price .label {
    font-size: 16px;
    position: absolute;
    left: 8px;
    top: 8px;
}
.list-product-price .text-price-01,
.list-product-price .text-price-02,
.list-product-price .text-price-03 {
    margin-top: 0;
}




/* ---------------------------
    Link
--------------------------- */

/* Link External
-----------------------------*/
.link-external:after {
    content: "";
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    width: 10px;
    height: 10px;
    background: url(../img/ico-external-blue.png) no-repeat center;
    background-size: contain;
    vertical-align: middle;
    position: relative;
}

/* Link Arrow
-----------------------------*/
.link-left:before,
.link-up:before,
.link-down:before {
    content: "";
    display: inline-block;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.link-left:before {
    background-image: url(../img/ico-arrow-left.png);
}
.link-up:before {
    background-image: url(../img/ico-arrow-up.png);
}
.link-down:before {
    background-image: url(../img/ico-arrow-down.png);
}


/* Link Delete
-----------------------------*/
.link-delete:before {
    content: "";
    display: inline-block;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    background: url(../img/ico-delete.png) no-repeat center;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    top: -1px;
}


/* Link Block
-----------------------------*/
.link-block {
    display: block;
    padding-top: 10px;
    padding-bottom: 9px;
}


/* Link Filled
-----------------------------*/
.link-filled {
    padding-top: 14px;
    padding-bottom: 13px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #9e9e9e;
}



/* ---------------------------
    Tables
--------------------------- */

/* Table Type 01
-----------------------------*/
.table-ty01 {
    width: 100%;
}
.table-ty01 th,
.table-ty01 td {
    padding: 10px 8px 9px;
    border: 1px solid #9e9e9e;
    vertical-align: middle;
}
.table-ty01 th {
    width: 61.5234375%;
    text-align: left;
    background-color: #f5f5f5;
}
.table-ty01 td {
    width: 38.4765625%;
    text-align: right;
}

/* Table Type 02
-----------------------------*/
.table-ty02 {
	width: 100%;
	margin-bottom: 24px;
}
.table-ty02 th,
.table-ty02 td {
	padding: 10px 8px 9px;
	border: 1px solid #9e9e9e;
	vertical-align: middle;
}
.table-ty02 th {
	width: 37%;
	text-align: left;
	background-color: #f5f5f5;
}
.table-ty02 td {
	width: 63%;
}




/* Table Price
-----------------------------*/
.table-price {
    margin: 12px 0;
}
.table-price:last-child {
    margin-bottom: 0;
}
.table-price-head {
    display: inline-block;
    padding: 3px 5px 0;
    background: #09f;
    border-radius: 2px 2px 0 0;
    font-weight: bold;
    color: #fff;
}
.table-price-body {
    border: 2px solid #09f;
    border-radius: 0 2px 2px 2px;
    background: #fff;
}
.table-price .list-product-price:last-child {
    background-color: #e6f5ff;
}
.table-price .list-product-price:last-child .label {
    font-weight: bold;
}
.table-price .list-product-price:last-child li:last-child {
    border-bottom: 0;
}
.table-price .mod-toggle-head {
    padding-left: 14px;
    padding-right: 14px;
}
.table-price .mod-toggle-body {
    padding: 4px 14px 16px;
}



/* ---------------------------
    Form
--------------------------- */

/* Fields / Select
-----------------------------*/
.input-default,
.input-required,
.input-selected,
.input-error {
    display: block;
    margin: 0;
    padding: 9px 8px;
    width: 100%;
    border: 2px solid #9e9e9e;
    background: none;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    box-sizing: border-box;
    line-height: 18px;
    font-size: 16px;
    font-family: Arial, Helvetica, "Hiragino Kaku Gothic ProN", "Meiryo", "Yu Gothic", sans-serif;
	color: #000;
    -webkit-appearance: none;
    appearance: none;
    resize: none;
}
.input-default {
    background-color: #fff;
}
.input-selected {
    border-color: #00c300;
    background-color: #fff;
}
.input-error {
    border-color: #e60000;
    background-color: #fce0e0;
}
.input-default:focus,
.input-required:focus,
.input-error:focus {
    border-color: #00c300;
    background-color: #fff;
}
select.input-default,
select.input-required,
select.input-selected,
select.input-error {
    padding-right: 15px;
    background-image: url(../img/ico-arrow-select.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px 5px;
}


/* Inline Input
-----------------------------*/
.input-inline {
    display: inline-block;
    width: 68px;
}


/* Inline Text Input
-----------------------------*/
.inline-text-input span {
    font-size: 16px;
    color: #565656;
}


/* Multi Inputs
-----------------------------*/
.multi-inputs {
    display: -webkit-box; /* Less than android 4.3 */
    display: -webkit-flex; /* Less than iOS8 */
    display: flex;
    -webkit-box-align: center; /* Less than android 4.3 */
    -webkit-align-items: center; /* Less than iOS8 */
    align-items: center;
    -webkit-box-pack: justify; /* Less than android 4.3 */
    -webkit-justify-content: space-between; /* Less than iOS8 */
    justify-content: space-between;
}
.multi-inputs input,
.multi-inputs select {
    padding: 9px 4px;
    -webkit-box-flex: 11; /* Less than android 4.3 */
    -webkit-flex: 11; /* Less than iOS8 */
    flex: 11;
}
.multi-inputs span {
    padding: 0 1px;
    text-align: center;
    -webkit-box-flex: 1; /* Less than android 4.3 */
	-webkit-flex: 1; /* Less than iOS8 */
	flex: 1;
}


/* Input Date
-----------------------------*/
.input-date {
    display: -webkit-box; /* Less than android 4.3 */
    display: -webkit-flex; /* Less than iOS8 */
    display: flex;
    -webkit-box-align: center; /* Less than android 4.3 */
    -webkit-align-items: center; /* Less than iOS8 */
    align-items: center;
    -webkit-box-pack: justify; /* Less than android 4.3 */
    -webkit-justify-content: space-between; /* Less than iOS8 */
    justify-content: space-between;
}
.input-date select {
    -webkit-box-flex: 11; /* Less than android 4.3 */
    -webkit-flex: 11; /* Less than iOS8 */
    flex: 11;
}
.input-date span {
    padding: 0 6px;
    text-align: center;
    color: #565656;
    -webkit-box-flex: 1; /* Less than android 4.3 */
	-webkit-flex: 1; /* Less than iOS8 */
	flex: 3;
}
.input-date span:last-child {
    padding-right: 0;
}


/* Radio / Checkbox
-----------------------------*/
input[type="radio"],
input[type="checkbox"] {
    display: inline-block;
    margin: 0;
    margin-right: 4px;
    padding: 0;
    border: 0;
    background: none;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    border-radius: 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    -webkit-appearance: none;
    appearance: none;
}
input[type="radio"] {
    width: 16px;
    height: 16px;
    background-image: url(../img/ico-radio-default.png);
}
input[type="radio"]:checked {
    background-image: url(../img/ico-radio-checked.png);
}
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background-image: url(../img/ico-checkbox-default.png);
}
input[type="checkbox"]:checked {
    background-image: url(../img/ico-checkbox-checked.png);
}


/* Input Checkbox / Radio
-----------------------------*/
.input-checkbox,
.input-radio {
    display: block;
    position: relative;
    color: #000;
}
.input-checkbox input,
.input-radio input {
    position: absolute;
    top: 50%;
}
.input-checkbox input {
    margin-top: -10px;
    left: 8px;
}
.input-radio input {
    margin-top: -8px;
    left: 10px;
}
.input-checkbox span,
.input-radio span {
    display: block;
	padding: 9px 5px;
    padding-left: 34px;
	width: 100%;
	border: 2px solid #9e9e9e;
    background-color: #fff;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	box-sizing: border-box;
    line-height: 18px;
	font-size: 16px;
}
.input-checkbox input:checked + span,
.input-radio input:checked + span {
    border-color: #00c300;
}

/* Required */
.input-checkbox-required span,
.input-radio-required span {
    background-color: #fce0e0;
}
.input-checkbox-required input:checked + span,
.input-radio-required input:checked + span {
    background-color: #fff;
}

/* Input Radio List
-----------------------------*/
.input-vertical-list {
    margin-top: 16px;
    margin-bottom: 16px;
    color: #000;
}
.input-vertical-list:last-child {
    margin-bottom: 0;
}
.input-vertical-list li {
    margin-top: 10px;
}
.input-vertical-list li:first-child {
    margin-top: 0;
}


/* Confirm Error
-----------------------------*/
.box-confirm-error {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 10px 8px;
    border: 2px solid #e60000;
    border-radius: 2px;
}
.box-confirm-error .text-error {
    margin-bottom: 8px;
}



/* ---------------------------
    Divider
--------------------------- */

/* Divider Type 01
-----------------------------*/
.divider-ty01 {
    padding-bottom: 22px;
    position: relative;
}
.divider-ty01:before,
.divider-ty01:after {
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.divider-ty01:before {
    background-color: #e0e0e0;
}
.divider-ty01:after {
    background: #e0e0e0; /* Old browsers */
    background: -webkit-linear-gradient(top,  #868686 0%,#e0e0e0 60%,#e0e0e0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #868686 0%,#e0e0e0 60%,#e0e0e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


/* Divider Type 02
-----------------------------*/
.divider-ty02 {
    margin-top: 14px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}
.divider-ty02:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-left: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f5f5f5;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
}


/* Divider Type 03
-----------------------------*/
.divider-ty03 {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}



/* ---------------------------
    Section
--------------------------- */

/* Section Filled
-----------------------------*/
.sec-filled {
    background-color: #f5f5f5;
    overflow: hidden;
}
.sec-filled .hdg-lv3 {
    margin: 10px 0 8px;
}
.sec-filled-body > p,
.sec-filled-body > ul,
.sec-filled-body > ol {
    margin-bottom: 8px;
    line-height: 16px;
    color: #565656;
}
.sec-filled-body > p:last-child,
.sec-filled-body > ul:last-child,
.sec-filled-body > ol:last-child {
    margin-bottom: 0;
}


/* Section Form
-----------------------------*/
.sec-form {
    overflow: hidden;
}
.sec-form-body {
    display: block;
    padding-top: 12px;
    background-color: #fff;
    color: #565656;
}


/* Section Item
-----------------------------*/
.sec-item {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.sec-item:first-child {
    margin-top: 0;
}
.sec-item:last-child {
    margin-bottom: 0;
}

/* Override */
.sec-item > .hdg-lv3 {
    margin-top: 12px;
}

/* Override */
.sec-item .hdg-form-ty01 {
    margin-bottom: 4px;
}
.sec-item .hdg-form-ty01-inner {
    padding-top: 0;
    padding-bottom: 0;
}
.sec-item .hdg-form-ty01 .ico-required,
.sec-item .hdg-form-ty01 .ico-free {
    top: 0;
}



/* ---------------------------
    Module
--------------------------- */

/* Product Detail
-----------------------------*/
.mod-detail {
    margin: 15px 0;
}
.mod-detail-head {
    padding-bottom: 8px;
    overflow: hidden;
    border-bottom: 1px solid #9e9e9e;
}
.mod-detail-head {
    margin-top: 15px;
    padding: 0 5% 10px;
}
.mod-detail-head:after {
    content: "";
    display: block;
    clear: both;
}
.mod-detail-thumb {
    margin-right: 15px;
    width: 65px;
    float: left;
}
.mod-detail-body {
    overflow: hidden;
}
.mod-detail-body .label {
    margin-bottom: 2px;
}
.mod-detail-body .label span {
    margin-right: 5px;
    vertical-align: middle;
    font-weight: bold;
    font-size: 10px;
    color: #565656;
}
.mod-detail-body .text {
    line-height: 17px;
    font-size: 16px;
}
.mod-detail-body .note {
    margin-top: 5px;
    line-height: 16px;
    font-size: 14px;
    color: #565656;
}
.mod-detail-desc {
    margin-top: 15px;
    padding: 0 5%;
    color: #565656;
}


/* Select 5
-----------------------------*/
.mod-select5 {
    margin: 15px 0;
}
.mod-select5 .logo {
    margin-bottom: 5px;
    text-align: center;
}
.mod-select5 .logo img {
    width: 110px;
    height: auto;
}
.mod-select5 .text {
    margin-top: 10px;
    line-height: 16px;
}


/* Toggle
-----------------------------*/
.mod-toggle {

}
.mod-toggle-head {
    border-bottom: 1px solid #e0e0e0;
}
.mod-toggle-head a {
    display: block;
    padding: 9px 62px 9px 0;
    line-height: 16px;
    color: #000;
    position: relative;
}
.mod-toggle-head .ico-open,
.mod-toggle-head .ico-close {
    position: absolute;
    right: 0;
    top: 10px;
}
.mod-toggle-body {
    display: none;
    padding-top: 8px;
}
.mod-toggle-open + .mod-toggle-body {
    display: block;
}


/* Description Box Type 01
-----------------------------*/
.mod-desc-ty01 {
    margin-top: 12px;
    padding: 10px;
    background-color: #f5f5f5;
}
.mod-desc-ty01-head {
    margin-bottom: 8px;
    line-height: 16px;
    font-size: 14px;
    font-weight: bold;
    color: #565656;
}
.mod-desc-ty01-body p {
    margin-top: 8px;
    line-height: 16px;
    color: #000;
}
.mod-desc-ty01-body p:first-child {
    margin-top: 0;
}
.mod-desc-ty01-body .input-checkbox {
    margin-top: 10px;
}


/* Description Box Type 02
-----------------------------*/
.mod-desc-ty02 {
    padding: 10px;
    background-color: #f5f5f5;
    color: #000;
}
.mod-desc-ty02 ul,
.mod-desc-ty02 ol {
    margin-top: 8px;
    margin-bottom: 8px;
}


/* calendar style
「cal-」 prefix
-----------------------------*/


.cal{
    margin: 30px 0 20px 0;
    box-sizing: border-box;
    border: 1px solid #9e9e9e;
    border-radius: 4px;
}

.cal-head{
    border-radius: 4px 4px 0 0;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #9e9e9e;
    padding: 15px 20px;
    background: #f5f5f5;
}

.cal-go-none{
    color: #9e9e9e;
}

.cal-module .cal-border-th th {
    border-top: none;
    border-bottom: 1px solid #9e9e9e;
}

.cal-module .cal-borderbottom-none td {
    border-bottom: none;
}

.cal-prev .cal-prev-arrow:before {
    content: "";
    width: 4px;
    height: 4px;
    border: 0px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 11px;
    margin-top: -2px;
}

.cal-prev .cal-go-active:before {
    border-bottom: solid 2px #0099ff;
    border-left: solid 2px #0099ff;
}

.cal-prev .cal-go-none:before {
    border-bottom: solid 2px #9e9e9e;
    border-left: solid 2px #9e9e9e;
}

.cal-go-active {
    color: #0099ff;
}

.cal-next .cal-next-arrow:before {
    content: "";
    width: 4px;
    height: 4px;
    border: 0px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 11px;
    margin-top: -2px;
}

.cal-next .cal-go-active:before {
    border-top: solid 2px #0099ff;
    border-right: solid 2px #0099ff;
}

.cal-next .cal-go-none:before {
    border-top: solid 2px #9e9e9e;
    border-right: solid 2px #9e9e9e;
}

.cal-title{
    font-size: 18px;
}

.cal-module{
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}

.cal-module th,
.cal-module td{
    text-align: center;
    border: 1px solid #e0e0e0;
    padding: 10px;
    background: #fff;
}

.cal-module td{
    font-size: 18px;
}

.cal-module .cal-week-sun{
    color: #e51717;
    background: #fef3f3;
}

.cal-module .cal-week-sat{
    color: #175ce5;
    background: #f3f7fe;
}

.cal-module .cal-day-sun {
    background: #fef3f3;
}

.cal-module .cal-day-sat {
    background: #f3f7fe;
}

.cal-module .cal-today{
    background: #e6f9e6;
}

.cal-module .cal-day-null,
.cal-module .cal-day-disabled {
    background: #f5f5f5;
}

.cal-module .cal-day-disabled {
    color: #7a7a7a;
}

.cal-target{
    border: 1px solid #9e9e9e;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

.cal-text{
    color: #565656;
}

.cal-set{
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.cal-set-box{
    margin-left: 10px;
}

.cal-set-year{
    width: 35px;
}

.cal-set-month,
.cal-set-day {
    width: 20px;
}

.cal-table-last td:first-child{
    border-radius: 0 0 0 4px;
}

.cal-table-last td:last-child {
    border-radius: 0 0 4px 0;
}

.cal-set-sel {
    border:none;
}

/* util style
「u-」 prefix
-----------------------------*/

/* font */
.u-font16{
    font-size: 16px;
}

.u-font-gray{
    color: #565656;
}

.u-font-black {
    color: #000 !important;
}

.u-back-white{
    background: #fff;
}

.u-tesxt-red{
    color: #e60000;
}

.u-pl0{padding-left: 0 !important;}
.u-mt10{margin-top: 10px;}
.u-mt20 {margin-top: 20px;}

/* modifier style
「m-」 prefix
-----------------------------*/

/* heading */
.m-hdg-lv2{
    color: #565656;
}

.m-back-white{
    background: #fff;
}

.input-checkbox input:checked+.m-radio-box,
.input-radio input:checked+.m-radio-box {
    border-color: #00c300;
}

.m-hdg-form-ty01-icon:after{
    content: "";
    display: block;
    width: 63px;
    height: 47px;
    background: url(../img/ico-charactor-04.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 8px;
    right: 15px;
}

.m-radio-box{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    flex-wrap: nowrap;
    /* -webkit-justify-content: space-between;
    justify-content: space-between; */
    padding: 9px 5px;
    padding-left: 34px;
    width: 100%;
    border: 2px solid #9e9e9e;
    background-color: #fff;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    box-sizing: border-box;
    line-height: 18px;
    font-size: 16px;
}

.m-radio-box img{
    width: 40%;
}

.m-radio-box p {
    margin-left: 7%;
}

.m-acc{
    display: none;
}

.m-hdg-lv1{
    padding-left: 0;
}

::-ms-expand {
    /* select要素のデザインを無効にする（IE用） */
    display: none;
}

.netIdNoCheck
    display: none;
    /* pointer-events: none; */
}

.noView {
    display: none;
}

/* Display None
-----------------------------*/
.disp-none {
    display: none;
}