/* ==========================================================================  Desktops  -------------------------------------------------------------------------- */
* { -webkit-text-size-adjust: 100%; }

/* font-size */
.performance .modal h2, #nav, #news h2, .lineup-modal h3, .lineup-modal .price span { font-size: 16px; }

#news, .concept-modal h4 { font-size: 14px; }

p, #nav .jp, .btn, section, .modal { font-size: 12px; }

.concept .btn, .faq li p, .copyright, .lineup-modal dd, .performance .modal td, .cap { font-size: 10px; }

/* common selector */
body { color: #333; min-width: 0; }

a { color: #003893; cursor: pointer; text-decoration: none; }
a:visited { color: #002560; }
a:hover, a:active, a:focus { color: #004bc6; text-decoration: underline; }
a:hover img { opacity: .8; }

.mt { margin-top: 16px; }

.mb { margin-bottom: 16px; }

.ml { margin-left: 16px; }

.mr { margin-right: 16px; }

::selection { background-color: #fff; color: #333; }

::-moz-selection { background-color: #fff; color: #333; }

#load { background-color: #fff; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* #header */
#header { background-color: #fff; border-top: 1px solid #003495; position: fixed; top: 0; left: 0; width: 100%; height: 53px; z-index: 100; }
#header h1 { position: relative; top: 8px; width: 100%;left:10px; }
#header .close { cursor: pointer; position: absolute; right: 8px; top: 8px; width: 20px; z-index: 3; }
.fb_icon a { position: absolute; left: 10px; top: 10px; width: 30px !important; height: 30px !important;z-index: 100; }
.sns_icon { position: absolute; right: 0px; top: 12px; width:180px !important; height: 30px !important;z-index: 100; }
.sns_icon  a img{  width: 24px !important; height: 24px !important;margin-right:10px;z-index: 100;float: left; }
.sns_icon  a img.youtube{  width: 32px !important; height: 20px !important;margin:2px 10px 0 0;z-index: 100;float: left; }

/* #nav */
#menu { background: url(../images/menu.png) center center no-repeat; background-size: auto 12px; border: solid #003495 2px; display: block; position: absolute; right: 13px; top: 0; width: 27px; height: 27px;}
#menu:active, #menu:focus { opacity: .8; }


#nav { background: #fff; padding: 53px 16px 0; position: fixed; transition: all .3s; left: 0; top: -100%; width: 100%; height: 100%; z-index: 99; }
#nav li { border-bottom: solid 1px #003495; padding-top: 16px; position: relative; }
#nav li:after { content: ""; display: block; position: absolute; left: -2px; bottom: -3px; width: 4px; height: 4px; border-radius: 50%; background: #003495; }
#nav a { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; color: #1e4ba9; padding: 4px 8px 4px; text-decoration: none; }
#nav a div:first-child { width: 100px; }
#nav a .jp { color: #666; }
#nav.active { top: 0; }

/* contents */
#contents .content { margin: 0 auto; padding: 16px; position: relative; min-width: 0; }
#contents .wrap { display: -webkit-flex; display: flex; }
#contents .text { font-weight: bold; line-height: 1.5; }
#contents .btn { cursor: pointer; display: block; font-weight: bold; text-align: center; text-decoration: none; }

/* .top */
.top { position: relative; }

#news { background-color: #f5f5f2; border-top: 1px solid #003495; padding: 16px 8px; }
#news h2 { color: #003495; }
#news li { border-bottom: 1px solid #003495; font-weight: bold; padding: 8px 0; }
#news li:last-child { border: none; }
#news .date { color: #003495; margin-right: 8px; }

/* .concept */
.concept { background: url(../images/bg2.jpg) left top no-repeat #f2c828; background-size: 100% auto; position: relative; }
.concept .cycle { -webkit-flex-grow: 1; flex-grow: 1; text-align: right; }
.concept .about { padding: 8px 0 0 45%; min-height: 130px; }
.concept .point { position: relative; }
.concept .point dl { -webkit-align-items: center; align-items: center; margin-top: -5.33333px; margin-left: -24px; }
.concept .point dt { -webkit-flex-shrink: 0; flex-shrink: 0; }
.concept .point dt img { max-width: none; }
.concept .point dd { -webkit-flex-shrink: 0; flex-shrink: 0; }
.concept .point dd.text { -webkit-flex-shrink: 1; flex-shrink: 1; -webkit-flex-grow: 1; flex-grow: 1; padding: 0 8px; }
.concept .btn { border: 1px solid #fff; color: #fff; line-height: 47px; width: 48px; height: 48px; }
.concept .btn:hover { background-color: #fff; color: #f1c828; }

/* .performance */
.performance { background: url(../images/bg3.jpg) left top; background-size: cover; }
.performance h2 { margin-bottom: 16px; }
.performance .text { color: #fff; margin-bottom: 16px; }
.performance ul { zoom: 1; }
.performance ul:after { content: ""; display: block; clear: both; }
.performance li { float: left; width: 50%; padding-bottom: 8px; }
.performance li:nth-of-type(odd) { padding-right: 4px; }
.performance li:nth-of-type(even) { padding-left: 4px; }
.performance .btn { border: 1px solid #fff; color: #fff; line-height: 36px; width: 100%; height: 36px; }
.performance .btn:hover { background-color: #fff; color: #ee5f32; }

/* .lineup */
.lineup { background-color:#fff; background-size: 100% auto; }
.lineup .content { position: relative; }
.lineup .text { padding-top: 16px; }
.lineup ul { -webkit-flex-wrap: wrap; flex-wrap: wrap; padding-top: 8px; }
.lineup li { padding: 8px 4px; width: 50%; }
.lineup li a { color: #333; }
.lineup li img { margin-bottom: 16px; width: 75%; }
.lineup .wrap li a.btn span.xx-large {line-height: 0.8;}

.old_lineup{border:1px solid #CCC;padding:10px;clear:both;width:70%;margin:30px auto 10px;text-align:center;background:#fff;color:#333;font-size:1.2em;}
.old_lineup h3,.old_lineup a{color:#333;}

/* .faq */
.faq { background: #9e86a8; }
.faq .text { color: #fff; padding: 10.66667px 0; }
.faq dt { background: url(../images/icon-q.png) left 2px no-repeat; background-size: auto 10px; color: #fff; font-weight: bold; margin-bottom: 8px; padding-left: 16px; }
.faq dt:hover, .faq dt.active { color: #300042; }
.faq dd { background: url(../images/icon-a.png) 8px 10px no-repeat #fff; background-size: auto 10px; color: #300042; display: none; font-weight: bold; margin-bottom: 16px; padding: 8px 8px 8px 24px; }
.faq ul { background: #371145; color: #fff; }
.faq ul img { margin-right: 16px; max-width: none; }
.faq li { -webkit-align-items: center; align-items: center; padding: 8px 8px; }
.faq li:nth-of-type(even) { background: #411c4f; }
.faq p { padding-top: 5.33333px; text-align: left; }

/* .shop */
.shop { background: #4c92ce; }
.shop h2 { margin-bottom: 16px; }
.shop #map { margin-bottom: 16px; width: 100%; height: 434px; }
.shop ul { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.shop ul li { padding-bottom: 8px; width: 25%; }
.shop .btn { border: 1px solid #fff; color: #fff; display: block; line-height: 26px; margin: 0 4px; height: 26px; }
.shop .btn:hover { background-color: #fff; color: #4c92cf; }
.shop .marker1 { background: #4c92cf; border-radius: 15px; color: #fff; line-height: 30px; text-align: center; width: 30px; height: 30px; }

/* .contact */
.contact { background: url(../images/bg7.jpg) center top no-repeat #403958; background-size: 100% auto; }
.contact h2 { margin-bottom: 16px; }
.contact .text { color: #fff; margin-bottom: 16px; }
.contact dl { color: #fff; padding-bottom: 16px; }
.contact dl dt { font-weight: bold; padding-bottom: 4px; }
.contact dl dd { padding-bottom: 8px; }
.contact input, .contact textarea { border: none; border-radius: 0; display: block; width: 100%; }
.contact input[type=text], .contact input[type=email] { height: 20px; }
.contact button { background: url(../images/icon-arrow.png) right 10px center no-repeat #7a758a; border: none; color: #fff; display: block; font-weight: bold; margin: 0 auto; width: 140px; height: 44px; }
.contact button:hover, .contact button:active, .contact button:focus { opacity: .8; }

/* #footer */
#footer { background-color: #fff; padding: 8px; text-align: center; width: 100%; }
#footer img { margin-bottom: 4px; }
#footer .copyright { color: #333; }

/* modal */
.modal { background: rgba(255, 255, 255, 0.95); padding: 53px 16px 16px; }
.modal .close { cursor: pointer; position: absolute; right: 16px; top: 16px; width: 20px; z-index: 3; }

.concept-modal .main-image { position: absolute; left: 0; bottom: 0; z-index: 1; }
.concept-modal .content { position: relative; z-index: 2; }
.concept-modal nav { padding: 16px 0; text-align: center; }
.concept-modal nav ul { display: table; margin: 0 auto; }
.concept-modal nav li { display: table-cell; padding: 0 8px; vertical-align: top; }
.concept-modal h4 { color: #fff; padding: 8px 0 16px; }
.concept-modal p { color: #fff; }

.concept1 { background: #ebb0b7; }
.concept1 h3 { margin-top: -16px; }
.concept1 h4 { margin-top: -72px; padding: 0 0 16px 56px; }

.concept2 { background: #95CDE2; }

.concept3 { background: #c6d6b2; }

.performance .modal { background: #fff; }
.performance .inner { padding: 16px 0; }
.performance .inner p { font-weight: bold; margin-bottom: 16px; }
.performance .inner table { width: 100%; }
.performance .inner th { padding: 8px 0; }
.performance .inner td { font-weight: bold; padding: 16px 0; }
.performance .inner .normal { background-color: #eee; color: #999; text-align: center; width: 47%; }
.performance .inner .chacle { background-color: #007dbf; color: #fff; text-align: center; width: 47%; }
.performance .inner .cap { margin: 8px 0; }
.performance .inner .center { text-align: center; }
.performance .inner .arrow { display: block; margin: 16px auto; }
.performance .inner p.arrow { color: #007dbf; margin: 16px; text-align: center; }
.performance .inner .result { border: 1px solid #007dbf; color: #007dbf; margin: 0 auto; padding: 8px 16px; text-align: center; }
.performance .inner .color { color: #007dbf; }

#performance1 { background: #fff url(../images/performance/performance1-img2.png) center bottom no-repeat; background-size: 100% auto; }
#performance1 td:nth-child(2) { text-align: center; }

#performance2 P { zoom: 1; }
#performance2 P:after { content: ""; display: block; clear: both; }
#performance2 P img { float: right; margin: 0 0 8px 8px; }
#performance2 tr { border-bottom: 1px solid #ddd; }
#performance2 tr:first-child { border: none; }
#performance2 td { text-align: center; }
#performance2 td:nth-child(3) { color: #007dbf; }

#performance3 dl { text-align: center; }
#performance3 h3 { margin-bottom: 8px; }

#performance4 .wrap { padding-top: 16px; }
#performance4 .wrap div:first-child { -webkit-flex-shrink: 0; flex-shrink: 0; }
#performance4 .wrap div:first-child img { margin-bottom: 8px; padding-right: 8px; }
#performance4 .wrap h3 { margin-bottom: 8px; }

#performance5 .inner div { margin: 16px 0; }

#performance6 dl, #performance7 dl, #performance9 dl { zoom: 1; }
#performance6 dl:after, #performance7 dl:after, #performance9 dl:after { content: ""; display: block; clear: both; }
#performance6 dl dt, #performance7 dl dt, #performance9 dl dt { float: left; font-weight: bold; }
#performance6 dl dd, #performance7 dl dd, #performance9 dl dd { font-weight: bold; margin: 0 0 8px 60px; }
#performance6 dl dd a img, #performance7 dl dd a img, #performance9 dl dd a img { margin: 0; }

#performance7 div { padding-top: 16px; }

#performance8 .wrap { -webkit-align-items: flex-end; align-items: flex-end; margin-bottom: 16px; }
#performance8 .wrap p { -webkit-flex-shrink: 0; flex-shrink: 0; width: 100/3%; }
#performance8 .wrap p:nth-of-type(2) { -webkit-flex-shrink: 1; flex-shrink: 1; padding: 0 8px; }

#performance9 .main { padding-right: 16px; }

.lineup-modal .main-image { overflow: hidden; margin: 8px 0; position: relative; width: 100%; height: 220px; }
.lineup-modal .main-image div { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; opacity: 0; position: absolute; transition: all .3s; left: 0; width: 100%; height: 100%; }
.lineup-modal .main-image div.active { opacity: 1; }
.lineup-modal .main-image img { display: block; margin: 0 auto; max-width: 80%; }
.lineup-modal dl { display: -webkit-flex; display: flex; font-weight: bold; padding-bottom: 8px; width: 100%; }
.lineup-modal dt { -webkit-flex-shrink: 0; flex-shrink: 0; line-height: 1.5; vertical-align: top; width: 55px; }
.lineup-modal .price dt { padding-top: 5.33333px; }
.lineup-modal dd { -webkit-flex-grow: 1; flex-grow: 1; }
.lineup-modal dd.color { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.lineup-modal dd.color a { color: #333; display: block; font-weight: bold; margin-bottom: 2.66667px; text-decoration: none; width: 50%; }
.lineup-modal dd.color a.row-1 { width: 100% !important;}
.lineup-modal dd.color img { margin-right: 2.66667px; }
.lineup-modal ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.lineup-modal ul li { padding: 2.66667px; width: 25%; }
.lineup-modal ul li a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; border: solid 1px #999; overflow: hidden; width: 100%; height: 61px; }
.lineup-modal ul li img { width: 100%; }

/* .thanks */
.thanks { height: 100%; }
.thanks body { width: 100%; height: 100%; }
.thanks #contents { display: block; width: 100%; height: 100%; }
.thanks #contents .contact { padding: 69px 16px; height: 100%; }
.thanks .back { background: url(../images/icon-arrow2.png) 10px center no-repeat #7a758a; color: #fff; display: block; font-weight: bold; line-height: 44px; margin: 0 auto; text-align: center; text-decoration: none; width: 140px; height: 44px; }
.thanks .back:hover, .thanks .back:active, .thanks .back:focus { opacity: .8; }
.thanks #footer { position: absolute; left: 0; bottom: 0; }


/* .cake add */
.contact .text a { color: #fff;}
.concept .about { padding: 8px 0 20px 0%; min-height: 130px; }

.concept1 p,.concept1 h4 { color: #C52F40; }
.concept2 p,.concept2 h4 { color: #00699E; }
.concept3 p,.concept3 h4 { color: #498640; }



h2.oa{text-align:center;margin:0 0 10px;font-size:1.4em;}


.oa_tbl{background-color:#CCC;font-size:0.9em;margin:0 auto;border-collapse: separate; border-spacing: 1px !important;width:100% !important; }
.oa_tbl th{background-color: #007dbf; color: #fff; text-align: center;padding:10px; }
.oa_tbl td{background-color: #fff; color: #333; text-align: center;padding:10px;  }


.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}