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

/* PCのみ表示する設定 */
.pc {
    display: inline;
}

@media screen and (max-width: 560px) {
    .pc {
        display: none;
    }
}

/* SPのみ表示する設定 */
.sp {
    display: none;
}

@media screen and (max-width: 560px) {
    .sp {
        display: inline;
    }
}



.icon-advance,
.icon-return,
.icon-cart {
    position: relative;
}

.icon-advance::after,
.icon-return::after,
.icon-cart::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.icon-advance::after {
    background: url('/assets/img/icon/advance_icon.png') no-repeat center center/cover;
}

.icon-return::after {
    background: url('/assets/img/icon/return_icon_white.png') no-repeat center center/cover;
}

.icon-return:hover::after,
.icon-return:active::after {
    background: url('/assets/img/icon/return_icon.png') no-repeat center center/cover;
}

.icon-cart::after {
    background: url('/assets/img/icon/cart_icon.png') no-repeat center center/cover;
}

.icon-info {
    position: relative;
    padding-left: 25px;
}

.icon-info::before {
    background-color: #BBDB63;
    border-radius: 25px;
    content: '？';
    color: #fff;
    display: inline-block;
    position: absolute;
    top: 2px;
    left: 0;
    text-align: center;
    width: 22px;
    height: 22px;
}

/* .icon-info::before {
    background: url('/assets/img/icon//info.png') no-repeat center center/cover;
} */

/* 背景色の追加 */
.navbar-keihin {
    background-color: #89B929;
}

.navbar-donq {
    background-color: #4D8DC6;
}

.nav-icon {
    font-size: 1.5rem;
}

.bg-transparent {
    background-color: transparent;
}

.bg-light-vermillon {
    background-color: #FDEDED;
}

.bg-yellow {
    background-color: #FFF67F;
}

.bg-subtle-yellow {
    background-color: #FFF799;
}

.bg-yellow-plaid {
    background-image: url(/koukan_system/img/picture/Intro-back-pc.gif);
}

.bg-cheerful-orange {
    background-color: #F9C270;
}

.bg-gold-brown {
    background-color: #F29100;
}

.bg-goods-exists-lime {
    background-color: #BBDB63;
}

.bg-verde-mela {
    background-color: #ABCD03;
}

.bg-modest-lime {
    background-color: #EFF5D8;
}

.bg-indigo-blue {
    background-color: #608DCA;
}

.bg-mint-green {
    background-color: #58B3AC;
}

.border-orange {
    border: solid 1px #EA5514;
}

.border-mint-green {
    border: solid 1px #58B3AC;
}

.border-bottom-orange-solid {
    border-top: hidden;
    border-bottom: solid 1px #EA5514;
    border-left: hidden;
    border-right: hidden;
}

.border-bottom-orange-dashed {
    border-top: hidden;
    border-bottom: dashed 1px #EA5514;
    border-left: hidden;
    border-right: hidden;
}

.border-less {
    border: none;
}

.border-bottom-less {
    border-bottom: hidden;
}

/* 下線の色の追加 */
.u-red {
    border-bottom: solid 1px #E73836;
}

.u-yellow {
    border-bottom: solid 5px #F7E685;
}

.u-orange {
    border-bottom: solid 1px #EA5514;
}

.u-plan-heading {
    border-bottom: solid 1px #F39800;
}

.plan-img-width {
    width: 9rem;
}

.plan-balloon-width {
    width: 6.5rem;
}

/* ボーベルの画像がでかくなりすぎるから指定 */
.beaubelle-img-width {
    width: 10rem;
}

/* テーブル上の画像の横幅指定 */
.table-img-width {
    width: 7rem;
}

.attention-credit-img-width {
    width: 16.5rem;
}

.heading-4-img-width {
    width: 2rem;
}

.date-width {
    width: 12rem;
}

/* inputのnumberの幅を制限 */
.quantity-width {
    width: 3rem;
}

/* 囲み枠の追加 */
.box-lime-dot {
    padding: 1rem 1.5rem;
    margin: 0 0;
    background: #EFF5D8;
    border: dotted 2px #ABCD03;
}

.box-white {
    padding: 2rem 1.5rem;
    margin: 0 0;
    background: #fff;
    border: solid 1px #000;
}

.box-white-orange {
    display: inline-block;
    line-height: 2.5rem;
    padding: 0.5rem 0.5rem;
    margin: 0 0;
    background: #fff;
    border: solid 1px #EA5514;
}

