@charset "utf-8";
@import url("header.css");
@import url("footer.css");


/*★テスト用*/
#mock_widthtxt {
    font-size: 1.4rem;
    color:#eee;
    margin-left: 10px;
    font-weight: normal;
}

/**********************************************/
/**/
/**********************************************/
@font-face {
    font-family: BMWGroupTNCondensedProTT-Bold;   
    src: url("/ODDR/fonts/BMWGroupTNCondensedProTT-Bold.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNCondensedProTT-Regular;   
    src: url("/ODDR/fonts/BMWGroupTNCondensedProTT-Regular.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNCondensedProTT-Light;   
    src: url("/ODDR/fonts/BMWGroupTNCondensedProTT-Light.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNCondensedProTT-Thin;
    src: url("/ODDR/fonts/BMWGroupTNCondensedProTT-Thin.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNTT-Bold;
    src: url("/ODDR/fonts/BMWGroupTNTT-Bold.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNTT-Light;
    src: url("/ODDR/fonts/BMWGroupTNTT-Light.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNTT-Regular;
    src: url("/ODDR/fonts/BMWGroupTNTT-Regular.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNTT-Thin;
    src: url("/ODDR/fonts/BMWGroupTNTT-Thin.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNCondensedTT-Bold;
    src: url("/ODDR/fonts/BMWGroupTNCondensedTT-Bold.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNCondensedTT-Light;
    src: url("/ODDR/fonts/BMWGroupTNCondensedTT-Light.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNCondensedTT-Regular;
    src: url("/ODDR/fonts/BMWGroupTNCondensedTT-Regular.ttf") format("truetype");
}
@font-face {
    font-family: BMWGroupTNCondensedTT-Thin;
    src: url("/ODDR/fonts/BMWGroupTNCondensedTT-Thin.ttf") format("truetype");
}

* {
    box-sizing: border-box;
}

* html body {
	overflow: hidden;
}

html {
    position: relative;   
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /*max-width: 1800px;*/
	margin:0 auto;
	padding:0;
    color:#494949;
    font-size: 1.6rem;
    line-height: 1.6;    
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";    
    overflow-x: hidden;
    font-family: BMWGroupTNCondensedTT-Regular,"Arial",'游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    position: relative;
    z-index: 0;
}

a {
    color: #666666;
    text-decoration: none;
}
a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
}
a:hover {
    -webkit-transition: all .5s;
    transition: all .5s;
    color:#000;
}

/*見出し*/
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    line-height: 120%;
}

.h1 {
    font-size: 3.6rem;
}
.h2 {
    font-size: 2.8rem;
}
.h3 {
    font-size: 2.4rem;
}
.h4 {
    font-size: 2.2rem;
}
.h5 {
    font-size:2.0rem;
}
.h6 {
    font-size:1.8rem;
}

form {
    margin:0;
    padding: 0;
}

img {
    border-width:0;
    max-width: 100%;
    height: auto;
}

p  {
    line-height: 140%;
}

li {
    line-height: 140%;  
}

figure {
    margin: 0;
    padding: 0;
}
figure img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
figcaption {
    font-size: 1.4rem;
    line-height: 140%;
    margin-top: 20px;
}
figure~figure {
    margin-top: 50px;
}

/*区切り*/
.section {
    margin: 50px auto 50px;
}

/*横並び*/
.row {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;    
}

/*リンク*/
.link {
    text-decoration: underline;
}


/*ヘッドライン*/
.headline {
	font-family: BMWGroupTNCondensedTT-Regular, sans-serif;
    font-size: 2.4rem;
	line-height: 26px;
	color: #444444;
    margin-bottom: 30px;
}

/*セクションヘッドライン*/
.section-headline {
	font-family: BMWGroupTNCondensedTT-Regular, sans-serif;
	font-size: 2.0rem;
	line-height: 26px;
	color: #444444;
    margin-bottom: 30px;
}

/*コンテンツ*/
main {    
    width: calc(100% - 96px - 96px);
    margin: 0 auto;
}
.wrapper {
    display: flex;    
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*----------------------*/
/* 「*」マークつきリスト*/
/*----------------------*/
ul.notes {
    margin-left:0;
    margin-right: 0;
    padding: 0;
    list-style-type: none;
}
ul.notes li {
    margin-bottom: 5px;
    margin-left: 1em;
    text-indent: -1em;
}
ul.notes li:before {
    display: inline;
    content: "*";
    padding-right: 3px;
}


/*----------------------*/
/* フォーム部品*/
/*----------------------*/
input[type="text"] {
    width: 100%;
    max-width: 300px;
    padding: 5px 10px;
    line-height: 100%;
    font-size:1.6rem;
    border:1px #999 solid;
}

input[type="date"] {
    width: 100%;
    max-width: 300px;
    padding: 5px 10px;
    line-height: 100%;
    font-size:1.6rem;
    border:1px #999 solid;

    font-family: BMWGroupTNCondensedTT-Regular,"Arial",'游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/*ボタン*/
input[type="submit"] {
    cursor: pointer;
    font-size:1.4rem;
    line-height: 100%;
    color:#fff;
    padding: 12px 50px 12px 14px;
    border-radius: 4px;
    background:url("/ODDR/img/button-carrow-white.png") no-repeat 94% center;
    background-size: 17px;
    border:1px #035970 solid;
    background-color:#035970;
}

input[type="button"] {
    cursor: pointer;
    font-size:1.4rem;
    line-height: 100%;
    color:#fff;
    padding: 12px 50px 12px 14px;
    border-radius: 4px;
    background:url("/ODDR/img/button-carrow-white.png") no-repeat 94% center;
    background-size: 17px;
    border:1px #035970 solid;
    background-color:#035970;
}

/*ボタン:hover*/
input[type="submit"]:hover {
    cursor: pointer;
    font-size:1.4rem;
    line-height: 100%;
    color:#fff;
    padding: 12px 50px 12px 14px;
    border-radius: 4px;
    background:url("/ODDR/img/button-carrow-white.png") no-repeat 94% center;
    background-size: 17px;
    border-color:#004750;
    background-color: #004750;
}

/*ボタン:disabled*/
input[type="submit"]:disabled {
    border-color:#b3cdd4;
    background-color: #b3cdd4;
}
input[type="button"]:disabled {
    border-color:#b3cdd4;
    background-color: #b3cdd4;
}

/*必須マーク*/
.required {
    background-color: #E96D0C;
    color:#fff;
    padding: 3px 6px;
    font-size:1.1rem;
    line-height: 100%;
    border-radius: 50px;
    font-weight: normal;
}

/*入力例*/
.ex {
    line-height: 100%;
    font-size: 1.4rem;
}
::placeholder {
    color:darkgrey;
    font-size: 1.4rem;
}


/*----------------------*/
/*ツールチップ*/
/*----------------------*/
.tooltip-pop {
    position: relative;
    cursor: pointer;
    padding: 0 5px;
    font-size: 1.4rem;
    line-height: 140%;
    text-align: center;
}
.description_top {
    width: 100%;
    max-width: 200px;
    position: absolute;
    left: 50%;
    bottom: 80%;
    transform: translateX(-50%);  
    margin-bottom: 20px;
    padding: 8px;
    border-radius: 10px;
    background-color: #999;
    color:#fff;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    transition: 0.5s all;
}
.tooltip-pop:hover .description_top {
    bottom: 100%;
    visibility: visible;
    opacity: 1;
    border:1px #999 solid;
}
  
/*▼マーク*/
.description_top:after{
    content: "";
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #999 transparent transparent transparent;
    border-width: 10px 10px 0 10px;
}


/*---------------------------------*/
/*プログレスバー*/
/*---------------------------------*/
.progressbar {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.progressbar li {
    position: relative;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
    width: 25%;
    color: #999999;
    font-weight: bold;
}
/*丸*/
.progressbar li::before {
    display: block;
    width: 18px;
    height: 18px;
    margin: 7px auto 20px auto;
    content: '';
    text-align: center;
    border-radius: 50%;
    background-color: #F5F5F5;
}
/*横線*/
.progressbar li::after {
    position: absolute;
    z-index: -1;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    content: '';
    background-color: #F5F5F5;
}
.progressbar li:first-child::after {
    content: none;
}

/*文字の色*/
.progressbar li.active {
    color: #3863d3;
}
.progressbar li.active::before {
    background-color: #3863d3;
}
.progressbar li.active::after {
    background-color: #3863d3;
}

/*バーの色*/
.progressbar li.complete {
    color: #3863d3;
}
.progressbar li.complete::before {
    background-color: #3863d3;
}
.progressbar li.complete::after {
    background-color: #3863d3;
}



/*---------------------------------*/
/*概要*/
/*---------------------------------*/
.overview .row {
    border-bottom: 1px #ddd solid;
    padding: 10px 0;
}
.overview .row dt {
    width: 220px;
    margin: 0;
    text-indent: 1em;
    font-size: 1.8rem;
}
.overview .row dd {
    width: calc(100% - 220px);
    margin: 0;
}
.overview .row dd ul {
    margin-top: 0;
    margin-bottom: 0;
}


/*---------------------------------*/
/*生年月日入力項目*/
/*---------------------------------*/
.entry {
    padding: 20px;
    background-color: #f2f2f2;
    border-radius: 10px;
}
.entry .row {
    align-items: center;
}
.entry .row dt {
    width: 260px;
    margin: 0 20px 0 0;
    font-size: 2.0rem;
    font-weight: bold;
}
.entry .row dd {
    width: calc(100% - 260px - 20px);
    margin: 0;
    padding: 0;
}

/*生年月日選択*/
.birthday {
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;    
    align-items: center;
}
#calendar {
    max-width: 200px;
    font-size:1.8rem;
    margin-right:15px;
}

/*必須入力*/
.entry .row dt .required {
    margin-left: 10px;
}
/*注意事項*/
.entry .row dt .ex {
    margin-left: 10px;
}


/*---------------------------------*/
/*本人認証*/
/*---------------------------------*/
/*エラーメッセージ*/
.entry .err {
    margin-top: 10px;
}


/*---------------------------------*/
/*契約番号*/
/*---------------------------------*/
.contract {
    padding: 20px;
    background-color: #f2f2f2;
    border-radius: 10px;
}
.contract .row {
    align-items: center;
}
.contract .row dt {
    width: 400px;
    margin: 0 20px 0 0;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 100%;
}
.contract .row dd {
    width: calc(100% - 400px - 20px);
    margin: 0;
    padding: 0;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    align-items: center;
}

.contract-match {
    background-color: #999;
    line-height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}
.contract .row dt label {
    width: 140px;
    padding: 0 20px;
    text-align: center;
    color: #fff;   
}

/*契約番号*/
#contractNumber {
    width: 100%;
    max-width: calc(100% - 140px);
    border-width: 0;
    padding: 5px 20px;
    font-size:1.8rem;
}
#contractNumber:disabled {
    background-color: #fff;
    color:#000;
}


/*---------------------------------*/
/*メッセージ*/
/*---------------------------------*/
.message {
    width: 100%;    
    display: flex;
    align-items: center;
}
.message span {
    /*display: flex;*/
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 100px;
    color:#fff;
    margin-right: 6px;
    line-height: 100%;
}

/*認証済み*/
#verified {
    color:#508130;
}
#verified span {
    background-color:#508130;   
}

/*エラー*/
.err {
    color:#B11926;
}
.err span {
    background-color: #B11926;
}

/*認証*/
.verification {}



/*---------------------------------*/
/*お手続き完了画面*/
/*---------------------------------*/
.complete-box #banner {
    width: calc(8.333% * 4);
}
.complete-box .information {
    width: calc(8.333% * 8 - 30px);
    margin-left: 30px;
}



/*---------------------------------*/
/*ヘルプ*/
/*---------------------------------*/
#help {
    margin-top: -20px;
}

/*レイアウト*/
#faqbox {
    width:calc(50% + 24px);
    margin-right: 48px;
    margin-top: 0;
}
#contactbox {
    width: calc(50% - 48px - 24px);
    margin-top: 0;
}

/*お問い合わせ*/
.phone {
    margin: 0;
    padding: 0;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.phone dt {
    width: 100px;
    margin-right: 10px;
    display: flex;
    justify-content: space-between;
}
.phone dd {
    margin: 0;
    width: calc(100% - 100px - 10px);
}
.phone .none {
    visibility: hidden;
}


/*質問一覧*/
.qa {
    margin: 0;
    border-top: 1px #d6d6d6 solid;
    border-right: 1px #d6d6d6 solid;
    border-left:4px #d6d6d6 solid;
}
.qa:last-child {
    border-bottom: 1px #d6d6d6 solid;
}
.qa dt {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;    
}
.qa dt .qa-title {
    width: calc(100% - 80px);
    
    display: flex;
    align-items: center;
    padding: 10px 20px;    
}
.qa dt .qa-btn {
    width: 80px;    
}
.qa dd {
    margin: 0;
    padding: 0 100px 10px 20px;
}

/*番号*/
.qa .number {
    margin-right: 10px;
    width: calc(30px - 10px);
    text-align: center;
}
/*テキスト*/
.qa p {
    width: 100%;
    margin: 0;
}

/*＋-ボタン*/
.qa .ac-btn {
    display: block;
    width: 80px;
    height: 49px;
    margin-bottom: 1px;
}
.qa .plus {
  background:url("/ODDR/img/plus.png") no-repeat center center;
  background-size: 24.5px;
  background-color: #d6d6d6;
}
.qa .plus:hover {
    background:url("/ODDR/img/plus_hover.png") no-repeat center center;
    background-size: 24.5px;
    background-color: #d6d6d6;
}
.qa .plus-on {
  background:url("/ODDR/img/minus.png") no-repeat center center;
  background-size: 24.5px;
  background-color: #d6d6d6;
}
.qa .plus-on:hover {
    background:url("/ODDR/img/minus_hover.png") no-repeat center center;
    background-size: 24.5px;
    background-color: #d6d6d6;
}

/*カレント*/
.current-qa {
    background-color: #f2f2f2;
}
.current-qa dt {
    font-weight: bold;
}

/*CIC*/
.ici {
    margin: 40px 0 0 20px;
}

/*広告*/
#contactbox .ad {
    margin: 60px auto 10px;
}


/*---------------------------------*/
/*広告*/
/*---------------------------------*/
.ad img {
    width: 100%;
    max-width: 552px;  
    display: block;
    margin: 0 auto;
}



/*---------------------------------*/
/*アコーディオンメニュー*/
/*---------------------------------*/
.acmenu {
    margin: 0;
    padding:0;
}
.acmenu dd {
	display:none;
}

/*＋-ボタン*/
.ac-btn {}
.acmenu .plus {
  	cursor:pointer;
}
.acmenu .plus-on {
    cursor:pointer;
}

/*開閉済み*/
.acmenu .active {
    display: block;
}



/****************************/
/*レスポンシブ*/
/****************************/
@media screen and (max-width: 1280px) {
    main {    
        width: calc(100% - 48px - 48px);    
    }
}

@media screen and (max-width: 768px) {

    body {
        font-size: 1.4rem;
    }

    .h1 {
        font-size: 2.6rem;
    }
    .h2 {
        font-size: 2.4rem;
    }
    .h3 {
        font-size: 2.0rem;
    }
    .h4 {
        font-size: 1.8rem;
    }
    .h5 {
        font-size:1.7rem;
    }
    .h6 {
        font-size:1.6rem;
    }

    .headline {
        font-size: 2.0rem;
    }
    .section-headline {
        font-size: 1.8rem;
    }

    main {    
        width: calc(100% - 24px - 24px);
    }

    .overview .row dt {
        width: 180px;
        font-size: 1.6rem;
    }
    .overview .row dd {
        width: calc(100% - 180px);
    }
    .entry .row dt {
        width: 160px;
        margin: 0 20px 0 0;
        font-size: 1.8rem;
        line-height: 100%;
    }
    .entry .row dt label {
        display: block;
        margin-bottom: 5px;
    }
    .entry .row dt .ex {
        margin-left: 0px;
    }
    .entry .row dt .required {
        margin-left: 5px;
    }
    .entry .row dd {
        width: calc(100% - 160px - 20px);
    }

    .verification {
        display: block;
        width: 100%;
        /* margin: 10px auto 0; */
        margin-top: 10px;
    }
    .contract .row dt {
        width: 350px;
        margin: 0 20px 0 0;
    }
    .contract .row dd {
        width: calc(100% - 350px - 20px);
    }

    .contract .row dt label {
        width: 120px;
        padding: 5px 10px;
    }
    #contractNumber {
        width: 100%;
        max-width: calc(100% - 120px);
        padding: 5px 10px;
    }

    #faqbox {
        width: 100%;
        margin-right: 0;
    }
    #contactbox {
        width: 100%;
    }
}