.box-gradation-green {
    background: -moz-linear-gradient(50% 103.31% 90deg, rgba(118, 179, 47, 1) 0%, rgba(118, 179, 47, 1) 30.52%, rgba(150, 190, 36, 1) 96.24%);
    background: -webkit-linear-gradient(90deg, rgba(118, 179, 47, 1) 0%, rgba(118, 179, 47, 1) 30.52%, rgba(150, 190, 36, 1) 96.24%);
    background: -webkit-gradient(linear, 50% 103.31%, 50% 4.41%, color-stop(0, rgba(118, 179, 47, 1)), color-stop(0.3052, rgba(118, 179, 47, 1)), color-stop(0.9624, rgba(150, 190, 36, 1)));
    background: -o-linear-gradient(90deg, rgba(118, 179, 47, 1) 0%, rgba(118, 179, 47, 1) 30.52%, rgba(150, 190, 36, 1) 96.24%);
    background: -ms-linear-gradient(90deg, rgba(118, 179, 47, 1) 0%, rgba(118, 179, 47, 1) 30.52%, rgba(150, 190, 36, 1) 96.24%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#76B32F', endColorstr='#96BE24' ,GradientType=0)";
    background: linear-gradient(0deg, rgba(118, 179, 47, 1) 0%, rgba(118, 179, 47, 1) 30.52%, rgba(150, 190, 36, 1) 96.24%);
    border: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#96BE24', endColorstr='#76B32F', GradientType=0);
    font-size: 1.1rem;
    margin: 0 0;
    padding: 10px 0;
}

/* 吹き出し */
.balloon-left {
    position: relative;
    padding: 0.5rem;
    background-color: #FFF799;
    border: 1px solid #F39800;
}

.balloon-left:before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -15px;
    top: 50%;
    margin-top: -15px;
    border-right: 15px dashed #F39800;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.balloon-left:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -13px;
    top: 50%;
    margin-top: -15px;
    border-right: 15px solid #FFF799;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.balloon-left p {
    margin: 0;
    padding: 0;
}

/* 吹き出し */
.balloon-top {
    position: relative;
    padding: 0.5rem;
    background-color: #FFF799;
    border: 1px solid #F39800;
}

.balloon-top:before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 0;
    top: -15px;
    margin-left: 50%;
    border-bottom: 15px solid #F39800;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

.balloon-top:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 0;
    top: -13px;
    margin-left: 50%;
    border-bottom: 15px solid #FFF799;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

.balloon-top p {
    margin: 0;
    padding: 0;
}

/* 見出しのマークを追加 */
.heading-before {
    font-size: 1rem;
    vertical-align: middle;
}

.heading-3 {
    font-size: 1.7rem;
    vertical-align: middle;
}

.heading-4 {
    font-size: 1.5rem;
    vertical-align: middle;
}

.heading-5 {
    font-size: 1.2rem;
    vertical-align: middle;
}

/* 水平線の種類を追加 */
hr.dot {
    border-top: 2px dotted #666;
}

hr.hr-bold {
    border-color: #666;
}

hr.solid-orange {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #EA5514;
    border: 0;
    /*デフォルトデザインでは線がある場合があるので、消しておく。*/
}

hr.solid-mint-green {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #58B3AC;
    border: 0;
    /*デフォルトデザインでは線がある場合があるので、消しておく。*/
}

.icon-gray {
    color: #595757;
    font-size: 1.5rem;
}

/* 文字色の追加 */
.text-red {
    color: #E73836;
}

.text-orange {
    color: #EA5514;
}

.text-gold-brown {
    color: #F39800;
}

.text-lime {
    color: #000;
    font-weight: bold;
}

.text-middle {
    vertical-align: middle;
}

.large {
    font-size: 1.5rem;
}

.text-little-small {
    font-size: 0.9rem;
}

/* 段落の間隔を狭くする */
div.narrow-interval p {
    margin: 0em 0px;
}

/* ボタンの色の追加 */
.btn-lively-orange {
    color: #fff;
    background-color: #EA5514;
    border-color: #EA5514;
}

.btn-lime {
    color: #fff;
    background-color: #89B929;
    border-color: #89B929;
}

.btn-light-gray {
    color: #fff;
    background-color: #9FA0A0;
    border-color: #9FA0A0;
}

.btn-sea-green {
    color: #fff;
    background-color: #57B3AD;
    border-color: #57B3AD;
}

.btn-indigo-blue {
    color: #fff;
    background-color: #EA5514;
    border-color: #EA5514;
}

.btn-gris-flanelle {
    color: #666;
    background-color: #fff;
    border-color: #666;
}

.footer {
    border-top: solid 1px #9FA0A0;
    text-align: right;
    margin-top: 20px;
}

#pagination-demo {
    display: inline-block;
    margin-bottom: 1.75em;
}

#pagination-demo li {
    display: inline-block;
}

/*注意文 「東京ディズニーリゾート1DAYパスポート ペア」のお届けについて 20.10.29追加*/
.notes-box {
    /*枠*/
    background-color: #fff;
    border: solid 5px #ED1D00;
    margin-bottom: 1rem;
}

@media screen and (max-width: 560px) {
    .notes-box {
        border: solid 1px #ED1D00;
    }
}

.tdr-jtb-notes-box {
    /*枠*/
    background-color: #fff;
    margin-bottom: 1rem;
}

.notes-heading {
    /*見出し*/
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #EF1D02;
    margin: 0;
    padding: 1% 2%;
    box-sizing: border-box;
}

.notes-txt {
    /*テキスト*/
    margin: 0;
    padding: 2%;
}

.notes-important {
    display: inline-block;
    color: #ED1D00;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.notes-supplement {
    display: inline-block;
    font-size: .8rem;
    margin-top: 5px;
}

.notes-txt-2 {
    /*マーカー*/
    padding: 0;
    background: linear-gradient(transparent 70%, #FFFF00 0%);
}

.notes-txt-3 {
    /*補足テキスト*/
    color: #6c757d;
}

.notes-list {
    list-style: none;
    padding-left: 10px;
}

.guidance-heading {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
}

.guidance-box {
    border: solid 1px #ED1D00;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px;
}

.guidance-txt {
    margin-top: 10px;
    margin-bottom: 0;
}

.guidance-supplement {
    color: #ED1D00;
}

/*D ラインで贈るボタン 21.01.27追加*/
#btn-line.btn-success {
    color: #fff;
    background-color: #43BA4D;
    border-color: #43BA4D;
}

#btn-line.btn-success .btn-group-lg>.btn,
.btn-lg {
    padding: 0.5rem 0 !important;
}

/*D メールで贈るボタン 21.01.27追加*/
#btn-mail.btn-success {
    color: #fff;
    background-color: #557FED;
    border-color: #557FED;
}

#btn-line.btn-success .btn-group-lg>.btn,
.btn-lg {
    padding: 0.5rem 0 !important;
}

/*D 必ずお読みください 上書き 21.01.27追加*/
#box-d_attention {
    border: 1px solid #EFE4AB;
    margin-bottom: 50px;
}

#box-d_attention>div:first-child {
    background: #F9F3D4 !important;
    border-bottom: none !important;
}

.new-product-info {

    text-align: center;
}

.new-product-info::after {
    content: "⬇︎";
    margin-left: 10px;
}

/* プラン */

.plan-banner {
    border-radius: 7px;
    box-shadow: 0px 3px 6px #00000078;
    box-sizing: border-box;
    margin-bottom: 25px;
    padding: 20px 0;
}

.plan-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 991px) {
    .plan-list {
        flex-direction: column;
    }
}

.plan-list li {
    width: calc((100% - 20px) / 2);
    margin-bottom: 30px;
}

@media screen and (max-width: 991px) {
    .plan-list li {
        width: 100%;
    }
}

.plan-btn {
    border-radius: 7px;
    box-shadow: 0px 3px 6px #00000078;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-align: left;
    width: 100%;
    padding: 20px;
    position: relative;
}

.plan-btn:hover {
    opacity: .7;
}

.plan-btn::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
}

.plan-btn.catalog::after {
    border-left: 18px solid #F37018;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.plan-btn.point::after {
    border-left: 18px solid #8FAA2C;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.plan-btn.coupon::after {
    border-left: 18px solid #D9951E;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.plan-btn.without-change::after {
    border-left: 18px solid #60B3C1;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.catalog {
    background-color: #FEDBB7;
    border: solid 3px #F37018;
}

.point {
    background-color: #DAF186;
    border: solid 3px #8FAA2C;
}

.coupon {
    background-color: #FFF08E;
    border: solid 3px #D9951E;
}

.without-change {
    background-color: #C2F1F9;
    border: solid 3px #60B3C1;
}

.discontinued {
    cursor: none;
    pointer-events: none;
    position: relative;
}

.discontinued::before {
    content: "申し訳ございません。ご当選商品は廃番のため、他のプランをご選択ください。";
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: 1;
}

.discontinued::after {
    content: '';
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.plan-pop {
    background-color: #EF1D02;
    border: solid 3px #EF1D02;
    box-sizing: border-box;
    border-radius: 20px;
    color: #fff;
    padding: 3px 10px;
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateY(-50%);
}

.plan-pop::before {
    background: url('/img/icon/i-crown.png') no-repeat center center/cover;
    content: '';
    display: inline-block;
    width: 22px;
    height: 16px;
}

.plan-simply {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 20px;
    color: #333;
    padding: 3px 10px;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
}

.point .plan-simply {
    border: solid 3px #8FAA2C;
    left: 140px;
}

.catalog .plan-simply {
    border: solid 3px #F37018;
    left: 20px;
}

.coupon .plan-simply {
    border: solid 3px #D9951E;
    left: 20px;
}

.without-change .plan-simply {
    border: solid 3px #60B3C1;
    left: 20px;
}

.plan-name {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    margin: 0;
}

.plan-name span {
    display: block;
    font-size: .9rem;
    font-weight: normal;
}

.plan-title {
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
}

.plan-ranking {
    color: #F37018;
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 20px;
    padding-bottom: 20px;
}

.plan-rank {
    font-size: 1.8rem;
    font-weight: bold;
    position: absolute;
    top: 10px;
    left: 20px;
}

.plan-rank span {
    font-size: 1.2rem;
}

.catalog .plan-rank {
    color: #FF3B20;
}

.point .plan-rank {
    color: #29802B;
}

.coupon .plan-rank {
    color: #854113;
}

.without-change .plan-rank {
    color: #258092;
}

.plan-btn-label {
    display: block;
    color: #333;
    font-size: 1.3rem;
    font-weight: bold;
}

.plan-btn-supplement {
    display: inline-block;
    color: #333;
    font-size: .8rem;
    height: calc(.8rem * 1.5 * 2);
}

@media screen and (max-width: 991px) {
    .plan-btn-supplement {
        height: auto;
    }
}