@media screen and (max-width: 680px) {
    .contract .row dt {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .contract .row dd {
        width: 100%;
    }
    .contract .row dt label {
        width: 140px;
        padding: 5px 20px;
    }
    #contractNumber {
        max-width: calc(100% - 140px);
    }
    #confBtn {
        margin: 0 auto;
    }

    .tooltip-pop {
        width: 100%;
        position: static;
        cursor: auto;
        padding: 0;
        text-align: center;
    }
    .description_top {
        width: 100%;
        max-width: 100%;
        position: static;
        left: auto;
        bottom: auto;
        transform: none;  
        margin-bottom: 0;
        padding: 0px;
        border-radius: 0;
        background-color: transparent;
        color:#000;
        visibility: visible;
        opacity: 1;
        transition: none;
        display: block;
        margin-top: 10px;
    }
    .description_top:after{
        display: none;
    }

    .complete-box #banner {
        width: 100%;
        order: 2;
        
    }
    .complete-box .information {
        width: 100%;
        order: 1;
        margin-left: 0px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 480px) {
    .section {
        margin: 30px auto 30px;
    }
    
    .ex {
        font-size: 1.2rem;
    }
    .required {
        padding: 2px 5px;
        font-size:1.0rem;
    }

    .headline {
        font-size: 1.6rem;
    }
    .section-headline {
        font-size: 1.6rem;
    }

    .progressbar li {
        font-size: 1.2rem;
    }
    .progressbar span {
        max-width: 50px;
        display: inline-block;
    }

    .overview .row {
        padding-bottom: 15px;
        margin-bottom: 5px;
    }
    .overview .row dt {
        width: 100%;
        text-indent: 0em;
        margin-bottom: 10px;
        font-weight: bold;
    }
    .overview .row dd {
        width: 100%;
    }
    .overview .row dd ul {
        margin-right: 0;
        margin-left: 20px;
        padding-left: 0;
    }
    .overview .row dd ul li {
        margin-bottom: 10px;
    }
    .overview .row dd ul li:last-child {
        margin-bottom: 0px;
    }

    .entry {
        padding: 20px 15px;
    }
    .entry .row dt label {
        display: inline;
        margin-bottom: 0;
    }
    .entry .row dt .ex {
        margin-left: 10px;
    }
    .entry .row dt {
        width: 100%;
        margin: 0 0 15px;
    }
    .entry .row dd {
        width: 100%;
    }
    #calendar {
        width: 100%;
        max-width: 100%;
    }

    .contract {
        padding: 20px 15px;
    }
    .contract .row dt {
        width: 100%;
        font-size: 1.6rem;
    }
    .contract .row dd {
        width: 100%;
    }

    .contract .row dt label {
        width: 110px;
        padding: 5px 10px;
    }

    #contractNumber {
        max-width: calc(100% - 120px);
        padding: 5px 10px;
    }
    .description_top {
        font-size: 1.2rem;
    }

    .qa dt .qa-title {
        width: calc(100% - 50px);
        padding: 10px 10px;
    }
    .qa dt .qa-btn {
        width: 50px;    
    }
    .qa dd {
        margin: 0;
        padding: 0 20px 10px 20px;
        line-height: 140%;
    }
    .qa .ac-btn {
        width: 50px;
        height: 40px;
    }

    .ici {
        margin: 30px 0 0 0;
    }
}

@media screen and (max-width: 380px) {
}