@charset "utf-8";
/* ========================================
トップページ
==========================================*/
/* .top_select_table */
.top_select_table{
font-size: 18px;
display: table;
width: 100%;
line-height: 1;
}
.top_select_table .top_select_table_tr{
display: table-row;
}
.top_select_table .top_select_table_th,
.top_select_table .top_select_table_td{
display: table-cell;
vertical-align: top;
}
.top_select_table .top_select_table_th{
padding: 0.8em 2em 0.8em 0;
text-align: right;
border-right: solid 1px #162143;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
white-space: nowrap;
}
.top_select_table .top_select_table_td{
padding: 0.8em 0 0.8em 2em;
}
.top_select_table .top_select_table_tr:first-child .top_select_table_th,
.top_select_table .top_select_table_tr:first-child .top_select_table_td{
padding-top: 1.2em;
}
.top_select_table .top_select_table_tr:last-child .top_select_table_th,
.top_select_table .top_select_table_tr:last-child .top_select_table_td{
padding-bottom: 1.2em;
}
@media screen and (max-width: 700px) {
.top_select_table,
.top_select_table .top_select_table_tr,
.top_select_table .top_select_table_th,
.top_select_table .top_select_table_td{
display: block;
}
.top_select_table{
font-size: 14px;
}
.top_select_table .top_select_table_tr{
margin: 0 0 15px 0;
}
.top_select_table .top_select_table_tr:last-child{
margin-bottom: 0;
}
.top_select_table .top_select_table_th{
padding: 0 0 0.5em 0;
margin: 0 0 0.8em 0;
border-right: none;
border-bottom: solid 1px #162143;
text-align: left;
}
.top_select_table .top_select_table_td{
padding: 0 !important;
}
}
.top_select_title{
font-size: 18px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
padding: 0 0 0.5em 0;
margin: 0 0 1em 0;
border-right: none;
border-bottom: solid 1px #162143;
text-align: left;
}
@media screen and (max-width: 700px) {
.top_select_title{
font-size: 15px;
/*margin: 0 0 0 0;*/
}
}
/* .link_list */
.link_list{
font-size: 15px;
letter-spacing: -0.4em;
margin: 0 0 -1em 0;
}
.link_list li{
white-space: nowrap;
display: inline-block;
vertical-align: top;
padding: 0 1em 0 0;
border-right: solid 1px #ccc;
margin: 0 1em 1em 0;
letter-spacing: normal;
line-height: 1.1;
}
.link_list li:last-child{
border-right: none;
margin-right: 0;
padding-right: 0;
}
@media screen and (max-width: 700px) {
.link_list{
font-size: 12px;
margin: 0;
}
}
/* .top_page_count */
.top_page_count {
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
position: absolute;
top: 0.8em;
right: 0;
color: #c1272d;
font-size: 24px;
line-height: 1;
}
.top_page_count span {
font-size: 50%;
color: #162143;
}
@media screen and (max-width: 700px) {
.top_page_count {
font-size: 14px;
}
.top_page_count span {
font-size: 12px;
}
}
/* top_btn_area */
.top_btn_area{
position: absolute;
top: 0;
right: 0;
margin: 0;
}
@media screen and (max-width: 700px) {
.top_btn_area{
position: static;
text-align: center;
margin: 30px 0 0 0;
}
}
/* .top_slide_content */
.top_slide_content{
position: absolute;
z-index: 100;
width: 100%;
left: 0;
top: 30px;
padding: 0 20px;
}
#toppage_slider_wrap .logo{
text-align: center;
margin: 0 0 20px 0;
font-family: "GJ Futo Go B101",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 17px;
color: #ffffff;
line-height: 1;
}
#toppage_slider_wrap .logo > *{
display: block;
}
#toppage_slider_wrap .logo .text01{
margin: 0 0 1.4em; 0;
}
#toppage_slider_wrap .logo .text02 img{
width: 13.3em;
height: 8.06em;
}
.top_slide_content #top_nav_wrap {
max-width: 1000px;
margin: 0 auto;
}
.top_slide_content #top_nav_inner {
width: 100%;
display: table;
/*padding: 5px 0;*/
border-top: solid 2px #fff;
border-bottom: solid 2px #fff;
}
.top_slide_content #top_nav {
display: table-row;
}
.top_slide_content #top_nav li {
display: table-cell;
width: 16.6%;
/*border-right: solid 2px #fff;*/
}
.top_slide_content #top_nav li:last-child {
border-right: none;
}
.top_slide_content #top_nav li a {
position: relative;
display: block;
width: 100%;
height: 100%;
text-align: center;
font-size: 17px;
color: #fff;
padding: 5px;
}
.top_slide_content #top_nav li a span{
position: relative;
z-index: 2;
display: block;
text-align: center;
line-height: 1;
padding: 4px;
white-space: nowrap;}
.top_slide_content #top_nav li a:after{
content: "";
position: absolute;
top: 5px;
right: 0;
width: 2px;
height: calc(100% - 10px);
background: #ffffff;
}
.top_slide_content #top_nav li a:before{
content: "";
opacity: 0;
position: absolute;
top: 0;
left: -2px;
width: calc(100% + 2px);
height: 100%;
background: #ffffff;
}
.top_slide_content #top_nav li:first-child a:before{
width: 100%;
left: 0;
}
.top_slide_content #top_nav li a:hover:before{
opacity: 1;
}
.top_slide_content #top_nav li:last-child a:after{
display: none;
}
.top_slide_content #top_nav li a:hover {
text-decoration: none;
background-color: #ffffff;
color: #000000;
}
@media screen and (max-width: 900px) {
.top_slide_content #top_nav li a {
font-size: 13px;
}
}
@media screen and (max-width: 700px) {
#toppage_slider_wrap {
position: relative;
height: 220px;
}
#toppage_slider_wrap .toppage_slider figure {
background-position: center center;
}
#toppage_slider_wrap .main_search{
display: none;
}
#toppage_slider_wrap .logo{
font-size: 12px;
margin-bottom: 0;
}
.top_slide_content{
top: 48px;
}
.top_slide_content #top_nav_wrap{
display: none;
}
}
/* ========================================
toppage_slider_wrap
==========================================*/
#toppage_slider_wrap {
position: relative;
height: 694px;
}
/* --------------------------------------------------------------
toppage_slider
--------------------------------------------------------------*/
.toppage_slider figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
/* --------------------------------------------------------------
main_search
--------------------------------------------------------------*/
.main_search {
width: 100%;
z-index: 2;
position: absolute;
bottom: 18px;
left: 0;
padding: 0 20px;
}
.main_search .inner {
max-width: 1000px;
margin: 0 auto;
position: relative;
color: #fff;
}
.main_search .inner h2 {
display: inline-block;
font-size: 31px;
margin: 0 35px 0 20px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.main_search .inner dl {
display: inline-block;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.main_search .inner dl dt {
display: inline-block;
font-size: 18px;
}
.main_search .inner dl dd {
display: inline-block;
font-size: 28px;
}
.main_search .inner dl dd span {
font-size: 19px;
}
/* .link_tab_zone */
.link_tab_zone{
margin: 5px 0 0 0;
font-size: 24px;
}
@media screen and (max-width: 900px) {
.link_tab_zone{ font-size: 20px; }
}
@media all and (max-width: 800px) {
.link_tab_zone{ font-size: 15px; }
}
.link_tab_zone .link_tab_area{
position: relative;
padding: 0 10px;
}
.link_tab_zone .link_tab_area_left{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 10px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
border-left: 2px solid #ffffff;
-moz-border-radius: 6px 0 0 6px;
-webkit-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
cursor: pointer;
}
.link_tab_zone .link_tab_area_right{
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 10px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
border-right: 2px solid #ffffff;
/*background: #2e3192;*/
-moz-border-radius: 0 6px 6px 0;
-webkit-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
cursor: pointer;
}
.link_tab_zone .link_tab_wrap{
overflow: hidden;
}
.link_tab_zone .link_tab_list {
margin: 0 0 0 -3%;
white-space: nowrap;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: 106%;
-moz-transform: skewX(28deg);
-webkit-transform: skewX(28deg);
-o-transform: skewX(28deg);
-ms-transform: skewX(28deg);
transform: skewX(28deg);
display: table;
table-layout: fixed;
}
.link_tab_zone .link_tab_title{
display: table-cell;
padding: 0 5px 0 0;
height: 100%;
}
/*
.link_tab_zone .link_tab_title.title01{
width: 30%;
}
.link_tab_zone .link_tab_title.title04{
width: 16%;
}*/
.link_tab_zone .link_tab_title:last-child{
padding: 0;
}
.link_tab_zone .link_tab_title_switch{
display: block;
padding: calc(1.125em - 2px);
height: 3.25em;
color: #ffffff;
border: 2px solid #ffffff;
text-align: center;
line-height: 1;
cursor: pointer;
}
.link_tab_zone .link_tab_title.active .link_tab_title_switch,
.link_tab_zone .link_tab_title.hover .link_tab_title_switch{
background: #162143;
}
.link_tab_zone .link_tab_area_left.hover,
.link_tab_zone .link_tab_area_left.active,
.link_tab_zone .link_tab_area_right.hover,
.link_tab_zone .link_tab_area_right.active{
background: #162143;
}
.link_tab_zone .link_tab_title_text{
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transform: skewX(-28deg);
-webkit-transform: skewX(-28deg);
-o-transform: skewX(-28deg);
-ms-transform: skewX(-28deg);
transform: skewX(-28deg);
position: relative;
display: inline-block;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
padding: 0 1.87em 0 0;
}
.link_tab_zone .link_tab_title_text:after{
content: "";
position: absolute;
right: 0;
top: 50%;
margin: -0.625em 0 0 0;
width: 1.25em;
height: 1.25em;
background-image: url(../img/link_nav_arrow01.png);
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
}
.link_tab_zone .link_tab_title.title04 .link_tab_title_text:after{
display: none;
}
.link_tab_zone .link_tab_title.title04{
background: #2e3192;
}
.link_tab_zone .link_tab_title.title01 .link_tab_title_text{
margin: 0 0 0 0;
}
.link_tab_zone .link_tab_title.title04 .link_tab_title_text{
margin: 0 0 0 -0.65em;
padding: 0;
}
.popup_zone .relation{
display: none;
}
/* .popup_zone */
.popup_zone{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
padding: 100px 20px;
overflow-y: scroll;
display: none;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.popup_zone .popup_bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 300%;
background: rgba(0,0,0,0.8);
z-index: 1;
}
.popup_zone .popup_wrap{
position: relative;
z-index: 2;
margin: 0 auto;
max-width: 1100px;
}
.popup_zone .popup_content_wrap{
background: #ffffff;
padding: 50px;
}
@media screen and (max-width: 900px) {
.popup_zone .popup_content_wrap{
padding: 20px;
}
}
@media all and (max-width: 800px) {
.link_tab_zone{ font-size: 15px; }
}
@media screen and (max-width: 700px) {
.link_tab_zone{ font-size: 10px; }
.link_tab_zone .link_tab_area_right{
background: none;
}
.link_tab_zone .link_tab_title.title04{
display: none;
}
.link_tab_zone .link_tab_title:nth-child(3){
padding: 0;
}
.popup_zone .maker_nav_head{
display: block;
}
.popup_zone .maker_nav_list{
display: block;
}
.maker_nav_wrap{
}
.popup_zone .bike_search{
padding: 0;
}
}
.popup_content{
display: none;
}
.popup_content.active{
display: block;
}
/* --------------------------------------------------------------
mylist
--------------------------------------------------------------*/
#top_mylist{
padding-top: 30px;
padding-bottom: 30px;
}
#top_mylist .top_mylist {
display: table;
width: 100%;
}
#top_mylist .top_mylist .list {
display: table-cell;
width: 33.2%;
vertical-align: top;
padding: 15px 20px 30px;
border-right: 2px solid #e6e6e6;
background: #fff;
position: relative;
}
#top_mylist .top_mylist li:last-child {
border-right: none;
}
#top_mylist .top_mylist .list_head {
overflow: hidden;
margin: 0 0 15px;
}
#top_mylist .top_mylist .list_head h3 {
padding: 0 0 0 20px;
font-size: 17px;
position: relative;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
#top_mylist .top_mylist .list_head h3:before {
content: "◎";
position: absolute;
top: 0;
left: 0;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
#top_mylist .top_mylist .list_head .btn {
position: absolute;
top: 18px;
right: 15px;
}
#top_mylist .top_mylist .list_head .btn a {
display: block;
font-size: 12px;
color: #fff;
line-height: 1;
padding: 0.4em 1.2em;
background: #f7931e;
}
#top_mylist .top_mylist .nolist {
padding: 30px 0;
text-align: center;
font-weight: bold;
}
#top_mylist .reading_body_title{
font-size: 14px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
/*
.top_mylist .search_history li {
letter-spacing: normal;
font-weight: bold;
margin: 0 0 0.6em 0;
line-height: 1.4;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.top_mylist .search_history li:last-child{
margin-bottom: 0;
}
.top_mylist .search_history .list_disc li {
position: relative;
padding: 0 0 0 15px;
}
.top_mylist .search_history .list_disc li:before {
content: "・";
position: absolute;
top: 0;
left: 0;
color: #0071bc;
}*/
@media screen and (max-width: 900px) {
#top_mylist .top_mylist .list_head h3 {
font-size: 15px;
}
#top_mylist .reading_body_title{
font-size: 13px;
}
#top_mylist .top_mylist .list_head .btn a{
font-size: 11px;
}
}
@media screen and (max-width: 700px) {
#top_mylist{
display: none;
}
#top_mylist .top_mylist {
display: block;
}
#top_mylist .top_mylist .list {
display: block;
width: auto;
border-right: none;
border-bottom: 2px solid #e6e6e6;
}
#top_mylist .top_mylist .list_head h3 {
font-size: 14px;
}
#top_mylist .reading_body_title{
font-size: 13px;
}
#top_mylist .top_mylist .list_head .btn a{
font-size: 10px;
}
}
/* maker_search
--------------------------------------------------------------*/
.maker_search {
}
.maker_nav_wrap {
font-size: 15px;
display: flex;
display: -webkit-flex;
width: 100%;
padding: 0 0 20px;
}
.maker_nav_wrap:last-child{
padding-bottom: 0;
}
.maker_nav_wrap.top {
margin: 0 0 25px;
border-bottom: solid 2px #d9d9d9;
}
.maker_nav_head {
min-width: 10em;
vertical-align: middle;
text-align: center;
}
.maker_nav_head .maker_nav_title {
font-size: 1.33em;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color: #162143;
}
.maker_nav_head .maker_nav_txt {
font-size: 93.3%;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.maker_nav_head .maker_nav_txt a{
color: #808080;
}
.maker_nav_list {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
line-height: 1;
flex-grow: 1;
-webkit-flex-grow: 1;
}
.maker_nav_list li {
padding: 0 0.33em 0.33em 0;
position: relative;
font-weight: normal;
width: 20%;
height: 3.33em;
}
.maker_nav_list li.list a {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
color: #000;
background: #ffffff;
padding: 0.4em;
border: solid 1px #b2b2b2;
height: 100%;
}
.maker_nav_list li.list a {
justify-content: center;
-webkit-justify-content: center;
}
.normal .maker_nav_list li.list a{
transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
-webkit-transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
-moz-transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
-o-transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
-ms-transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
}
.normal .maker_nav_list li.list a:hover{
background-color: #162143;
color: #ffffff;
}
.maker_nav_list li.list .maker_nav_icon {
display: block;
width: 2.4em;
height: 1.67em;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left top;
}
.maker_nav_list li.list .maker_nav_icon {
display: none;
}
.maker_nav_list li.list .maker_nav_name {
font-size: 1em;
line-height: 1;
/*flex-grow: 1;
-webkit-flex-grow: 1;*/
letter-spacing: normal;
/*padding: 0 0 0 0.66em;*/
/*word-break: keep-all;
word-wrap: normal;*/
}
.maker_nav_list li a:hover {
text-decoration: none;
}
/*
.maker_nav_list li.list .maker_nav_name.name1 {
top: 12px;
left: 70px;
}
.maker_nav_list li.list .maker_nav_name.name2 {
top: 12px;
left: 60px;
}
.maker_nav_list li.list .maker_nav_name.name3 {
top: 5px;
left: 56px;
}
.maker_nav_list li.list .maker_nav_name.name4 {
top: 12px;
left: 54px;
}*/
.maker_nav_list li.list .flag_jp {
background-image: url(../img/icon_flag_jp.gif);
}
.maker_nav_list li.list .flag_us {
background-image: url(../img/icon_flag_us.gif);
}
.maker_nav_list li.list .flag_it {
background-image: url(../img/icon_flag_it.gif);
}
.maker_nav_list li.list .flag_de {
background-image: url(../img/icon_flag_de.gif);
}
.maker_nav_list li.list .flag_at {
background-image: url(../img/icon_flag_at.gif);
}
.maker_nav_list li.list .flag_uk {
background-image: url(../img/icon_flag_uk.gif);
}
.maker_nav_list li.list .flag_in {
background-image: url(../img/icon_flag_in.gif);
}
.maker_nav_list li.list .flag_tw {
background-image: url(../img/icon_flag_tw.gif);
}
.maker_nav_list li.more_link a {
display: flex;
display: -webkit-flex;
text-align: center;
height: 100%;
/*height: 41px;*/
font-size: 1.13em;
letter-spacing: normal;
color: #fff;
background: #999;
border-radius: 5px;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
text-decoration: none !important;
}
.maker_nav_list li.more_link a .maker_nav_name{
margin: 0 0.33em 0 0;
}
.maker_nav_list li.more_link a .icon_arrow {
display: block;
width: 1.533em;
height: 1.533em;
background: url(../img/icon_arrow_01.png) no-repeat;
background-size: 100% auto;
}
.maker_nav_list li.more_link a{
transition: opacity 0.4s ease 0s;
-webkit-transition: opacity 0.4s ease 0s;
-moz-transition: opacity 0.4s ease 0s;
-o-transition: opacity 0.4s ease 0s;
-ms-transition: opacity 0.4s ease 0s;
}
.normal .maker_nav_list li.more_link a:hover{
-ms-filter: "alpha(opacity=70)" ;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
@media screen and (max-width: 900px) {
.maker_nav_wrap{
font-size: 13px;
}
.maker_nav_list li {
width: 25%;
}
.maker_nav_list li:nth-child(3n){
margin-right: 0;
}
}
@media screen and (max-width: 700px) {
/* .maker_nav_wrap */
.maker_nav_wrap{
display: block;
font-size: 10px;
}
.maker_nav_head{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
}
.maker_nav_wrap.top{
margin: 0 0 15px 0;
padding: 0 0 15px 0;
}
.maker_nav_head .maker_nav_txt{
flex-grow: 1;
-webkit-flex-grow: 1;
text-align: right;
}
.maker_nav_list li {
width: 33.3%;
}
.maker_nav_list li:nth-child(3n){
padding-right: 0;
}
}
@media screen and (max-width: 700px) {
#toppage_slider_wrap {
position: relative;
height: 220px;
}
.toppage_slider figure {
background-position: center center;
}
}
/* --------------------------------------------------------------
#top_bike_freeword
--------------------------------------------------------------*/
.top_bike_search .search_wrap {
margin: 0 0 10px;
}
.top_bike_search .search_wrap .search_inner {
position: relative;
box-sizing: border-box;
}
.top_bike_search .search_wrap .search_text {
display: block;
box-sizing: border-box;
width: 100%;
font-size: 14px;
padding: 8px 34px 7px 10px;
border-radius: 5px;
}
.top_bike_search .search_wrap .search_submit {
position: absolute;
top: 9px;
right: 10px;
width: 22px;
height: 21px;
cursor: pointer;
background-color: transparent;
background-image: url(../img/icon_search.png);
background-repeat: no-repeat;
background-position: center;
background-size: 22px 21px;
}
.top_bike_search .select_wrap {
width:100%;
margin: 0 0 15px;
}
.top_bike_search .select_wrap ul {
letter-spacing: -0.4em;
}
.top_bike_search .select_wrap ul li {
display: inline-block;
vertical-align: top;
letter-spacing:normal;
width: 49%;
margin: 0 2% 0 0;
}
.top_bike_search .select_wrap ul li:last-child {
margin: 0;
}
.top_bike_search .btn_wrap {
margin: 0 0 20px;
}
.top_bike_search .btn_wrap .btn {
width: 100%;
font-size: 15px;
color: #fff;
padding: 8px;
text-align: center;
border-radius: 5px;
background: #f7931e;
}
.top_bike_search .btn_wrap .btn{
transition: opacity 0.4s ease 0s;
-webkit-transition: opacity 0.4s ease 0s;
-moz-transition: opacity 0.4s ease 0s;
-o-transition: opacity 0.4s ease 0s;
-ms-transition: opacity 0.4s ease 0s;
}
.normal .top_bike_search .btn_wrap .btn:hover{
-ms-filter: "alpha(opacity=70)" ;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.top_other_search {
border-bottom: solid 1px #162143;
margin: 0 0 30px 0;
}
.top_other_search:last-child{
margin-bottom: 0;
}
.top_other_search li {
border-bottom:solid 1px #ccc;
}
.top_other_search li:last-child {
border-bottom:none;
}
.top_other_search li a {
display:block;
padding:10px;
font-size:14px;
background-image: url(../img/icon_arrow_03.png);
background-repeat: no-repeat;
background-position: right;
background-size: 15px 15px;
}
/* --------------------------------------------------------------
#top_bike_category
--------------------------------------------------------------*/
#top_bike_category .img_cover{
padding-bottom: 73%;
height: 0;
background-color: transparent !important;
}
#top_bike_category .cms_list_wrap{
text-align: center;
}
/* --------------------------------------------------------------
ranking
--------------------------------------------------------------*/
#top_ranking .cms_list .img_cover{
padding: 0 0 70% 0;
}
#top_ranking .cms_list_area.ranking_block .cms_list_wrap .img_wrap::after{
top: 0.35em;
left: 0.35em;
right: auto;
}
@media screen and (max-width: 700px) {
#top_ranking .cms_list_area.ranking_block .cms_list_wrap .img_wrap::after{
font-size: 13px;
}
#top_ranking .btn_area{
position: static;
text-align: center;
margin: 30px 0 0 0;
}
}
/* --------------------------------------------------------------
#top_parts_search
--------------------------------------------------------------*/
#top_parts_search .img_cover{
padding-bottom: 73%;
height: 0;
background-color: transparent !important;
}
#top_parts_search .cms_list_wrap{
text-align: center;
}
/* --------------------------------------------------------------
#motorcycle_histry_wrap
--------------------------------------------------------------*/
@media screen and (max-width: 700px) {
#motorcycle_histry_wrap .slick-dots{
display: none !important;
}
#motorcycle_histry_wrap .news_slider.slick-slider.slick-dotted{
padding-bottom: 0;
}
}
/* --------------------------------------------------------------
#bbb_magazine_wrap
--------------------------------------------------------------*/
#bbb_magazine_wrap .mylife_wrap dl {
display: flex;
display: -webkit-flex;
width: 100%;
margin: 0 0 30px;
background: #fff;
}
#bbb_magazine_wrap .mylife_wrap dt,
#bbb_magazine_wrap .mylife_wrap dd{
width: 50%;
min-height: 80px;
}
#bbb_magazine_wrap .mylife_wrap dt .img_cover{
height: 100%;
padding: 0 0 32% 0;
}
#bbb_magazine_wrap .mylife_wrap dd {
font-size: 15px;
color: #162143;
padding: 20px 20px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
@media screen and (max-width: 700px) {
#bbb_magazine_wrap .mylife_wrap dl {
display: block;
}
#bbb_magazine_wrap .mylife_wrap dt {
display: block;
text-align: center;
width: auto;
}
#bbb_magazine_wrap .mylife_wrap dd {
width: auto;
font-size: 12px;
}
}
/* --------------------------------------------------------------
bbb_step
--------------------------------------------------------------*/
#top_bbb_step .bbb_step_list_wrap {
display: flex;
display: -webkit-flex;
background: #ebe9e4;
}
#top_bbb_step .bbb_step_list{
width: 25%;
border-top: 1px solid #e5e3de;
border-bottom: 1px solid #e5e3de;
border-right: 1px solid #e5e3de;
background: #fff;
}
#top_bbb_step .bbb_step_list:first-child {
border-left: 1px solid #e5e3de;
}
#top_bbb_step .step_head {
color: #2a438c;
padding: 10px 25px;
border-radius: 3px 3px 0 0;
background: #f9f8f6;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
#top_bbb_step .step_contents {
padding: 20px 23px;
}
#top_bbb_step .step_head .number{
font-size: 120%;
}
#top_bbb_step .step_contents .step_contents_title {
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size: 128%;
margin: 0 0 0.8em 0;
}
#top_bbb_step .step_contents .text {
margin-bottom: 15px;
}
#top_bbb_step .step_contents a{
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
@media screen and (max-width: 700px) {
#top_bbb_step{
padding-bottom: 0;
}
#top_bbb_step .bbb_step_list_wrap {
display: block;
margin: 0 -15px;
}
#top_bbb_step .bbb_step_list{
width: auto;
border-top: none;
border-bottom: 1px solid #e5e3de;
border-right: none;
border-left: none !important;
}
#top_bbb_step .bbb_step_list:nth-child(2n){
background-color: #eeeeee;
}
#top_bbb_step .step_head{
padding: 10px 15px;
}
#top_bbb_step .step_contents {
padding: 18px 15px;
}
}
/* --------------------------------------------------------------
twitter_bana
--------------------------------------------------------------*/
#footer_sns{
padding-bottom: 50px;
}
.twitter_bana_inner{
display: flex;
display: -webkit-flex;
width: 100%;
}
.twitter_bana_inner .twitter_wrap{
width: 50%;
padding: 0 25px 0 0;
}
.twitter_bana_inner .facebook_wrap{
width: 50%;
padding: 0 0 0 25px;
}
.twitter_bana_inner .twitter_wrap:last-child{
padding: 0;
}
@media screen and (max-width: 700px) {
.twitter_bana_inner{
display: block;
}
.twitter_bana_inner .twitter_wrap{
width: auto;
padding: 0;
margin: 0 auto 30px auto;
}
.twitter_bana_inner .twitter_wrap:last-child{
margin: 0;
}
.twitter_bana_inner .facebook_wrap{
width: auto;
max-width: 500px;
margin: 0 auto;
padding: 0;
}
}
/* --------------------------------------------------------------
tag_wrap
--------------------------------------------------------------*/
.tag_wrap ul {
letter-spacing: -0.4em;
}
.tag_wrap ul li {
display: inline-block;
letter-spacing: normal;
font-size:12px;
width: 44px;
height: 44px;
vertical-align:top;
margin: 0 5px 0 0;
text-align: center;
border-radius: 50%;
}
.tag_wrap ul li.yellow {
line-height:44px;
background:#ffff00;
}
.tag_wrap ul li.green {
line-height:44px;
background:#d9e021;
}
.tag_wrap ul li.light_blue {
padding:7px 0 0 0;
line-height:15px;
background:#96d2dc;
}
/* ==========================================================
検索ページ共通
========================================================== */
.page_list_title.title.type01{
max-width: 1040px;
padding: 0 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
@media screen and (max-width: 700px) {
.page_list_title.title.type01{
padding: 0 15px 15px 15px;
margin-bottom: 0;
}
}
#list_search_wrap{
margin-top: 0;
}
/* =====================================================================
list_search_wrap(検索その1)
======================================================================*/
/* -------------------------------------------------------------
list_search_panel_zone
--------------------------------------------------------------*/
.list_search_panel_zone {
position: relative;
}
.list_search_panel_zone .list_search_panel_wrap{
font-size: 18px;
display: table;
width: 100%;
}
.list_search_panel_zone .list_search_panel_wrap .accordion_wrap .btn_wrap.type_link_arrow{
min-width: 210px;
}
.list_search_panel_zone .checkbox_list_wrap{
font-size: 105.5%;
}
.list_search_panel_zone .list_search_panel_main{
display: table-cell;
vertical-align: top;
}
.list_search_panel_zone .list_search_panel_sub{
display: table-cell;
vertical-align: top;
padding-bottom: 70px;
}
.list_search_panel_zone .list_search_panel_row{
margin: 0 0 25px 0;
}
.list_search_panel_zone .list_search_panel_row:last-child{
margin-bottom: 0;
}
@media screen and (min-width: 701px) and (max-width: 900px) {
.list_search_panel_zone .list_search_panel_wrap{
font-size: 16px;
}
}
#header_common_search .list_search_panel_zone.bike_list .accodion_content{
display: block !important;
}
#header_common_search .list_search_panel_zone.bike_list .accordion_wrap .btn_area{
display: none !important;
}
@media screen and (max-width: 700px) {
.list_search_panel_zone.bike_list .accodion_content{
display: block !important;
}
.list_search_panel_zone.bike_list .accordion_wrap .btn_area{
display: none !important;
}
.list_search_panel_zone .list_search_panel_wrap{
font-size: 14px;
}
.list_search_panel_zone .list_search_panel_wrap{
display: block;
}
.list_search_panel_zone .list_search_panel_main{
display: block;
width: auto !important;
margin: 0 0 20px 0;
}
.list_search_panel_zone .list_search_panel_sub{
display: block;
width: auto !important;
padding-bottom: 0;
}
}
/* .list_search_panel_zone .list_search_panel_item */
.list_search_panel_zone .list_search_panel_item{
display: inline-table;
vertical-align: bottom;
}
.list_search_panel_zone .list_search_panel_item .maker_select_text{
cursor: pointer;
color: #0e7eed;
text-decoration: underline;
}
.list_search_panel_zone .list_search_panel_item .maker_select_text *{
display: inline;
}
.list_search_panel_zone .list_search_panel_item .maker_select_text p:after{
content: ",";
}
.list_search_panel_zone .list_search_panel_item .maker_select_text p:last-child:after{
display: none;
}
.list_search_panel_zone .list_search_panel_item .maker_select_text p.no_list:after{
display: none;
}
.list_search_panel_zone .list_search_panel_item .maker_select_text:hover{
text-decoration: none;
}
.list_search_panel_zone .list_search_panel_item:first-child{
margin: 0;
}
.list_search_panel_zone .list_search_panel_item .item_title{
display: table-cell;
vertical-align: top;
font-size: 105.5%;
line-height: 1.2;
margin-right: 15px;
padding: 0.4em 0;
text-align: right;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
white-space: nowrap;
}
.list_search_panel_zone .list_search_panel_item .item_inner{
display: table-cell;
vertical-align: top;
padding: 0 0 0 1.5em;
white-space: nowrap;
}
.list_search_panel_zone .list_search_panel_item .item_inner > *{
white-space: normal;
}
.list_search_panel_zone .list_search_panel_item .item_inner p{
padding: 0.4em 0 0.4em 0;
}
.list_search_panel_zone .list_search_panel_item .item_inner_in{
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid #999;
}
.list_search_panel_zone .list_search_panel_item .item_inner_in:first-child{
padding-top: 18px;
border-top: 1px solid #999;
}
.list_search_panel_zone .list_search_panel_item .item_inner_in:last-child{
margin-bottom: 0;
}
.list_search_panel_zone .list_search_panel_item .item_inner_in .item_inner_title{
padding: 0;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
margin: 0 0 10px;
line-height: 1;
font-size: 80%;
color: #ed1e79;
}
.list_search_panel_zone .list_search_panel_item .item_inner_in:last-child{
margin-bottom: 0px;
}
@media all and (min-width: 701px) {
.list_search_panel_zone .list_search_panel_sub .list_search_panel_item{
display: block;
}
.list_search_panel_zone .list_search_panel_sub .list_search_panel_item .item_title{
display: block;
margin: 0 0 10px 0;
text-align: left;
width: auto;
}
.list_search_panel_zone .list_search_panel_sub .list_search_panel_item .item_inner{
display: block;
width: auto;
padding: 0;
}
}
@media screen and (max-width: 700px) {
.list_search_panel_zone .list_search_panel_item{
display: block;
white-space: normal;
}
.list_search_panel_zone .list_search_panel_item .item_title{
display: block;
margin: 0 0 10px 0;
padding: 0;
text-align: left;
font-size: 14px;
}
.list_search_panel_zone .list_search_panel_item .item_inner{
display: block;
margin: 0 0 10px 0;
padding: 0;
}
.list_search_panel_zone .list_search_panel_item .item_inner .select_box{
display: block;
}
.list_search_panel_zone .list_search_panel_item .item_inner_in{
margin-bottom: 15px;
}
}
/* list_search_panel_btn_wrap
--------------------------------------------------------------*/
.list_search_panel_btn_wrap {
position:absolute;
right: 0;
bottom: 0px;
}
.list_search_panel_btn_wrap .btn_wrap ul {
display: flex;
display: -webkit-flex;
}
.list_search_panel_btn_wrap .btn_wrap ul li {
margin: 0 10px 0 0;
position:relative;
font-size: 18px;
}
.list_search_panel_btn_wrap .btn_wrap ul li:last-child{
margin: 0;
}
.list_search_panel_btn_wrap .btn {
display: block;
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 10px;
}
.list_search_panel_btn_wrap .btn{
transition: opacity 0.4s ease 0s;
-webkit-transition: opacity 0.4s ease 0s;
-moz-transition: opacity 0.4s ease 0s;
-o-transition: opacity 0.4s ease 0s;
-ms-transition: opacity 0.4s ease 0s;
}
.normal .list_search_panel_btn_wrap .btn:hover{
-ms-filter: "alpha(opacity=70)" ;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
@media screen and (max-width: 700px) {
.list_search_panel_btn_wrap .btn_wrap ul li {
font-size: 14px;
}
}
/* .btn_wrap.type01 */
.list_search_panel_btn_wrap .type01 {
width: 7.77em;
height: 2.22em;
}
.list_search_panel_btn_wrap .type01 .btn {
background-image: -webkit-linear-gradient(top, #727272, #333333);
background-image: linear-gradient(to bottom, #727272, #333333);
}
.list_search_panel_btn_wrap .btn_text {
line-height:2.2;
letter-spacing: 0.025em;
color: #fff;
}
/* .btn_wrap.type02 */
.list_search_panel_btn_wrap .type02 {
width: 13.33em;
height: 2.22em;
padding:0 0 0 1.11em;
}
.list_search_panel_btn_wrap .type02 {
background:-webkit-linear-gradient(top, #6466ae, #2e3192);
background:linear-gradient(to bottom, #6466ae, #2e3192);
}
.list_search_panel_btn_wrap .type02 .icon {
width: 1.56em;
height: 1.56em;
background: url(/common/img/icon/icon_search2.svg);
background-size:100%;
position: absolute;
top: 0.28em;
left: 1.67em;
}
@media all and (max-width: 1000px) {
.list_search_panel_btn_wrap {
position: static;
margin: 15px 0 0 0;
}
}
@media screen and (max-width: 700px) {
.list_search_panel_btn_wrap .type02 {
width: calc(100% - 9em);
}
.list_search_panel_btn_wrap .type02 .icon{
left: 1em;
}
.list_search_panel_btn_wrap .btn_wrap ul li {
margin: 0 1.23em 0 0;
}
}
/* .bike_listに使用しました */
.bike_list .list_search_panel_sub{
width: 260px;
}
.bike_list .list_search_panel_sub .checkbox_content{
width: 6em;
}
.bike_list .item_title{
width: 5em;
}
.bike_list.list_search_panel_zone .list_search_panel_main{
padding-right: 20px;
}
@media screen and (max-width: 700px) {
.bike_list .list_search_panel_row:nth-child(3) .select_box,
.bike_list .list_search_panel_row:nth-child(4) .select_box,
.bike_list .list_search_panel_row:nth-child(5) .select_box,
.bike_list .list_search_panel_row:nth-child(6) .select_box{
display: inline-block;
width: calc(50% - 1em);
}
.bike_list.list_search_panel_zone .list_search_panel_main{
padding-right: 0px;
}
}
/* .parts_listに使用しました */
.list_search_panel_wrap .input_wrap {
position: relative;
box-sizing: border-box;
min-width: 268px;
}
@media screen and (max-width: 700px) {
.list_search_panel_wrap .input_wrap { min-width: 0;}
}
.list_search_panel_wrap .input_wrap .search_submit {
position: absolute;
top: 0.5em;
right: 0.56em;
width: 1.22em;
height: 1.16em;
cursor: pointer;
background-color: transparent;
background-image: url(/common/img/icon_search.png);
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto !important;
display: block;
}
.parts_list .item_title{
width: 6em;
}
.parts_list .list_search_panel_main{
/*width: 550px;*/
padding: 0 50px 0 0;
}
.parts_list .list_search_panel_sub{
width: 370px;
}
@media screen and (max-width: 900px) {
.parts_list .list_search_panel_sub{
width: 210px;
}
}
@media screen and (max-width: 700px) {
.parts_list .list_search_panel_sub{
width: auto;
}
.parts_list .list_search_panel_row:nth-child(3) .select_box{
display: inline-block;
width: calc(50% - 1em);
}
.parts_list .list_search_panel_main{
padding: 0;
}
.parts_list .item_title{
width: auto;
}
.parts_list .list_search_panel_row:nth-child(3) .select_text{
width: 5em;
}
.list_search_panel_wrap .input_wrap .search_submit {
border-radius: 0;
-webkit-appearance: none;
appearance: none;
}
}
/* .shop_listに使用しました */
.shop_list.list_search_panel_zone .list_search_panel_wrap{
display: block;
}
.shop_list.list_search_panel_zone .list_search_panel_main{
position: relative;
display: block;
width: 100%;
}
.shop_list.list_search_panel_zone .list_search_panel_sub{
position: relative;
display: block;
width: 100%;
margin: 30px 0 0 0;
}
.shop_list.list_search_panel_zone .list_search_panel_sub .checkbox_list_wrap{
display: flex;
flex-wrap: wrap;
}
.shop_list.list_search_panel_zone .list_search_panel_sub .btn_area{
position: absolute;
bottom: 0;
left: 0;
margin: 0;
}
.shop_list.list_search_panel_zone .list_search_panel_sub .btn_area .btn_wrap{
margin: 0;
}
.shop_list_accordion .checkbox_list{
}
@media screen and (max-width: 700px) {
.shop_list.list_search_panel_zone .list_search_panel_sub{
margin: 15px 0 0 0;
}
.shop_list.list_search_panel_zone .list_search_panel_sub .btn_area{
position: static;
margin: 15px 0 0 0;
}
.shop_list.list_search_panel_zone .btn_area .btn_wrap.type_link_arrow .btn{
font-size: 14px;
}
}
/* list_search_panel_main
--------------------------------------------------------------*/
/*
.list_search_panel_main {
float:left;
width: 720px;
}*/
.list_search_panel_row.row01 {
margin:0 0 15px;
}
.list_search_panel_row.row02 {
margin:0 0 15px;
}
.list_search_panel_row.row01 .list_search_panel_item {
display:inline-block;
width:330px;
margin:0 20px 0 0;
}
.list_search_panel_row.row02 .list_search_panel_item {
display:inline-block;
width: 700px;
margin:0 20px 0 0;
}
/* .color_picker */
.list_search_panel_row .color_picker {
max-width:480px;
white-space: normal;
}
.color_picker {
white-space: normal;
}
.color_picker .color_picker_list{
letter-spacing: -0.4em;
}
.color_picker .color_picker_list li {
display: inline-block;
vertical-align: top;
margin:0 8px 5px 0;
}
.color_picker .color_picker_list li .label--color {
display: block;
border-radius: 5px;
}
.color_picker li .color_obj_wrap {
position: relative;
display: block;
width: 32px;
height: 32px;
border-radius: 5px;
cursor: pointer;
}
.color_picker li .color_obj_wrap .color_obj {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
text-align: center;
line-height: 32px;
}
.color_picker li input[type=checkbox] {
display: none;
}
.color_picker li:hover .color_obj_wrap {
box-shadow: 0 0 0 4px #f15a24;
}
.color_picker li:hover .color_obj_wrap .color_obj{
box-shadow: 0 0 0 2px #fff;
}
.color_picker li input[type=checkbox]:checked+.color_obj_wrap {
box-shadow: 0 0 0 4px #f15a24;
}
.color_picker li input[type=checkbox]:checked+.color_obj_wrap .color_obj{
box-shadow: 0 0 0 2px #fff;
}
.color_picker .btn_WH .color_obj_wrap{
background:#fff;
}
.color_picker .btn_WH .color_obj_wrap span {
border: 1px solid #444;
}
.color_picker .btn_ZZ3 .color_obj_wrap span {
border: 1px solid #444;
}
.color_picker .btn_BK .color_obj_wrap{
background:#000;
}
.color_picker .btn_RD .color_obj_wrap{
background:#ff0000;
}
.color_picker .btn_BL .color_obj_wrap{
background:#0000ff;
}
.color_picker .btn_GL .color_obj_wrap{
background:#999;
}
.color_picker .btn_GOLD .color_obj_wrap{
background:#c69c6d;
}
.color_picker .btn_ZZ1 .color_obj_wrap{
color: #ffffff;
background: linear-gradient(to right, #ff3236 0%,#ff3236 32%,#1b1464 32%,#1b1464 68%,#f7931e 68%,#f7931e 100%);
}
.color_picker .btn_ZZ2 .color_obj_wrap{
color: #ffffff;
background: linear-gradient(to right, #0000ff 0%,#0000ff 32%,#ffffff 32%,#ffffff 68%,#ff0000 68%,#ff0000 100%);
}
.color_picker .btn_ZZ3 .color_obj_wrap{
background:#fff;
}
.color_picker .btn_ZZ3 .color_obj_wrap .color_obj:after{
content: "他";
color: #000000;
}
.color_picker .btn_ZZ3 input[type="checkbox"] + .color_obj_wrap .color_obj{
border:solid 1px #333;
}
.color_picker .btn_BR .color_obj_wrap {
background:#603813;
}
.color_picker .btn_GR .color_obj_wrap {
background:#39b54a;
}
.color_picker .btn_PU .color_obj_wrap {
background:#9e005d;
}
.color_picker .btn_YL .color_obj_wrap {
background:#fcee21;
}
.color_picker .btn_OR .color_obj_wrap {
background:#f7931e;
}
.color_picker .btn_PI .color_obj_wrap {
background:#f96bb9;
}
@media screen and (max-width: 700px) {
.color_picker li#clother3 input[type="checkbox"] + .label--color > span{
padding: 0px 0 0 4px;
}
.color_picker li input[type=checkbox]+.label--color {
width: 24px;
height: 24px;
}
.list_search_panel_row .color_picker_list{
margin: 0 0 -5px 0;
}
.list_search_panel_row .color_picker{
max-width: none;
}
}
/* list_search_panel_btn_wrap02
--------------------------------------------------------------*/
.list_search_panel_btn_wrap02 .type01 {
margin:0 0 0 120px;
width:180px;
position: relative;
}
.list_search_panel_btn_wrap02 li.type01 .btn {
width:180px;
height: 41px;
font-size: 17px;
text-align:left;
padding:0 0 0 15px;
letter-spacing: normal;
color: #fff;
background: #999;
border-radius: 5px;
}
.list_search_panel_btn_wrap02 li.type01 .btn .icon_arrow {
display: block;
width: 23px;
height: 23px;
position: absolute;
top: 9px;
right: 17px;
background: url(/common/img/icon_arrow_bottom_02.png) no-repeat;
}
/* list_search_panel_detail
--------------------------------------------------------------*/
.list_search_panel_detail {
margin:20px 0 60px;
}
.list_search_panel_detail .checkbox_list ul {
letter-spacing: -0.4em;
}
.list_search_panel_detail .checkbox_list ul li {
display: inline-block;
letter-spacing: normal;
vertical-align: top;
width: 24%;
margin: 0 1% 1% 0;
}
.list_search_panel_detail .checkbox_list ul li:nth-child(4n) {
margin: 0;
}
/* list_search_panel_main
--------------------------------------------------------------*/
@media screen and (max-width: 700px) {
/*#list_search_wrap{
display: none;
}
#list_search_control{
display: none;
}*/
}
/* =====================================================================
#list_search_control(検索 順番並び替え)
======================================================================*/
@media screen and (max-width: 700px) {
#list_search_control .pager_wrap{ display: none; }
}
/* sort_bar_wrap
--------------------------------------------------------------*/
.sort_bar_wrap {
padding:15px 20px;
border-top:solid 4px #999;
background:#eee;
}
.tab_content .sort_bar_wrap{
margin: 20px 0 30px 0;
}
.sort_bar_wrap .sort_bar ul {
letter-spacing: -0.4em;
}
.sort_bar_wrap .sort_bar li {
display: inline-block;
vertical-align: top;
letter-spacing: normal;
font-size:15px;
margin:0 25px 0 0;
}
.sort_bar_wrap .sort_bar li:last-child {
margin:0;
}
.sort_bar_wrap .sort_bar li p {
display: inline-block;
}
.sort_bar_wrap .sort_bar li a {
margin:0 5px;
}
.sort_bar_wrap .sort_bar li a.txt1 {
color:#0071bc;
}
.sort_bar_wrap .sort_bar li a.txt2 {
color:#f15a24;
}
@media screen and (max-width: 700px) {
.sort_bar_wrap {
padding: 0;
border: none !important;
background: none !important;
}
#bike_block_wrap .tab_content .sort_bar_wrap{
margin: 20px 0;
}
#bike_block_wrap .tab_head_wrap {
margin: 0 -15px;
padding: 0 0 0 20px;
}
#bike_block_wrap .tab_head_parts_left{
left: 15px;
width: 5px;
}
}
/* result_bar_wrap
--------------------------------------------------------------*/
.result_bar_zone{
padding: 0 20px;
}
.result_bar_wrap {
position:relative;
margin: 0 auto;
max-width: 1000px;
}
.result_bar_wrap .result_bar_content{
position: absolute;
width: 100%;
left: 0;
top: -118px;
}
.result_bar_wrap .pager_wrap{
position: absolute;
right: 0;
bottom: 0;
z-index: 10;
}
.bike_list_block_type .result_bar_wrap .result_bar_content{
top: -140px;
}
.bike_list_block_type .bike_search_list_block_wrap + .result_bar_wrap .result_bar_content{
top: -28px;
}
@media screen and (max-width: 700px) {
.result_bar_zone{
padding: 15px 15px 0 15px;
}
.result_bar_wrap .result_number_wrap .result_number{
font-size: 30px;
}
.result_bar_wrap .result_bar_content{
position: static;
}
.result_bar_wrap .pager_wrap{
font-size: 11px;
}
}
@media all and (max-width: 500px) {
.result_bar_wrap .pager_wrap{
position: static;
text-align: left;
margin: 10px 0 0 0;
}
}
/* .result_number_wrap*/
.result_number_wrap{
position: relative;
}
.result_number_wrap .result_number {
font-size: 46px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
line-height: 1;
vertical-align: baseline;
}
.result_number_wrap .result_number span {
display:inline-block;
font-size: 56.5%;
padding:0 0 0 5px;
}
@media screen and (max-width: 700px) {
.result_number_wrap .result_number {
position: static;
}
}
/* #list_control */
#list_control{
}
#bike_block_hidden_pager{
display: none;
}
.list_ajax_content.load{
-webkit-transition: opacity 1s ease 0s,transform 1s ease 0s;
-moz-transition: opacity 1s ease 0s,transform 1s ease 0s;
-o-transition: opacity 1s ease 0s,transform 1s ease 0s;
-ms-transition: opacity 1s ease 0s,transform 1s ease 0s;
transition: opacity 1s ease 0s,transform 1s ease 0s;
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-o-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
.list_ajax_content.load.active{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
@media screen and (max-width: 700px) {
#list_control .pager_wrap{
display: none;
}
}
/* #bike_block_wrap */
#bike_block_wrap{
padding-top: 30px;
}
@media screen and (max-width: 700px) {
#bike_block_wrap{
padding-top: 15px;
}
#bike_block_wrap .list_block_zone{
margin: 0 -15px;
}
}
/* #bike_block_pager */
#bike_block_pager{
margin-top: 50px;
}
@media screen and (max-width: 700px) {
#bike_block_pager{
margin-top: 25px;
}
}
/* #list_ajax_btn */
#list_control #list_ajax_btn{
display: block;
margin: 0;
font-size: 18px;
}
#list_ajax_btn .btn_wrap{
width: 100%;
}
#list_ajax_btn .btn{
color: #0071bc;
padding: 1.1em 0;
border-bottom: 1px solid #989898;
}
#list_ajax_btn .btn_text{
padding: 0 1.1em 0 0;
}
#list_ajax_btn .btn_text:after{
content: "";
position: absolute;
top: 50%;
right: 0;
margin: -0.25em 0 0 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0.5em 0.368em 0 0.368em;
border-color: #0071bc transparent transparent transparent;
}
#list_ajax_btn .btn.active .btn_text{
min-width: 6em;
white-space: nowrap;
padding: 0;
}
#list_ajax_btn .btn.active .btn_text:after{
display: none;
}
@media all and (max-width: 1000px) {
#list_control #list_ajax_btn{
font-size: 16px;
}
}
@media screen and (max-width: 700px) {
#list_control #list_ajax_btn{
font-size: 14px;
margin: 0 -20px;
}
}
/* =====================================================================
.bike_block(バイク一覧のブロックに使用されるCSS)
======================================================================*/
/*
-------------------------------------- 共通CSS --------------------------------------
*/
/* bike_block
--------------------------------------------------------------*/
#bike_block_wrap .list_block_wrap.type01 .list_block{
padding-top: 0;
padding-bottom: 0;
}
.bike_block_contents_wrap .link_block{
padding: 30px 15px 30px 15px;
-moz-transition: background-color 0.4s ease 0s;
-webkit-transition: background-color 0.4s ease 0s;
-o-transition: background-color 0.4s ease 0s;
-ms-transition: background-color 0.4s ease 0s;
transition: background-color 0.4s ease 0s;
background-color: #ffffff;
}
.normal .bike_block_contents_wrap .link_block:hover{
background-color: #B8DDE7;
}
.bike_block_contents{
position: relative;
padding: 0 300px 0 30%;
min-height: 188px;
margin:0 0 30px;
}
.bike_block_contents:last-child{
margin: 0;
}
@media screen and (max-width: 700px) {
.bike_block_contents_wrap .link_block{
padding: 15px 15px 15px 15px;
}
#bike_block_wrap .list_block_wrap.type01 .list_block{
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.bike_block_contents p{
min-height: 0;
}
.bike_block_contents{ padding: 0 !important; min-height: 0px !important; margin: 0;}
.bike_block.shop_list .bike_block_head_content{
padding-top: 20px;
}
}
/* .bike_block_info */
.bike_block_info{ }
@media screen and (max-width: 700px) {
.bike_block_info{ margin: 10px 0 0 0;}
}
/* */
.bike_block .bike_block_image{
position: absolute;
top: 0;
left: 0;
width: 28%;
}
.bike_block .bike_block_image p{
margin-top: 10px;
line-height: 1;
}
@media screen and (max-width: 700px) {
.bike_block .bike_block_image{ position: static; float: left; width: 48%;}
}
/* .bike_block .bike_block_head */
.bike_block .bike_block_head{
margin: 0 0 20px 0;
}
/* .bike_block .bike_block_side */
.bike_block .bike_block_body {
margin: 0 0 0 0;
}
@media screen and (max-width: 700px) {
.bike_block .bike_block_body{ float: right; width: 48%; }
}
/* .bike_block .bike_block_side */
.bike_block .bike_block_side {
position: absolute;
top: 0;
right: 0;
margin:0 0 0 0;
width: 280px;
height: 100%;
text-align: right;
}
@media screen and (max-width: 700px) {
.bike_block .bike_block_side{ position: static; height: auto; width: 100% !important;}
}
/* bike_block_sub
--------------------------------------------------------------*/
.bike_block .bike_block_sub {
display: table;
width:100%;
padding:12px 0;
border-top:solid 1px #ccc;
border-bottom:solid 1px #ccc;
}
.bike_block .bike_block_sub_cel{
display: table-cell;
vertical-align:top;
border-left: dotted 2px #ccc;
padding: 8px 18px;
}
.shop_list.bike_block .bike_block_sub,
.shop_list.bike_block .bike_block_sub_cel{
display: block;
}
.shop_list.bike_block .bike_block_sub .title.type07{
padding-left: 15px;
padding-right: 15px;
}
.shop_list.bike_block .bike_block_sub .choices_img_wrap{
padding-left: 15px;
padding-right: 15px;
}
.bike_block .bike_block_sub_cel:first-child{
border-left: none;
}
@media screen and (max-width: 700px) {
.bike_block .bike_block_sub{ border-bottom: none; display: block; padding: 15px; }
.bike_block .bike_block_sub_cel{ border-left: none; display: block; padding: 0; margin: 0 0 0 0; }
.shop_list.bike_block .bike_block_sub{ padding-left: 0; padding-right: 0;}
}
.bike_block .bike_block_sub .review_wrap {
width: 200px;
text-align:center;
}
@media screen and (max-width: 700px) {
.bike_block .bike_block_sub .shop_comment_wrap{ display: none;}
}
@media screen and (max-width: 700px) {
.bike_block .bike_block_sub .review_wrap { display: none; }
}
.bike_block .bike_block_sub .action_btn_wrap {
white-space: nowrap;
width: 400px;
}
@media screen and (max-width: 700px) {
.bike_block .bike_block_sub .action_btn_wrap{ display: none;}
}
.bike_block .bike_block_sub .tel_btn_wrap{
display: none;
}
@media screen and (max-width: 700px) {
.bike_block .bike_block_sub .tel_btn_wrap{
display: block;
}
.bike_block .bike_block_sub .btn_area{
margin: 0 !important;
}
}
.bike_block .bike_block_sub .action_btn_wrap .btn_area{
margin: 0 -10px -10px 0;
}
.bike_block .bike_block_sub .action_btn_wrap .btn_area .btn_wrap.type01{
margin: 0 10px 10px 0;
}
.bike_block .bike_block_sub .action_btn_wrap .btn_area .btn_wrap.type01 .btn{
font-size: 16px;
}
@media all and (max-width: 1000px) {
.bike_block .bike_block_sub .star_list_zone{
font-size: 25px;
}
.bike_block .bike_block_sub .action_btn_wrap {
white-space: normal;
width: 262px;
text-align: center;
}
.bike_block .bike_block_sub .action_btn_wrap .btn_area{
margin: 0;
}
.bike_block .bike_block_sub .action_btn_wrap .btn_area .btn_wrap.type01{
width: 100% !important;
margin: 0 auto 10px auto;
}
.bike_block .bike_block_sub .action_btn_wrap .btn_area .btn_wrap.type01:last-child {
margin-bottom: 0;
}
}
/*
-------------------------------------- バイクリストページに使用されるCSS --------------------------------------
*/
/* サイドのスペック */
.bike_block .spec_wrap ul li {
width: 25%;
}
/* バイクの価格 */
.bike_block .bike_list_block_price_zone{
position: relative;
margin: 25px -300px 0 0;
}
.bike_block .bike_list_block_price_wrap{
}
.bike_block .bike_list_block_price{
width: 50%;
text-align: center;
}
.bike_block .bike_list_block_price.base_price{
float: left;
}
.bike_block .bike_list_block_price.base_price span{
color: #040000 !important;
}
.bike_block .bike_list_block_price.total_price{
float: right;
border-left: 1px solid #9e9e9e;
}
/* .bike_block.bike_list */
.bike_block.bike_list .bike_block_contents{
padding-right: 320px;
}
.bike_block.bike_list .bike_block_side{
width: 300px;
}
.bike_block.bike_list .category_list.type_circle{
margin-bottom: 15px;
}
.bike_block.bike_list .bike_block_head_content{
min-height: 140px;
}
@media all and (max-width: 1000px) {
.bike_block.bike_list .bike_block_contents{ padding-right: 250px; }
.bike_block.bike_list .bike_block_side{ width: 230px; }
.bike_block .spec_wrap ul li { width: 50%; }
.bike_block .bike_list_block_price_zone{ margin-right: -250px; }
.bike_block.bike_list .bike_block_head_content{ min-height: 192px; }
}
@media screen and (max-width: 700px) {
.bike_block .bike_list_block_price_zone{ margin-right: 0px; margin-top: 20px; }
.bike_block .bike_list_block_price{ text-align: center; }
.bike_block .bike_list_block_price{ width: 48%; padding: 10px 0 0 0;}
.bike_block .bike_list_block_price.base_price{ border-top: 3px solid #040000; }
.bike_block .bike_list_block_price.total_price{ border-top: 3px solid #ed1e79; border-left: none;}
.bike_block.bike_list .bike_block_head_content{ min-height: 0px; }
}
@media all and (max-width: 400px) {
.bike_block.bike_list .bike_list_block_price .price_text_wrap{
font-size: 10px;
}
}
/*
-------------------------------------- パーツリストページに使用されるCSS --------------------------------------
*/
.bike_block.parts_list .bike_block_side .price_text_wrap{ margin: 20px 0 0 0; text-align: left; }
.bike_block.parts_list .price_text_wrap.type01 .price_text{
border-bottom: 6px solid #ED1E79;
padding: 0 0 8px 0;
}
@media all and (max-width: 1000px) {
.bike_block.parts_list .bike_block_contents{ padding-right: 260px; }
.bike_block.parts_list .bike_block_side{ width: 250px; }
}
@media screen and (max-width: 700px) {
.bike_block.parts_list .bike_block_side .price_text_wrap{ margin: 10px 0 0 0;}
.bike_block.parts_list .bike_block_text{ margin: 15px 0 0 0; font-size: 11px;}
}
/*
-------------------------------------- ショップリストページに使用されるCSS --------------------------------------
*/
.bike_block.shop_list .bike_block_contents{
padding-right: 230px;
}
.bike_block.shop_list .bike_block_sub_cel{
padding: 0;
}
.bike_block.shop_list .bike_block_side{
width: 200px;
}
.bike_block.shop_list .title.type07{
text-indent: -0.7em;
}
.bike_block .sub {
padding: 20px 15px 10px 15px;
margin: 0 0 0 -300px;
}
@media all and (max-width: 1040px) {
.bike_block .sub {
margin: 0 0 0px calc((-100vw + 40px)*0.3);
}
}
@media screen and (max-width: 700px) {
.bike_block .sub { display: none; }
}
.bike_block .address {
line-height:1.2;
margin:0 0 5px 0;
}
.bike_block .list_inner{
margin: 20px 0 0 0;
font-size:12px;
}
.bike_block .list_area {
display: inline-block;
min-width: 50%;
position: relative;
margin:0 0 5px;
padding: 0 0 0 118px;
margin: 0 0 0.6em 0;
}
.bike_block .list_area:last-child{
margin-bottom: 0;
}
.bike_block .list_area .list_head{
position: absolute;
top: 0;
left: -2px;
width: 120px;
white-space: nowrap;
padding: 0 20px 0 0;
text-align: right;
}
@media screen and (max-width: 700px) {
.bike_block .list_area {
padding: 0;
}
.bike_block .list_area .list_head{
position: static;
width: auto;
text-align: left;
}
.bike_block .list_inner{
margin: 0;
font-size: 12px;
}
.bike_block .list_count_wrap {
top: -1.8em;
left: 8.5em;
bottom: 0;
font-size: 11px;
}
.bike_block .review_evaluation_contents{ padding: 0;}
}
.bike_block .list_area.list_top .list_head{
font-size: 16px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.bike_block .review_evaluation_contents .star_list_zone{
display: inline-block;
vertical-align: top;
font-size: 25px;
margin: -0.05em 0 0 -0.25em;
}
.bike_block .review_evaluation_contents{
position: relative;
display: inline-block;
margin: 0 0 5px 0;
}
.bike_block .review_evaluation_contents .point {
display: inline-block;
vertical-align: top;
font-size:16px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
/*color:#f15a24;*/
margin:0 0 0 5px;
}
.bike_block .list_count_wrap{
position: absolute;
right: 0;
top: 0.3em;
width: 0;
}
@media all and (max-width: 1000px) {
.bike_block .list_count_wrap{
top: auto;
left: -0.5em;
bottom: 0;
}
.bike_block .review_evaluation_contents{
padding: 0 0 1.5em 0;
}
}
.bike_block .list_count{
white-space: nowrap;
}
.bike_block .list_body {
/*float:left;*/
display: inline-block;
vertical-align: top;
}
.bike_block .count {
font-size:12px;
}
.bike_block .review_evaluation_detail p {
display: inline-block;
vertical-align: top;
margin:0 5px 0 0;
}
.bike_block .review_evaluation_detail p:last-child {
margin:0;
}
.list_main02 .side {
float:left;
width:20%;
text-align:center;
}
/* .shop_list_number_wrap */
/* .shop_list_number_wrap */
.shop_list_number_wrap{
width: 100%;
padding: 0 0 0 15px;
border-left: 1px solid #9e9e9e;
height: 100%;
margin: 0 0 0 auto;
text-align: center;
}
.shop_list_number_wrap .category_list.type_rectangle li{
margin: 0 0 10px 0;
}
.shop_list_number_wrap .side_number_s{
margin: 20px 0 0 0;
font-size: 16px;
}
.bike_block .pickup_wrap {
padding:30px 0;
}
.bike_block .pickup_wrap li {
display:inline-block;
padding:0 10px;
color:#2f708b;
border:solid 1px #2f708b;
}
.bike_block .number_wrap {
margin:0 0 10px;
}
.bike_block .number_title,
.bike_block .parts_title {
line-height:1.2;
}
.bike_block .number,
.bike_block .parts {
font-size: 310%;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.bike_block .number span,
.bike_block .parts span {
font-size: 40%;
}
/* .bike_block .choices_img_wrap
--------------------------------------------------------------*/
.bike_block .choices_img_zone{
margin: 10px 0 0 0;
height: 80px;
}
.bike_block .choices_img_area{
height: 200px;
}
.bike_block .choices_img_wrap {
display: inline-block;
letter-spacing: -0.4em;
white-space: nowrap;
}
.bike_block .choices_img_wrap li {
position: relative;
display:inline-block;
letter-spacing: normal;
/*margin:0 2.8% 0 0;
width: 10%;*/
width: 100px;
margin: 0 28px 0 0;
cursor: pointer;
}
/*
.bike_block .choices_img_wrap li:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}*/
.bike_block .choices_img li:last-child {
margin:0;
}
@media all and (max-width: 1000px) {
.shop_list_number_wrap .side_number_s{ font-size: 14px; }
.bike_block.shop_list .bike_block_contents{ padding-right: 185px;}
.bike_block.shop_list .bike_block_side{ width: 170px;}
}
@media screen and (max-width: 700px) {
.shop_list_number_wrap{ border: none; padding: 0; }
.shop_list_number_wrap .category_list.type_rectangle{
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: right;
}
.shop_list_number_wrap .side_number_s{ display: table; width: 100%; margin: 0; font-size: 11px; }
.bike_block .number_wrap,.bike_block .parts_wrap{ display: table-row; margin: 0;}
.bike_block .number_title, .bike_block .parts_title{ display: table-cell; margin: 0; padding: 0 10px 0 0; vertical-align: middle; text-align: left; width: 5em; white-space: nowrap; }
.bike_block .number, .bike_block .parts{ display: table-cell; text-align: left; vertical-align: middle; }
}
/* =====================================================================
(バイク詳細のブロックに使用されるCSS)
======================================================================*/
/*
-------------------------------------- 共通CSS --------------------------------------
*/
/* ==================================
detail_wrap
===================================*/
#detail_wrap {
}
.detail_main_wrap{
position: relative;
}
@media screen and (max-width: 700px) {
#detail_wrap { padding-bottom: 20px; }
}
/* -------------------------------------------------------------
.detail_head_sns
--------------------------------------------------------------*/
.detail_head_sns{
position: absolute;
top: -44px;
right: 0;
}
@media screen and (max-width: 700px) {
.detail_head_sns{ display: none; }
}
/* -------------------------------------------------------------
detail_title
--------------------------------------------------------------*/
/* .detail_title */
.detail_main_wrap .detail_title{
font-size: 26px;
line-height: 1.4;
/*margin: -0.1em auto 1.15em auto;*/
margin: 0.4em auto 0.4em auto;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color: #162143;
}
.detail_main_wrap .detail_title:last-child{
margin-bottom: 0;
}
@media screen and (max-width: 700px) {
.detail_main_wrap .detail_title{ font-size: 18px; }
}
.detail_main_wrap .detail_title.title_left{
float:left;
width: 56.0%;
}
.detail_main_wrap .detail_title.title_right{
float: right;
width: 41%;
}
@media screen and (max-width: 700px) {
.detail_main_wrap .detail_title.title_left{
float: none;
width: auto;
clear: both;
}
.detail_main_wrap .detail_title.title_right{
float: none;
width: auto;
clear: both;
}
}
/* -------------------------------------------------------------
.category
--------------------------------------------------------------*/
.detail_main_wrap .category_list.type_circle{
text-align: left;
border-bottom: 2px solid #000000;
padding: 0 0 20px 0;
margin: 0;
}
@media screen and (max-width: 700px) {
/*.detail_main_wrap .category_list.type_circle{
position: absolute;
top: -12px;
right: 0;
border: none;
padding: 0;
margin: 0;
}*/
.detail_main_wrap .category_list.type_circle{
border: none;
padding: 0;
margin: -12px -12px 0 0;
}
}
.detail_main_wrap .category_left{
float:left;
width: 56.0%;
}
.detail_main_wrap .category_right{
float: right;
width: 41%;
}
@media screen and (max-width: 700px) {
.detail_main_wrap .category_left{
width: auto;
}
.detail_main_wrap .category_right{
width: auto;
}
}
.detail_main_wrap.shop_detail .category_left{
margin: 0 0 10px 0;
}
@media screen and (max-width: 700px) {
.detail_main_wrap.shop_detail .category_left{
margin: 0 0 0px 0;
}
}
/* -------------------------------------------------------------
detail_main
--------------------------------------------------------------*/
.detail_main {
float:left;
width: 56.0%;
}
@media screen and (max-width: 700px) {
.detail_main {
float: none;
width: auto;
}
}
/* -------------------------------------------------------------
detail_sub
--------------------------------------------------------------*/
.detail_sub {
float: right;
width: 41%;
}
@media screen and (max-width: 700px) {
.detail_sub {
float: none;
width: auto;
/*margin: 0 25px 0;*/
margin: 0;
}
}
/* .detail_sub_base_wrap */
.detail_sub_base_wrap{
margin: 0 0 20px 0;
}
/* detail_etc
--------------------------------------------------------------*/
.detail_etc {
float:left;
width: 56.0%;
margin: 20px 0 0 0;
}
@media screen and (max-width: 700px) {
.detail_etc {
float: none;
width: auto;
margin: 0;
}
.detail_sub_base_wrap{
margin: 0;
}
}
/* detail_comment(コメント共通)
--------------------------------------------------------------*/
.detail_comment {
font-size: 13px;
margin: 20px 0;
}
.detail_comment:first-child{
margin-top: 0;
}
.detail_comment:last-child{
margin-bottom: 0;
}
.detail_comment .more_btn {
margin: 1em 0 0 0;
text-align: center;
}
.detail_comment .detail_comment_in{
overflow: hidden;
}
.comment_more{
display: inline;
}
.detail_comment .outline{
display: inline;
}
.detail_comment .outline2{
display: none;
}
.detail_comment .more_btn_text{
position: relative;
display: inline-block;
padding: 0 1em 0 0;
cursor: pointer;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.detail_comment .more_btn_text:after{
content: "";
position: absolute;
top: 50%;
right: 0;
width: 0;
height: 0;
border-style: solid;
/*border-width: 0.69em 0.538em 0 0.538em;*/
border-width: 0.5em 0.368em 0 0.368em;
margin: -0.25em 0 0 0;
border-color: #000000 transparent transparent transparent;
-moz-transform-origin: 50%;
-webkit-transform-origin: 50%;
-o-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
}
.detail_comment .more_btn .more_btn_text.close:after{
border-color: transparent transparent #000000 transparent;
border-width: 0 0.368em 0.5em 0.368em;
}
/* detail_action_btn_wrap(詳細ページ共通のボタン)
--------------------------------------------------------------*/
.detail_action_btn_wrap {
padding: 0 0 30px 0;
margin: 30px 0 30px 0;
border-bottom: solid 2px #000;
}
.detail_action_btn_wrap .btn_wrap{
flex-grow: 1;
-webkit-flex-grow: 1;
}
.detail_action_btn_wrap .btn_wrap:nth-child(1){
}
.detail_action_btn_wrap .btn_wrap:nth-child(2){
}
.detail_action_btn_wrap .btn{
font-size: 16px !important;
}
.detail_action_btn_wrap .shop_info_btn{
margin: 20px 0 0 0;
}
.detail_action_btn_wrap .shop_info_btn .btn_area .btn_wrap.type02 .btn{
font-size: 20px !important;
}
@media all and (max-width: 1000px) {
.detail_action_btn_wrap .btn_area{
margin: 0;
}
.detail_action_btn_wrap .btn_wrap:nth-child(1),
.detail_action_btn_wrap .btn_wrap:nth-child(2){
float: none;
width: 100%;
margin: 0 0 15px 0;
}
.detail_action_btn_wrap .btn_wrap:nth-child(2){
margin-bottom: 0;
}
}
@media screen and (max-width: 700px) {
.detail_action_btn_wrap{ display: none; }
}
/* .detail_review_evaluation_wrap(詳細ページ共通のブロック)
--------------------------------------------------------------*/
.detail_review_evaluation_wrap {
padding: 0.625em 1.25em 0.94em;
margin: 0 0 1.25em;
border: solid 1px #b3b3b3;
background: #f2f2f2;
font-size: 16px;
}
.detail_review_evaluation_wrap .star_list_zone{
font-size: 20px;
}
.detail_review_evaluation_contents {
margin:0 0 0.63em 0;
}
.detail_review_evaluation_wrap p,
.detail_review_evaluation_wrap dl,
.detail_review_evaluation_wrap dl dt,
.detail_review_evaluation_wrap dl dd{
display: inline-block;
vertical-align: middle;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.detail_review_evaluation_contents .point {
font-size: 132%;
color:#f15a24;
margin:0 5px 0 0;
}
.detail_review_evaluation_contents .count {
font-size: 75%;
font-family: "UD Shin Go Light",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}
.detail_review_evaluation_detail{
margin: 0 -2em -1em 0;
}
.detail_review_evaluation_detail dl {
margin:0 2em 1em 0;
line-height: 1;
}
/* --------------------------------------------------------------
.detail_review_main_zone(詳細ページ共通のブロック)
--------------------------------------------------------------*/
.detail_review_main_zone{
font-size: 12px;
}
.detail_review_main_zone .pager_wrap{
margin-top: 50px;
}
.detail_review_main_wrap{
margin: 0 0 20px 0;
}
.detail_review_main_wrap:last-child{
margin: 0;
}
.detail_review_main_contents{
padding: 1em;
border-bottom: 1px solid #B3B3B3;
}
.detail_review_main_contents .review_answer{
border-top: 1px solid #B3B3B3;
padding: 1.5em 1em 1em 2em;
margin: 1em 0 0 -1em;
}
.detail_review_main_contents .title {
font-size: 125%;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color:#162143;
margin:0 0 1em 0;
}
.detail_review_main_contents .review_wrap {
letter-spacing: -0.4em;
margin: 0 0 1em 0;
}
.detail_review_main_contents .review_wrap > *{
letter-spacing: normal;
}
.detail_review_main_contents .review_wrap p {
display: inline-block;
vertical-align: middle;
}
.detail_review_main_contents .review_wrap .review_title {
display: inline-block;
vertical-align: middle;
font-size: 1.09em;
color: #666;
padding: 0.15em 0.83em;
margin: 0 15px 0 0;
border:solid 1px #999;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.detail_review_main_contents .point {
font-size:17px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color:#f15a24;
margin:0 10px 0 0;
}
.detail_review_main_contents .star_list_zone{
font-size: 1.42em;
}
.detail_review_main_contents .day {
font-size: 0.92em;
}
.detail_review_main_contents .review {
margin:0 0 15px;
}
.detail_review_main_contents .btn a {
color: #fff;
padding: 0.25em 1.25em;
border-radius: 5px;
background: #888;
}
.detail_review_main_zone .detail_review_link_wrap {
text-align: right;
}
.detail_review_main_zone .detail_review_link_wrap p {
display:inline-block;
vertical-align: baseline;
}
.detail_review_main_zone .detail_review_link_wrap .link {
font-size:14px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
@media screen and (max-width: 700px) {
.detail_review_main_wrap{
margin-left: -15px;
margin-right: -15px;
}
}
/* ==================================
tel_info_wrap(詳細ページ共通の電話番号ブロック)
===================================*/
.tel_info_wrap .tel_info {
min-height: 120px;
}
@media screen and (max-width: 700px) {
.tel_info_wrap + .tel_info_wrap{
display: none;
}
}
.tel_info_wrap .tel_info_inner {
font-size: 15px;
}
.tel_info_wrap .tel_info_title{
position: relative;
font-size: 160%;
font-family: "UD Shin Go Light",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif !important;
line-height: 1;
padding: 0 0 0 1.67em;
margin: 0 0 0.8em 0;
}
.tel_info_wrap .tel_info_title:before {
content: "";
position: absolute;
top: 0.5em;
left: 0px;
width: 1.4em;
height: 1.02em;
margin: -0.55em 0 0 0;
background: url(/common/img/icon_tel_black.svg) no-repeat;
}
.tel_info_wrap .tel_info_area{
display: flex;
display: -webkit-flex;
padding: 0 0px 0 0;
}
.tel_info_wrap .tel_info_area .phone_num{
text-align: left;
}
@media screen and (max-width: 700px) {
.tel_info_wrap .tel_info_area .phone_num{
text-align: center;
}
}
/* .info_wrap .info_contents*/
.tel_info_wrap .tel_info_contents {
flex-grow: 1;
-webkit-flex-grow: 1;
padding: 0 20px 0 0;
}
/* .tel_info_wrap .tel_info_wrap_tel */
.tel_info_wrap .tel_info_tel{
display: none;
}
/* .tel_info_wrap .tel_shop_profile */
.tel_info_wrap .tel_shop_profile{
display: none;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size: 125%;
}
.tel_info_wrap .tel_shop_profile dl{
display: table;
width: 100%;
}
.tel_info_wrap .tel_shop_profile dl dt,
.tel_info_wrap .tel_shop_profile dl dd{
display: table-cell;
vertical-align: top;
text-align: left;
}
.tel_info_wrap .tel_shop_profile dl dt{
white-space: nowrap;
width: 0;
}
/* .tel_info_wrap .tel_shop_info */
.tel_info_wrap .tel_shop_info {
letter-spacing: -0.4em;
margin: 1.33em -2.66em 0 0;
}
.tel_info_wrap .tel_shop_info dl {
display: inline-table;
letter-spacing: normal;
vertical-align: top;
margin:0 2.66em 0 0;
}
.tel_info_wrap .tel_shop_info dl dt,
.tel_info_wrap .tel_shop_info dl dd{
display: table-cell;
vertical-align: top;
text-align: left;
}
.tel_info_wrap .tel_shop_info dl dt {
padding: 0 1em 0 0;
white-space: nowrap;
}
/* .tel_info_wrap .tel_info_function */
.tel_info_wrap .tel_info_function {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.tel_soldout_type .tel_info_function{
width: 520px;
}
@media screen and (min-width: 701px) and (max-width: 950px) {
.tel_soldout_type .tel_info_function{ width: 480px; }
}
@media screen and (max-width: 700px) {
.tel_soldout_type .tel_info_function{ margin-top: 10px; width: 100%; }
}
/* .tel_info_wrap .tel_info_function .action_btn_wrap */
.tel_info_wrap .tel_info_function .action_btn_wrap{
width: 100%;
text-align: right;
}
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_area{
margin: 0 !important;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
white-space: nowrap;
}
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_wrap{
margin: 0 15px 0 0;
flex-grow: 1;
-webkit-flex-grow: 1;
}
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_wrap:last-child{
margin: 0;
}
@media screen and (max-width: 700px) {
.tel_info_wrap .tel_info_function .action_btn_wrap{
min-height: 101px;
}
.tel_info_wrap .tel_info_contents{
padding: 0;
}
.tel_info_wrap .tel_info_area{
padding: 0;
}
}
/* .tel_info_wrap .tel_info_function .sns_wrap */
.tel_info_wrap .tel_info_function .sns_wrap{
display: none;
}
/* .tel_info_wrap .tel_quality */
.tel_info_wrap .tel_quality{
}
@media all and (min-width: 700px) {
.tel_info_wrap .tel_quality{
margin-bottom: 50px;
}
.tel_info_wrap .tel_maker{
margin-bottom: 0px;
}
}
@media screen and (min-width: 701px) and (max-width: 950px) {
.tel_info_wrap .tel_info_inner { font-size: 13px; }
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_area{
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_wrap{
margin: 0 0 15px 0;
display: block;
width: 100%;
}
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_wrap .btn{
font-size: 16px;
}
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_wrap:last-child{
margin: 0;
}
}
@media screen and (max-width: 700px) {
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_area{
display: block;
}
.main_content.tel_info_wrap{
padding: 15px 15px;
}
.tel_info_wrap .tel_info_area{
display: block;
}
.tel_info_wrap .tel_info_function{
width: 100%;
}
.tel_info_function .tel_info_function{
margin: 10px 0 0px 0;
}
.tel_soldout_type .tel_info_function .tel_soldout{
order: 1;
-webkit-order: 1;
margin: 0px 0 20px 0;
}
.tel_soldout_type .tel_info_function .action_btn_wrap{
order: 2;
-webkit-order: 2;
}
.tel_soldout_type .tel_info_function .sns_wrap{
order: 3;
-webkit-order: 3;
}
/* .info_wrap .info_title */
.tel_info_wrap .tel_info_title{
display: none;
}
/* .info_wrap .info_inner */
.tel_info_wrap .tel_info_inner{
padding: 0;
font-size: 12px;
}
/* .info_wrap .info_contents */
.tel_info_wrap .tel_info_contents{
display: block;
}
/* .info_wrap .info_tel */
.tel_info_wrap .tel_info_tel{
display: block;
margin: 12px 0;
}
/* .info_wrap .shop_profile */
.tel_info_wrap .tel_shop_profile{
display: block;
}
/* .info_wrap .shop_info */
.tel_info_wrap .tel_shop_info {
margin-top: 0;
}
/* .info_wrap .info_function */
.tel_info_wrap .tel_info_function{
position: relative;
margin: 20px 0 0 0;
}
.tel_info_wrap .tel_info_function .type_favorite{
padding: 0 0 0 104px;
}
/* .tel_info_wrap .tel_info_function .action_btn_wrap .btn_wrap */
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_wrap{
margin: 0 0 15px 0;
}
.tel_info_wrap .tel_info_function .action_btn_wrap .btn_wrap:last-child{
margin: 0;
}
/* .info_wrap .info_function .sns_wrap */
.tel_info_wrap .tel_info_function .sns_wrap{
position: absolute;
bottom: 12px;
left: 0;
display: block;
}
}
/* .tel_soldout */
.tel_soldout{
width: 100%;
font-size: 12px;
margin: 20px 0 0 0;
padding: 15px 10px;
background-color: #ffffff;
border: 1px solid #808080;
}
.tel_soldout .tel_soldout_title{
color: #162143;
font-size: 110%;
margin: 0 0 0.5em 0;
line-height: 1;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.tel_soldout p{
color: #161616;
}
/* --------------------------------------------------------------
.detail_shop_info_contents(詳細ページ共通で使用されるSHOPのプロフィールブロック)
--------------------------------------------------------------*/
.detail_shop_info_contents_wrap{
position: relative;
}
.detail_shop_info_contents_wrap .detail_shop_info_contents {
display: table;
width: 100%;
}
.detail_shop_info_contents_wrap .detail_shop_info_main {
display: table-cell;
vertical-align: top;
width:60%;
padding: 0 0 80px 0;
}
.detail_shop_info_contents_wrap .detail_shop_info_main_inner {
position: relative;
padding: 0 4% 0 50%;
letter-spacing: -0.4em;
}
.detail_shop_info_contents_wrap .detail_shop_info_main_inner:after{
content: "";
display: inline-block;
vertical-align: top;
padding: 0 0 69% 0;
width: 0;
margin: 0 0 -1px;
}
.detail_shop_info_contents_wrap .shop_img {
position: absolute;
top: 0;
left: 0;
width: 46%;
}
.detail_shop_info_contents_wrap .shop_sub {
display: inline-block;
vertical-align: top;
width: 100%;
letter-spacing: normal;
}
.detail_shop_info_contents_wrap .shop_sub h3 {
font-size: 20px;
line-height: 1.3;
margin: 0 0 10px;
}
.detail_shop_info_contents_wrap .shop_info_table{
margin: 20px 0 0 0;
border-top: 1px solid #989898;
font-size: 15px;
}
.detail_shop_info_contents_wrap .shop_info_table p{
display: inline;
}
.detail_shop_info_contents_wrap .shop_info_tr{
border-bottom: 1px solid #989898;
padding: 0.7em;
}
.detail_shop_info_contents_wrap .shop_info_th,
.detail_shop_info_contents_wrap .shop_info_td{
display: inline;
}
.detail_shop_info_contents_wrap .shop_map_text{
display: inline;
}
.detail_shop_info_contents_wrap .shop_map_text_in{
display: inline;
}
.detail_shop_info_contents_wrap .shop_map_text .btn_area{
display: none;
}
.detail_shop_info_contents_wrap .shop_info_th:after{
content: ":";
}
.detail_shop_info_contents_wrap .detail_shop_info_comment {
display: table-cell;
vertical-align: top;
width: 40%;
/*font-size: 15px;*/
font-size: 14px;
padding: 1.4em 1.66em;
background: #eaeaea;
}
.detail_shop_info_contents_wrap .detail_shop_info_comment .detail_comment{
font-size: 100%;
}
.detail_shop_info_contents_wrap .shop_btn {
position:absolute;
bottom:0;
left: 0;
width: 60%;
text-align: center;
}
.detail_shop_info_contents_wrap .shop_btn .btn_area{
max-width: 342px;
margin: 0 auto;
}
.detail_shop_info_contents_wrap .shop_btn .btn_wrap{
width: 100%;
margin: 0;
}
.detail_shop_info_contents_wrap .shop_btn a:hover {
background: #eee;
}
.detail_shop_info_contents_wrap .shop_info_table .btn_area{
display: none;
white-space: nowrap;
}
/* .detail_shop_movie */
.detail_shop_movie{
margin: 40px 0 0 0;
}
.detail_shop_movie .detail_shop_movie_list{
}
@media screen and (max-width: 900px) {
.detail_shop_info_contents_wrap .detail_shop_info_contents{
display: block;
}
.detail_shop_info_contents_wrap .detail_shop_info_main {
display: block;
width: auto;
padding: 0;
margin: 0 0 30px 0;
}
.detail_shop_info_contents_wrap .detail_shop_info_main_inner{
padding-right: 0;
}
.detail_shop_info_contents_wrap .detail_shop_info_comment {
display: block;
width: auto;
margin: 0 0 30px 0;
}
.detail_shop_info_contents_wrap .detail_shop_info_comment{
font-size: 14px;
}
.detail_shop_info_contents_wrap .shop_btn {
position: static;
width: auto;
}
}
@media screen and (max-width: 700px) {
.detail_shop_info_contents_wrap .detail_shop_info_main_inner::after{
display: none;
}
.detail_shop_info_contents_wrap .shop_sub{
display: block;
width: auto;
}
.detail_shop_info_contents_wrap .detail_shop_info_main_inner{
padding: 0;
}
.detail_shop_info_contents_wrap .shop_img{
position: static;
width: auto;
margin: 0 0 20px 0;
}
.detail_shop_info_contents_wrap .shop_info_table{
display: table;
width: 100%;
margin: 20px 0 0 0;
border-top: 1px solid #989898;
border-left: 1px solid #989898;
font-size: 12px;
}
.detail_shop_info_contents_wrap .shop_info_table p{
display: block;
}
.detail_shop_info_contents_wrap .shop_info_tr{
border-bottom: none;
padding: 0;
display: table-row;
}
.detail_shop_info_contents_wrap .shop_info_th,
.detail_shop_info_contents_wrap .shop_info_td{
display: table-cell;
vertical-align: top;
border-right: 1px solid #989898;
border-bottom: 1px solid #989898;
padding: 0.65em 1.3em;
}
.detail_shop_info_contents_wrap .shop_info_th{
background-color: #F2F2F2;
}
.detail_shop_info_contents_wrap .shop_info_th:after{
content: "";
}
.detail_shop_info_contents_wrap .shop_info_table .btn_area{
margin: 3px 0 0 0;
}
.detail_shop_info_contents_wrap .shop_info_table .btn_area{
display: block;
}
.detail_shop_info_contents_wrap .shop_info_table .btn_area .type_tel .btn{
font-size: 14px;
}
.detail_shop_info_contents_wrap .detail_shop_info_comment{
font-size: 12px;
}
.detail_shop_info_contents_wrap .shop_map_text{
display: table;
}
.detail_shop_info_contents_wrap .shop_map_text_in{
display: table-cell;
vertical-align: middle;
}
.detail_shop_info_contents_wrap .shop_map_text_in:nth-child(1){
padding-right: 15px;
}
.detail_shop_info_contents_wrap .shop_map_text .btn_area{
display: block;
}
.detail_shop_info_contents_wrap .shop_map_text .btn_area .btn{
font-size: 12px;
}
}
@media all and (max-width: 400px) {
.detail_shop_info_contents_wrap .shop_map_text .btn_area .btn{
font-size: 10px;
}
.detail_shop_info_contents_wrap .shop_info_table .btn_area .type_tel .btn{
font-size: 10px;
}
}
/*
-------------------------------------- バイク詳細に使用されるCSS --------------------------------------
*/
/* .detail_sub .bike_price_wrap
--------------------------------------------------------------*/
.detail_sub .bike_price_wrap{
margin: 0 0 20px 0;
border-bottom: solid 1px #b3b3b3;
}
.detail_sub .bike_price_wrap .price_content{
border-bottom: dashed 1px #b3b3b3;
text-align: center;
padding: 15px 10px;
}
.detail_sub .bike_price_wrap .base_price {
}
.detail_sub .bike_price_wrap .total_price {
border-bottom: none;
}
@media all and (min-width: 701px) {
.detail_sub .bike_price_wrap .price_text_wrap{
font-size: 17px;
text-align: left;
}
.detail_sub .bike_price_wrap .price_text{
font-size: 129%;
}
}
@media all and (min-width: 701px) and (max-width: 1000px) {
.detail_sub .bike_price_wrap .price_text_wrap{ font-size: 15px;}
}
@media screen and (max-width: 700px) {
.detail_sub .bike_price_wrap{ margin: 15px 0; padding: 0 0 15px 0; border-top: none; }
.detail_sub .bike_price_wrap .price_content{ width: 48%; padding: 10px 0 0 0; border-bottom: none; }
.detail_sub .bike_price_wrap .price_content.base_price{ border-top: 3px solid #040000; float: left; }
.detail_sub .bike_price_wrap .price_content.total_price{ border-top: 3px solid #ed1e79; border-left: none; float: right;}
}
/* detail_sub_info
--------------------------------------------------------------*/
.detail_sub .detail_sub_info {
border: solid 1px #808080;
}
/* .detail_sub_info_title */
.detail_sub .detail_sub_info .detail_sub_info_title {
padding: 0.8em 0.5em;
background: #f2f2f2;
font-size: 18px;
}
.detail_sub .detail_sub_info .detail_sub_info_title p {
position: relative;
padding:0 0 0 1.66em;
line-height: 1;
}
.detail_sub .detail_sub_info .detail_sub_info_title p:before {
content: "";
position: absolute;
top: 0.5em;
left: 0px;
width: 1.4em;
height: 1.02em;
margin: -0.55em 0 0 0;
background: url(/common/img/icon_tel_black.svg) no-repeat;
}
.detail_sub .detail_sub_info .detail_sub_info_contents {
padding: 15px;
border-bottom: dashed 1px #b3b3b3;
}
.detail_sub .detail_sub_info .detail_sub_info_contents:last-child{
border-bottom: none;
}
@media screen and (max-width: 700px) {
.detail_sub .detail_sub_info {
display: none;
}
}
/* .shop_info */
.detail_sub .detail_sub_info .shop_info {
font-size:14px;
}
.detail_sub .detail_sub_info .shop_info ul {
margin: 10px -40px -20px 0;
letter-spacing: -0.4em;
}
.detail_sub .detail_sub_info .shop_info li {
display: inline-block;
letter-spacing: normal;
vertical-align: top;
margin:0 40px 20px 0;
}
.detail_sub .detail_sub_info .shop_info li span {
padding:0 0 0 10px;
}
.detail_sub .detail_sub_info .detail_sub_info_contents_inner {
margin:0 0 15px 0;
}
.detail_sub .detail_sub_info .detail_sub_info_contents_inner:last-child {
margin: 0;
}
.detail_sub .detail_sub_info .detail_sub_info_contents_inner dl {
font-size: 14px;
}
.detail_sub .detail_sub_info .detail_sub_info_contents_inner dt {
display: inline;
}
.detail_sub .detail_sub_info .detail_sub_info_contents_inner dd {
display: inline;
}
.detail_sub.bike .parts_base_wrap {
margin-top: 15px !important;
}
/*
-------------------------------------- パーツ詳細に使用されるCSS --------------------------------------
*/
/* price_wrap
--------------------------------------------------------------*/
.detail_sub .parts_price_wrap{
padding: 20px 20px 20px 20px;
}
.detail_sub .parts_price_wrap .price_content{
text-align: center;
}
@media all and (min-width: 701px) {
.detail_sub .parts_price_wrap .price_text_wrap{
font-size: 18px;
text-align: left;
}
.detail_sub .parts_price_wrap .price_text{
font-size: 110%;
}
}
@media all and (min-width: 701px) and (max-width: 1000px) {
.detail_sub .parts_price_wrap .price_text_wrap{ font-size: 15px;}
}
@media screen and (max-width: 700px) {
.detail_sub .parts_price_wrap{
padding: 0px 0px 15px 0px;
}
}
/* .parts_base_wrap
--------------------------------------------------------------*/
.detail_sub .parts_base_wrap {
margin: 0 0 15px;
}
.detail_sub .parts_base_wrap table {
width: 100%;
border-top:solid 1px #999;
font-size: 15px;
}
.detail_sub .parts_base_wrap table th,
.detail_sub .parts_base_wrap table td{
border-bottom:solid 1px #999;
padding: 1em 1em;
}
.detail_sub .parts_base_wrap table th{
white-space: nowrap;
padding-right: 0;
}
.detail_sub .parts_base_wrap .base_wrap_title {
position:relative;
padding: 0 1em 0 0;
}
.detail_sub .parts_base_wrap .base_wrap_title:after {
content: ':';
display: block;
position: absolute;
top:0;
right: -0.5em;
}
@media screen and (max-width: 700px) {
.detail_sub .parts_base_wrap table { font-size: 12px; }
}
/*
-------------------------------------- ショップ詳細に使用されるCSS --------------------------------------
*/
.shop_info_wrap{
font-size: 13px;
}
.detail_etc .detail_review_evaluation_wrap{
font-size: 16px;
}
.detail_etc .detail_review_main_zone{
font-size: 12px;
}
.detail_etc .detail_review_main_contents{
border: none;
padding: 0;
}
.detail_etc .detail_review_main_wrap{
margin: 0 0 10px 0;
}
/* .shop_info_btn */
.shop_info_btn{
}
.shop_info_btn .btn_area{
display: block;
margin: 0 0 10px 0;
}
.shop_info_btn .btn_area:last-child{
margin: 0 0 0px 0;
}
.shop_info_btn .btn_area.max1 .btn_wrap{
width: 100%;
margin-bottom: 0;
}
.shop_info_btn .btn_area.max2 .btn_wrap{
width: 48.5%;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}
.shop_info_btn .btn_area.max2 .btn_wrap:nth-child(2n + 1){
float: left;
}
.shop_info_btn .btn_area.max2 .btn_wrap:nth-child(2n){
float: right;
}
@media all and (max-width: 1000px) {
.shop_info_btn .btn_area .btn_wrap.type02 .btn{
font-size: 18px;
}
}
@media all and (max-width: 900px) {
.shop_info_btn .btn_area.max2 .btn_wrap{
width: 100% !important;
float: none !important;
margin-bottom: 10px !important;
}
.shop_info_btn .btn_area.max2 .btn_wrap:last-child{
margin-bottom: 0px !important;
}
}
/* ==================================
staff_wrap
===================================*/
.staff {
}
.staff_title h2 {
float:left;
position: relative;
padding: 0 0 0 70px;
font-size: 33px;
color: #162143;
margin: 0 0 30px;
}
.staff_title h2:before {
content: "";
position: absolute;
top:5px;
left: 0;
display: inline-block;
width: 58px;
height: 46px;
background: url(/common/img/icon_heart.png) no-repeat;
background-size: 100% auto;
}
@media screen and (max-width: 700px) {
.staff_title h2 { font-size: 20px; padding: 0 0 0 35px; }
.staff_title h2:before {
width: 29px;
height: 23px;
top:3px;
}
}
.staff_content_wrap{
margin: 0 0 2.66em 0;
}
.staff_content_wrap:last-child{
margin-bottom: 0;
}
.staff_content_wrap .img_wrap{
float: left;
}
.staff_content_wrap .img {
max-width: 300px;
margin: 0 auto 20px;
}
.staff_content_wrap .img .img_cover {
overflow: hidden;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
padding: 0 0 100% 0;
}
.staff_content_wrap .tanto li {
font-size: 113%;
line-height: 1;
font-family: "Midashi Go MB31" !important;
color: #fff;
text-align: center;
padding: 0.3em;
margin:0 auto 5px auto;
border-radius: 1.5em;
background: #2f708b;
max-width: 9em;
}
.staff_content_wrap .tanto li:last-child{
margin-bottom: 0;
}
/* comment_wrap
--------------------------------------------------------------*/
.staff_content_wrap .comment_wrap {
float: right;
}
.staff_content_wrap .comment_inner {
z-index: 0;
}
.staff_content_wrap .comment_wrap .comment_area {
display: table;
width: 100%;
padding: 1.1em 0;
border-bottom: solid 2px #fff;
}
.staff_content_wrap .comment_wrap .comment_area:first-child {
padding-top: 0;
}
.staff_content_wrap .comment_wrap .comment_area:last-child {
padding-bottom: 0;
}
.staff_content_wrap .comment_wrap .comment_area:nth-child(3) {
border-bottom: none;
}
.staff_content_wrap .comment_wrap .comment_head {
font-size: 120%;
font-family: "Midashi Go MB31" !important;
}
.staff_content_wrap .comment_wrap .comment_body {
font-size: 100%;
line-height: 1.4;
}
/* --------------------------------------------------------------
staff_main
--------------------------------------------------------------*/
.staff_main{
font-size: 15px;
}
.staff_main .staff_content:last-child{
margin-bottom: 0;
}
.staff_content_wrap .staff_content{
margin: 0 0 30px 0;
}
/* comment_wrap
--------------------------------------------------------------*/
.staff_main .comment_wrap {
width: 65%;
}
.staff_main .img_wrap{
width: 30%;
}
.staff_main .comment_inner {
position: relative;
background: #e6f0ff;
padding: 2em 2em;
}
.staff_main .comment_inner:after {
content: "";
position: absolute;
top: 3.33em;
left: -2em;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 1.33em 2em 1.33em 0;
border-color: transparent #e6f0ff transparent transparent;
}
.staff_main .comment_wrap .comment_area .comment_head {
display: table-cell;
vertical-align: top;
width: 8em;
}
.staff_main .comment_wrap .comment_area .comment_body {
display: table-cell;
vertical-align: middle;
}
/* --------------------------------------------------------------
staff_sub
--------------------------------------------------------------*/
.staff_sub{
display:-webkit-box;
display:-moz-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
margin: 0 0 -30px 0;
}
.staff_sub .staff_content {
width: 48%;
padding: 1.5em;
margin: 0 4% 30px 0;
background: #ffebeb;
}
.staff_sub .staff_content:nth-child(2n) {
margin-right: 0;
}
@media screen and (max-width: 700px) {
.staff_sub{ display: block; }
}
/* img_wrap
--------------------------------------------------------------*/
.staff_sub .img_wrap {
width: 40%;
}
/* comment_wrap
--------------------------------------------------------------*/
.staff_sub .comment_wrap {
width: 54%;
}
.staff_sub .comment_inner{
padding: 0;
}
.staff_sub .comment_wrap .comment_area {
display: block;
}
.staff_sub .comment_wrap .comment_area .comment_head {
display: block;
vertical-align: top;
width: auto;
}
.staff_sub .comment_wrap .comment_area .comment_body {
display: block;
vertical-align: middle;
}
@media screen and (min-width: 701px) and (max-width: 900px) {
.staff_content_wrap{
font-size: 13px;
}
}
@media screen and (max-width: 700px) {
.detail_etc .detail_review_evaluation_wrap{
font-size: 13px;
}
.staff_content_wrap .img_wrap{
float: none;
width: auto;
text-align: center;
margin: 0 0 1.5em 0;
}
.staff_content_wrap .img{
max-width: 200px;
margin-bottom: 15px;
}
.staff_content_wrap .comment_wrap{
float: none;
width: auto;
margin: 0;
}
.staff_main .comment_inner{
padding: 1.5em;
}
.staff_main .comment_inner:after{
display: none;
}
.staff_main .comment_wrap .comment_area{
display: block;
width: auto;
}
.staff_sub .staff_content{
float: none;
width: auto;
margin: 0 0 1.5em 0;
padding: 1.5em;
}
.staff_sub .staff_content:last-child{
margin-bottom: 0;
}
.staff_main .comment_wrap .comment_area .comment_head{
display: block;
width: auto;
}
.staff_main .comment_wrap .comment_area .comment_body{
display: block;
width: auto;
}
.staff_sub .comment_wrap .comment_area:first-child{
padding-top: 0;
}
.staff_content_wrap{
font-size: 12px;
}
}
}
/* --------------------------------------------------------------
kouchin_list_wrap
--------------------------------------------------------------*/
.kouchin_list_wrap {
margin: 30px 0 0;
}
.kouchin_list_wrap h3 {
float:left;
position: relative;
padding: 0 0 0 30px;
font-size: 20px;
color: #162143;
margin: 0 0 20px;
}
.kouchin_list_wrap h3:before {
content: "◎";
position: absolute;
top: -4px;
left: 0;
display: inline-block;
font-size:26px;
}
.kouchin_list_wrap .kouchin_list table {
width:100%;
border-top: 1px solid #acacac;
border-right: 1px solid #acacac;
}
.kouchin_list_wrap .kouchin_list thead {
background:#e6e6e6;
}
.kouchin_list_wrap .kouchin_list thead th {
text-align:center;
}
.kouchin_list_wrap .kouchin_list th,
.kouchin_list_wrap .kouchin_list td {
border-left: 1px solid #acacac;
border-bottom: 1px solid #acacac;
padding:6px;
vertical-align:middle;
}
.kouchin_list_wrap .kouchin_list table tbody tr{
display: none;
}
.kouchin_list_wrap .kouchin_btn_wrap {
margin: 20px 0 0 0;
text-align:center;
}
.kouchin_list_wrap .kouchin_btn_wrap a {
position: relative;
display: inline-block;
font-size: 20px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
padding: 0 1.6em 0 0;
}
.kouchin_list_wrap .kouchin_btn_wrap .icon_arrow {
width: 1.4em;
height: 1.4em;
margin: -0.7em 0 0 0;
position: absolute;
top: 50%;
right:0;
background: url(/common/img/icon_arrow_bottom_01.png) no-repeat;
background-size: 100% auto;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transition: transform 0.4s ease 0s;
-webkit-transition: transform 0.4s ease 0s;
-o-transition: transform 0.4s ease 0s;
-ms-transition: transform 0.4s ease 0s;
transition: transform 0.4s ease 0s;
}
.kouchin_list_wrap .kouchin_btn_wrap .active .icon_arrow {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
@media all and (min-width: 901px) {
}
@media screen and (max-width: 900px) {
}
@media screen and (min-width: 701px) and (max-width: 900px) {
.staff_content_wrap{
font-size: 13px;
}
.kouchin_list_wrap .kouchin_btn_wrap a {
font-size: 16px;
}
}
@media screen and (max-width: 700px) {
.kouchin_list_wrap .kouchin_btn_wrap a {
font-size: 14px;
}
}
/* ==================================
detail_base_wrap
===================================*/
#detail_base_wrap .detail_base .detail_base_title p {
float:left;
font-size:15px;
color: #162143;
margin:14px 0 0 5px;
}
/* detail_base_table
--------------------------------------------------------------*/
.detail_base_table {
margin: 10px 0 0 0;
}
.detail_base_table table {
width:100%;
border-top: 1px solid #acacac;
border-right: 1px solid #acacac;
}
.detail_base_table thead {
background:#e6e6e6;
}
.detail_base_table table th,
.detail_base_table table td {
text-align:center;
border-left: 1px solid #acacac;
border-bottom: 1px solid #acacac;
padding: 10px;
vertical-align:middle;
}
.detail_base_table table th{
white-space: nowrap;
}
/* detail_base_table_sp
--------------------------------------------------------------*/
.detail_base_table_sp {
display:none;
}
@media screen and (max-width: 700px) {
#detail_base_wrap .detail_base .detail_base_title p {
font-size: 12px;
margin: 5px 0 0 5px;
}
.detail_base_table {
display:none;
}
.detail_base_table_sp {
display: block;
margin: 10px 0 0 0;
}
.detail_base_table_sp table {
width:100%;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.detail_base_table_sp table th {
width:30%;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px;
vertical-align: middle;
background: #e6e6e6;
}
.detail_base_table_sp table td {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px;
vertical-align: middle;
background: #fff;
}
}
/*
---------------------------------------------- マップページ専用CSS --------------------------------------------------------
*/
/* ==================================
map_wrap
===================================*/
#map_wrap {
/*max-width: 1000px;
margin: 0 auto 50px;*/
}
.map_btn_wrap {
text-align: right;
vertical-align: top;
}
.map_btn_wrap li {
display: inline-block;
letter-spacing: normal;
vertical-align: top;
margin:0 0 0 0.833em;
font-size:18px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
width: 8em;
}
.map_btn_wrap li:first-child{
margin: 0;
}
.map_btn_wrap li a {
display:block;
text-align:center;
padding:5px;
}
.map_btn_wrap li a.btn_type01 {
color:#fff;
border-radius: 5px;
background:#999;
text-decoration: none !important;
}
.map_btn_wrap li a.btn_type01 {
-webkit-transition: opacity 0.4s ease 0s;
-moz-transition: opacity 0.4s ease 0s;
-o-transition: opacity 0.4s ease 0s;
-ms-transition: opacity 0.4s ease 0s;
transition: opacity 0.4s ease 0s;
}
.normal .map_btn_wrap li a.btn_type01:hover {
-ms-filter: "alpha(opacity=70)" ;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
@media screen and (max-width: 900px) {
.map_btn_wrap li {
font-size: 16px;
}
}
@media screen and (max-width: 700px) {
.map_btn_wrap li {
font-size: 14px;
}
}
.touch .map_btn_wrap li:first-child{
display: none;
}
/* ==================================
map_main
===================================*/
.map_main {
float:left;
width:55%;
margin:0 5% 0 0;
}
.map_main .title_wrap {
display: table;
width: 100%;
vertical-align: top;
margin:0 0 20px;
}
.map_main .title_wrap h2 {
display: table-cell;
vertical-align: middle;
padding:5px 0 0;
font-size:21px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.map_main .title_wrap .btn_side{
display: table-cell;
vertical-align: middle;
}
.googlemap_wrap{
position: relative;
height: 400px;
overflow: hidden;
}
.googlemap_wrap .googlemap{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#map_fild_wrap {
height: 440px;
}
#map_fild2_wrap {
height: 400px;
}
@media all and (min-width: 901px) {
}
@media screen and (max-width: 900px) {
}
@media screen and (min-width: 701px) and (max-width: 900px) {
#map_fild_wrap{
height: 260px;
}
#map_fild2_wrap {
height: 260px;
}
}
@media screen and (max-width: 700px) {
.map_main {
float: none;
width: auto;
margin: 0 0 30px 0;
}
#map_fild_wrap{
height: 200px;
}
#map_fild2_wrap {
height: 200px;
}
}
/* ==================================
map_sub
===================================*/
.map_sub {
float:left;
width:40%;
padding:15px;
background:#e6e6e6;
}
.map_sub .title_wrap h3 {
font-size:21px;
margin:0 0 10px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.map_sub .map_sub_inner {
padding:15px;
background:#fff;
}
.map_sub .phone_num{
text-align: left;
}
@media all and (min-width: 901px) {
.map_sub .phone_num a{ font-size: 45px; }
}
@media screen and (max-width: 900px) {
}
@media screen and (min-width: 701px) and (max-width: 900px) {
}
@media screen and (max-width: 700px) {
.map_sub {
float: none;
width: auto;
}
}
/* ---------------------------------------------------
showing
------------------------------------------------------*/
.map_sub .map_sub_inner .showing {
display: table;
width: 100%;
padding:0 0 10px;
border-bottom:solid 1px #e6e6e6;
}
.map_sub .map_sub_inner .showing_body {
display: table-cell;
vertical-align: top;
padding: 0 10px 0 0;
}
.map_sub .map_sub_inner .showing_body h4 {
margin:0 0 15px;
}
.map_sub .map_sub_inner .showing_body .showing_price dl {
font-size:12px;
}
.map_sub .map_sub_inner .showing_body .showing_price dt {
float:left;
max-width:100px;
color:#666;
}
.map_sub .map_sub_inner .showing_body .showing_price dd {
text-align:right;
}
.map_sub .map_sub_inner .showing_body .showing_price dd.total_price .price01 {
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size:14px;
}
.map_sub .map_sub_inner .showing_body .showing_price dd.base_price .price01 {
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size:14px;
color:#666;
}
.map_sub .map_sub_inner .showing_img {
display: table-cell;
vertical-align: top;
width:134px;
}
.map_sub .map_sub_inner .showing_img {
display: table-cell;
vertical-align: top;
width:134px;
}
@media all and (min-width: 901px) {
}
@media screen and (max-width: 900px) {
.map_sub .map_sub_inner .showing_body .showing_price dt{
float: none;
}
.map_sub .map_sub_inner .showing_body .showing_price dd{
text-align: left;
}
}
@media screen and (min-width: 701px) and (max-width: 900px) {
}
@media screen and (max-width: 700px) {
}
/* ---------------------------------------------------
map_sub shop_info
------------------------------------------------------*/
.map_sub .shop_info h5 {
font-size:15px;
line-height:1.4;
margin:0px 0 10px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.map_sub .shop_info .shop_info_body {
font-size:13px;
}
.map_sub .shop_info .shop_info_body dt {
float:left;
}
.map_sub .shop_info .shop_info_body dt.dt_2lines {
float:left;
}
.map_sub .shop_info .shop_info_body dd.dd_2lines {
padding:0 0 0 40px;
}
.map_sub .shop_info .shop_info_body .phone_num_wrap {
margin:10px 0 0;
}
.map_sub .shop_info .shop_info_body .phone_num_wrap .title {
font-size:17px;
color:#f15a24;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
/*
.map_sub .shop_info .shop_info_body .phone_num_wrap .phone_num a {
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size:46px;
color:#f15a24;
}*/
@media all and (min-width: 901px) {
}
@media screen and (max-width: 900px) {
}
@media screen and (min-width: 701px) and (max-width: 900px) {
}
@media screen and (max-width: 700px) {
.map_sub .shop_info .shop_info_body .phone_num_wrap .title {
margin-bottom: 4px;
}
}
/* ==================================
map_print_wrap
===================================*/
#map_print_wrap {
/*max-width: 1000px;
margin: 0 auto 20px;*/
}
#map_print_wrap h2 {
font-size:21px;
margin:0 0 20px;
border-bottom:solid 2px #000;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
#map_print_wrap .map_print_inner {
margin:0 0 30px;
}
#map_print_wrap .map_print_inner_left .shop_info {
padding:5px 15px;
border-bottom:solid 1px #000;
}
#map_print_wrap .map_print_inner_left .shop_info h3 {
font-size:15px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
#map_print_wrap .map_print_inner_left .shop_info .shop_info_body {
font-size:13px;
}
#map_print_wrap .map_print_inner_left .shop_info .shop_info_body dt {
float:left;
}
#map_print_wrap .map_print_inner_left .shop_info .shop_info_body dd {
float:left;
margin:0 20px 0 0;
}
#map_print_wrap .map_print_inner {
display: table;
width: 100%;
border:solid 1px #000;
}
#map_print_wrap .map_print_inner_left {
display: table-cell;
vertical-align: top;
border-right:solid 1px #000;
}
#map_print_wrap .map_print_inner_left .shop_comment {
display: table;
width: 100%;
padding:10px 15px;
}
#map_print_wrap .map_print_inner_left .shop_comment .shop_comment_img {
display: table-cell;
vertical-align: top;
width: 145px;
}
#map_print_wrap .map_print_inner_left .shop_comment .shop_comment_body {
display: table-cell;
vertical-align: top;
padding: 0 0 0 15px;
}
#map_print_wrap .map_print_inner_left .shop_comment .shop_comment_body h4 {
color:#f15a24;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
#map_print_wrap .map_print_inner_left .shop_comment .shop_comment_body .comment {
font-size:12px;
line-height:1.4;
}
#map_print_wrap .map_print_inner_right {
display: table-cell;
vertical-align: top;
width:50%;
}
#map_print_wrap .map_print_inner_right .showing {
padding:20px 15px;
display: table;
width: 100%;
}
#map_print_wrap .map_print_inner_right .showing .showing_img {
display: table-cell;
vertical-align: top;
width: 195px;
}
#map_print_wrap .map_print_inner_right .showing .showing_body {
display: table-cell;
vertical-align: top;
padding: 0 0 0 15px;
/*width: 270px;*/
}
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap {
font-size:12px;
margin:10px 0;
}
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap li {
display:inline-block;
width: auto;
vertical-align:top;
font-size: 12px;
text-align: left;
margin: 0;
}
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap ul li .spec_wrap_spec{
font-size:1em;
}
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap li.spec_01,
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap li.spec_03 {
width:145px;
}
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap li.spec_02,
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap li.spec_04 {
width:90px;
}
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap li .spec_wrap_title {
display:inline-block;
}
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap li .spec_wrap_spec {
display:inline-block;
}
#map_print_wrap .map_print_inner_right .showing .showing_price {
text-align: right;
white-space: nowrap;
}
#map_print_wrap .map_print_inner_right .showing .showing_price dt {
display:inline-block;
color:#666;
font-size:16px;
}
#map_print_wrap .map_print_inner_right .showing .showing_price dd {
display:inline-block;
}
#map_print_wrap .map_print_inner_right .showing .showing_price dd .price01 {
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size:20px;
}
#map_print_wrap .map_print_inner_right .showing .showing_price dd.base_price .price01 {
color:#666;
}
#map_print_wrap .map_btn_wrap{
margin-top: 20px;
}
@media all and (min-width: 901px) {
}
@media screen and (max-width: 900px) {
}
@media screen and (min-width: 701px) and (max-width: 900px) {
}
.touch #map_print_wrap{
display: none;
}
@media screen and (max-width: 700px) {
#map_print_wrap .map_print_inner{
display: block;
}
#map_print_wrap .map_print_inner_left{
display: block;
width: 100%;
}
#map_print_wrap .map_print_inner_right{
display: block;
width: 100%;
}
#map_print_wrap .map_print_inner_right .showing .showing_body{
width: auto;
}
#map_print_wrap .map_print_inner_right .showing .showing_img{
width: 145px;
}
#map_print_wrap .map_print_inner_left .shop_comment .shop_comment_img{
display: block;
width: auto;
margin: 0 0 10px 0;
}
#map_print_wrap .map_print_inner_left .shop_comment .shop_comment_img img{
width: 100%;
max-width: none;
}
#map_print_wrap .map_print_inner_left .shop_comment .shop_comment_body{
display: block;
width: auto;
padding: 0;
}
#map_print_wrap .map_print_inner_right .showing{
display: block;
width: auto;
}
#map_print_wrap .map_print_inner_right .showing .showing_img{
display: block;
width: auto;
margin: 0 0 10px 0;
}
#map_print_wrap .map_print_inner_right .showing .showing_img img{
width: 100%;
max-width: none;
}
#map_print_wrap .map_print_inner_right .showing .showing_body{
display: block;
width: auto;
padding: 0;
}
#map_print_wrap .map_print_inner_right .showing .showing_body .spec_wrap li{
width: auto !important;
margin: 0 10px 0 0 !important;
}
}
@media all and (min-width: 901px) {
}
@media screen and (max-width: 900px) {
}
@media screen and (min-width: 701px) and (max-width: 900px) {
}
@media screen and (max-width: 700px) {
}
/*
---------------------------------------------- ヒストリー専用CSS --------------------------------------------------------
*/
@media screen and (min-width: 701px) and (max-width: 900px) {
}
@media screen and (max-width: 700px) {
}
/* .title_history */
.title_history{
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size: 18px;
margin: 0 0 1em 0;
}
.title_history .text_wrap{
display: inline-block;
vertical-align: bottom;
white-space: nowrap;
text-align: center;
padding: 0 0 0.5em 0;
}
.title_history .text_wrap_in{
display: block;
}
.title_history .text_wrap_in > *{
display: block;
}
.title_history .text_wrap .text01{
width: 16em;
height: 3.12em;
overflow: hidden;
text-indent: 200%;
white-space: nowrap;
background: url(../img/template/title_history.svg);
line-height: 1;
}
.title_history .text_wrap .text02{
margin: 0.5em 0 0 -1em;
line-height: 1.4;
}
@media all and (min-width: 901px) {
}
@media screen and (max-width: 900px) {
}
@media screen and (min-width: 701px) and (max-width: 900px) {
.title_history{ font-size: 15px;}
}
@media screen and (max-width: 700px) {
.title_history{ font-size: 11px;}
}
/* .history_sns */
.history_sns{
position: absolute;
top: 0;
right: 0;
}
/* .history_content_wrap */
.history_content_wrap{
}
.history_content_wrap .history_content{
margin: 0 0 20px 0;
}
.history_content_wrap .history_content_title{
font-size: 20px;
position: relative;
margin: 0 0 1em 0;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.history_content_wrap .history_content_title .text01{
display: inline-block;
position: relative;
z-index: 2;
padding: 0 1em 0 0;
background: #ffffff;
}
.history_content_wrap .history_content_title:after{
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #b2b2b2;
}
.history_content_wrap .history_content:last-child{
margin-bottom: 0;
}
.bg_gray .history_content_wrap .history_content_title .text01{
background: #e6e6e6;
}
.bg_gray .history_content_wrap .history_content_title:after{
background: #ffffff;
}
@media all and (min-width: 901px) {
}
@media screen and (max-width: 900px) {
}
@media screen and (min-width: 701px) and (max-width: 900px) {
.history_content_wrap .history_content_title{
font-size: 18px;
}
}
@media screen and (max-width: 700px) {
.history_content_wrap .history_content_title{
font-size: 15px;
}
}
/* メーカー別ヒストリー */
.history_list_maker_wrap{
margin: 35px 0 0 0;
}
.history_list_maker_wrap .history_list_maker{
padding: 30px 0;
border-top: 1px solid #b2b2b2;
}
.history_list_maker_wrap .history_list_maker:last-child{
padding-bottom: 0;
}
.history_list_maker_wrap .title.type03{
margin-bottom: 30px;
line-height: 1;
}
.history_list_maker_wrap .cms_list_area.history_type .img_wrap{
margin: 0 0 12px 0;
}
.history_list_maker_wrap .cms_list_area.history_type .text_wrap{
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1.2;
}
.history_list_maker_wrap .cms_list_area.history_type .text_wrap .title{
margin: 0 0 0.3em 0;
}
/* 年代別ヒストリー */
#history_year_list01 .img_wrap{
order: 2;
-webkit-order: 2;
padding: 0 0 0 0;
}
#history_year_list01 .text_wrap{
order: 1;
-webkit-order: 1;
padding: 0 4% 0 0;
}
/* table.table-striped */
table.table-striped{
min-width: 700px;
}
table.table-striped th,
table.table-striped td{
padding: 0 3px;
}
table.table-striped a{
color: #223f91;
}
table.table-striped a:hover{
text-decoration: underline;
}
table.table-striped thead th,
table.table-striped thead td{
font-size: 14px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
border-bottom: 2px solid #dddddd;
white-space: nowrap;
}
table.table-striped tbody th,
table.table-striped tbody td{
font-size: 12px;
border-bottom: 1px solid #dddddd;
}
/*
table.table-striped tbody tr:last-child th,
table.table-striped tbody tr:last-child td{
border-bottom: none;
}*/
table.table-striped tbody tr:nth-child(2n) th,
table.table-striped tbody tr:nth-child(2n) td{
background-color: #ffffff;
}
table.table-striped tbody tr:nth-child(2n + 1) th,
table.table-striped tbody tr:nth-child(2n + 1) td{
background-color: #f9f9f9;
}
/* ヒストリー詳細01 */
.history_detail_content_wrap{
margin: 0 0 70px 0;
}
.history_detail_content_wrap:last-child{
margin-bottom: 0;
}
.history_detail_content{
padding: 40px 0 30px 0;
border-top: 1px solid #b2b2b2;
}
.history_detail_content:last-child{
border-bottom: none;
padding-bottom: 0;
}
.history_detail_content .list.type01{
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.history_detail_content .history_detail_content_in{
margin: 30px 0 0 0;
}
.history_detail_content .history_img_wrap{
float: right;
width: 50%;
padding: 0 0 30px 30px;
}
.history_detail_content .history_img_wrap .img_cover{
padding: 0 0 70% 0;
height: 0;
}
/*
.history_detail_content.bottom_btn .left{
float: left;
}
.history_detail_content.bottom_btn .right{
float: right;
}*/
.history_detail_content.bottom_btn .btn_area{
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
}
.history_detail_content.bottom_btn .btn_wrap{
flex-grow: 1;
-webkit-flex-grow: 1;
max-width: 50%;
}
.history_detail_content table.speclist th{
width: 10em;
}
@media screen and (max-width: 700px) {
.history_detail_content{
padding: 20px 15px;
margin: 0 -15px;
}
.history_detail_content .history_detail_content_in{
margin: 20px 0 0 0;
}
.history_detail_content .history_img_wrap{
float: none;
width: auto;
margin: 0 0 15px 0;
padding: 0;
}
.history_detail_content.bottom_btn .btn_area .btn_wrap.type03 .btn{
font-size: 11px;
}
.history_detail_content.bottom_btn .btn_area{
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.history_detail_content.bottom_btn .btn_wrap{
max-width: 100%;
}
}
/* .history_detail_bottom */
.history_detail_bottom{
}
.history_detail_bottom .title.type02{
margin: 0 0 30px 0;
}
.history_detail_bottom{
}
.history_detail_bottom .cms_list_area .img_wrap{
margin: 0 0 12px 0;
}
.history_detail_bottom .cms_list_area .text_wrap{
font-size: 14px;
line-height: 1.2;
}
.history_detail_bottom .cms_list_area .text_wrap .title{
margin: 0 0 0.3em 0;
}
.history_detail_bottom .cms_list_area .text_wrap .price_text{
font-size: 20px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.history_detail_bottom .cms_list_area .text_wrap .price_text .text01{
font-size: 100%;
}
.history_detail_bottom .cms_list_area .text_wrap .price_text .text02{
font-size: 75%;
}
.history_detail_bottom .cms_list_area .text_wrap .price_text .text03{
font-size: 60%;
margin: 0 0 0 0.5em;
}
@media screen and (max-width: 700px) {
.history_detail_content_wrap{
margin: 0 0 35px 0;
}
.history_detail_bottom .cms_list{
padding: 0 15px;
}
.history_detail_bottom .cms_list_area .img_wrap{
margin: 0 0 20px 0;
}
.choice_slider_zone .choice_slider .slick-arrow{
top: calc(37.5vw - 15px);
}
.history_detail_bottom .choice_slider_zone .choice_slider .slick-arrow.slick-prev{
left: 28px;
}
.history_detail_bottom .choice_slider_zone .choice_slider .slick-arrow.slick-next{
right: 28px;
}
}
/*
---------------------------------------------- BB.TV専用CSS --------------------------------------------------------
*/
.title_movie{
margin: 0 0 20px 0;
line-height: 0;
}
@media screen and (max-width: 700px) {
.title_movie{
margin: 0 0 10px 0;
}
#tv_01 .title_movie img{
width: 141px;
}
}
/* .cms_head_text */
.cms_head_text{
letter-spacing: -0.4em;
color: #808080;
font-size: 14px;
line-height: 1;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
margin: 0 0 1em 0;
}
#magazine_list_main .cms_head_text{
font-size: 12px;
}
.cms_head_text > *{
letter-spacing: normal;
display: inline-block;
vertical-align: middle;
padding: 0 1em 0 0;
margin: 0 1em 0 0;
border-right: 1px solid #808080;
}
.cms_head_text > *:last-child{
padding: 0;
margin: 0;
border: none;
}
.cms_head_text .cms_head_text_category li{
margin: 0 1em 0 0;
}
.cms_head_text .cms_head_text_category li:last-child{
margin-right: 0;
}
/* tv_01 */
#tv_01 .cms_head_text{
position: absolute;
top: 0;
left: 60%;
}
#tv_01 .cms_list_area.pc_yoko .cms_list .img_wrap{
width: 60%;
}
#tv_01 .cms_list_area.pc_yoko .cms_list .text_wrap{
width: 40%;
padding: 30px 0 0 0;
}
.movie_ajax_content{
}
.movie_ajax_content.load{
-webkit-transition: opacity 1s ease 0s,transform 1s ease 0s;
-moz-transition: opacity 1s ease 0s,transform 1s ease 0s;
-o-transition: opacity 1s ease 0s,transform 1s ease 0s;
-ms-transition: opacity 1s ease 0s,transform 1s ease 0s;
transition: opacity 1s ease 0s,transform 1s ease 0s;
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-o-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
.movie_ajax_content.load.active{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
#movie_ajax_wrap{
position: relative;
}
@media screen and (max-width: 700px) {
#tv_01{
}
#tv_01 .cms_head_text{
position: static;
}
#tv_01 .cms_list_area.pc_yoko .cms_list .img_wrap{
width: 100%;
}
#tv_01 .cms_list_area.pc_yoko .cms_list .text_wrap{
padding: 0;
width: 100%;
}
}
/* tv_02 */
#tv_02 .cms_list .text_wrap p{
font-size: 12px;
}
@media screen and (max-width: 700px) {
#tv_02{
padding: 0;
background: #ffffff;
}
}
#movie_ajax_btn{
margin: 0;
}
#movie_ajax_btn .btn_wrap{
width: 100%;
font-size: 20px;
line-height: 1;
margin: 0;
}
#movie_ajax_btn .btn{
padding: 1.1em 0;
border-top: 1px solid #b3b3b3;
color: #000000;
}
#movie_ajax_btn .btn.active .btn_text{
min-width: 8em;
}
/* .white_box_wrap */
.white_box_wrap{
background: #ffffff;
border: 1px solid #b3b3b3;
}
.white_box_wrap .white_box_title{
border-bottom: 1px solid #b3b3b3;
font-size: 25px;
line-height: 1;
padding: 0.8em 0;
text-align: center;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color: #162143;
}
.white_box_wrap .white_box{
padding: 26px 22px;
}
@media screen and (max-width: 700px) {
.white_box_wrap{
border-left: none;
border-right: none;
}
.white_box_wrap .white_box_title{
font-size: 18px;
}
.white_box_wrap .white_box{
}
}
/* BBB.TV 詳細 */
.tv_content_zone{
margin: -30px 0 0 0;
}
.tv_content_zone .history_sns{
top: -12px;
}
.tv_head_zone{
background: #000000;
}
.tv_head_zone .tv_head_wrap{
max-width: 1000px;
margin: 0 auto;
}
.tv_head_zone .tv_head_content{
position: relative;
height: 0;
padding: 0 0 56.25% 0;
}
.tv_head_zone .tv_head_content iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tv_content_wrap{
margin: 30px 0 0 0;
padding: 0 20px;
}
.tv_content_wrap .tv_content{
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.tv_content_wrap .tv_title{
margin: 0 0 40px 0;
}
.tv_comment_wrap{
margin: 40px 0 0 0;
}
.tv_content_wrap .tv_content .cms_head_text{
padding: 5px 0 0 0;
}
@media screen and (max-width: 700px) {
.tv_content_zone{
margin: -15px 0 0 0;
}
.tv_content_zone .history_sns{
top: 0px;
}
.tv_content_wrap .tv_title{
margin: 0 0 30px 0;
}
}
/*
---------------------------------------------- マガジンリスト専用CSS --------------------------------------------------------
*/
/* .title_magazine_list */
.title_magazine_list{
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size: 316px;
margin: 0 0 20px 0;
}
.title_magazine_list .text01{
display: block;
white-space: nowrap;
text-indent: 200%;
overflow: hidden;
width: 1em;
height: 0.225em;
background: url(../img/icon/magagine_logo.svg);
}
@media screen and (max-width: 700px) {
.title_magazine_list{
font-size: 158px;
margin: 0 0 10px 0;
}
}
/* .magazine_slider_zone */
.magazine_slider_zone{
}
.magazine_slider_zone .magazine_slider_list{
position: relative;
}
.magazine_slider_zone .slick-slider .magazine_slider_list{
float: left;
}
.magazine_slider_zone .magazine_slider {
position: relative;
margin: 0 0 20px 0;
}
.magazine_slider_zone .slick-slider{
cursor: grab;
}
.magazine_slider_zone .magazine_slier_in{
position: relative;
}
.magazine_slider_zone .magazine_slier_in .img_wrap{
position: relative;
z-index: 1;
}
.magazine_slider_zone .magazine_slier_in .img_cover{
padding: 0 0 40% 0;
height: 0;
}
.magazine_slider_zone .magazine_slier_in .txt_wrap{
position: absolute;
z-index: 2;
bottom: 30px;
left: 0;
width: 100%;
color: #ffffff;
font-size: 24px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.magazine_slider_zone .magazine_slier_in .txt_wrap .blog_name{
font-size: 32px;
}
.magazine_slider_zone .magazine_slier_in .txt_wrap .blog_title{
margin: 15px 0 0 0;
}
.magazine_slider_zone .magazine_slier_in .txt_wrap .blog_title .text01{
font-size: 14px;
line-height: 1;
margin: 0 0 6px 0;
}
.magazine_slider_zone .magazine_slier_in .txt_wrap .blog_title .text02{
font-size: 23px;
}
.magazine_slider_zone .magazine_slier_in .txt{
display: inline-block;
padding: 20px 100px 20px 30px;
background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 1));
}
.magazine_slider_zone .slick-dots {
margin: 30px 0 0 0;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
}
.magazine_slider_zone .slick-dots li {
float: none !important;
position: relative;
display: inline-block;
vertical-align: top;
width: 18px;
height: 18px;
margin: 0 20px 0 0;
padding: 0 !important;
cursor: pointer;
border-radius: 50%;
background: #999 !important;
}
.magazine_slider_zone .slick-dots li.slick-active {
outline: none;
background: #0071bc !important;
}
.magazine_slider_zone .slick-dots li button {
color: transparent;
background: transparent;
display: block;
width: 100%;
height: 100%;
outline: none;
}
@media screen and (max-width: 700px) {
.magazine_slider_zone .magazine_slier_in .txt_wrap{
position: static;
background: #eeeeee;
color: #000000;
font-size: 16px;
}
.magazine_slider_zone .magazine_slier_in .txt{
display: block;
padding: 10px 15px;
background: none;
}
.magazine_slider_zone .magazine_slier_in .txt_wrap .blog_name{
font-size: 16px;
}
.magazine_slider_zone .magazine_slier_in .txt_wrap .blog_title{
margin: 8px 0 0 0;
}
.magazine_slider_zone .magazine_slier_in .txt_wrap .blog_title .text01{
font-size: 11px;
margin: 0 0 5px 0;
}
.magazine_slider_zone .magazine_slier_in .txt_wrap .blog_title .text02{
font-size: 14px;
}
}
#magazine_list_content{
display: flex;
display: -webkit-flex;
width: 100%;
}
@media screen and (max-width: 900px) {
#magazine_list_content{
display: block;
}
}
/* #magazine_list_main */
#magazine_list_content #magazine_list_main{
padding: 0 35px 0 0;
flex-grow: 1;
-webkit-flex-grow: 1;
width: 700px;
}
#magazine_list_content #magazine_list_main:last-child{
padding-right: 0;
width: 100%;
}
@media screen and (max-width: 900px) {
#magazine_list_content #magazine_list_main{
padding: 0;
margin: 0 0 60px 0;
width: auto;
}
#magazine_list_content #magazine_list_main:last-child{
margin-bottom: 0;
}
}
#magazine_list_01 #magazine_list_main .main_content_child02{
padding-bottom: 45px;
border-bottom: 1px solid #a9a9a9;
}
#magazine_list_01 #magazine_list_main .main_content_child02:last-child{
padding-bottom: 0;
border-bottom: none;
}
#magazine_list_content #magazine_list_main .btn_area .btn_wrap.type03 .btn{
font-size: 23px;
}
@media screen and (max-width: 700px) {
#magazine_list_content #magazine_list_main .btn_area .btn_wrap.type03 .btn{
font-size: 20px;
}
#magazine_list_content #magazine_list_main{
padding: 0;
margin: 0 0 30px 0;
}
#magazine_list_01 #magazine_list_main .main_content_child02{
padding-bottom: 20px;
}
}
.news_list .magazine_list_date{
font-size: 12px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
margin: 0 0 0.3em 0;
color: #162143;
}
#magazine_list_main .news_list p{
font-size: 12px;
}
@media all and (min-width: 901px) {
#magazine_list_main .news_list_area.pc_max3 .news_list_wrap{
padding: 0 8px 8px 0;
}
#magazine_list_main .news_list_area.pc_max3 .news_list_wrap:nth-child(3n){
padding-right: 0;
}
}
@media screen and (min-width: 701px) and (max-width: 900px) {
#magazine_list_main .news_list_area.pad_max3 .news_list_wrap{
padding: 0 8px 8px 0;
}
#magazine_list_main .news_list_area.pad_max3 .news_list_wrap:nth-child(3n){
padding-right: 0;
}
}
@media screen and (max-width: 700px) {
#magazine_list_main .news_list_area.sp_max1 .news_list_wrap{
padding: 4px 0;
}
}
/* #magazine_list_sub */
#magazine_list_content #magazine_list_sub{
width: 300px;
}
#magazine_list_content #magazine_list_sub .btn_area{
margin: 20px 0 0 0;
}
#magazine_list_content #magazine_list_sub .btn_area .btn{
padding: 0.6em;
font-size: 18px;
}
#magazine_list_content #magazine_list_sub .btn_area .btn_wrap.type03{
width: 100%;
max-width: 380px;
margin: 0 auto;
}
#magazine_list_content #magazine_list_sub .magazine_sub_rss{
margin: 15px 0 0 0;
padding: 15px 0 0 0;
border-top: 1px solid #d9d9d9;
text-align: right;
}
@media screen and (max-width: 900px) {
#magazine_list_content #magazine_list_sub{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
width: 100%;
}
#magazine_list_content #magazine_list_sub > .magazine_sub_content{
width: 50%;
padding: 0 30px 0 0;
}
#magazine_list_content #magazine_list_sub > .magazine_sub_content:nth-child(2n){
padding: 0;
}
}
@media screen and (max-width: 700px) {
#magazine_list_content #magazine_list_sub{
display: block;
}
#magazine_list_content #magazine_list_sub > .magazine_sub_content{
padding: 0 0 0 0;
width: 100%;
margin: 0 0 30px 0;
}
#magazine_list_content #magazine_list_sub > *:last-child{
margin: 0;
}
}
#magazine_list_content #magazine_list_sub .title.type03{
margin: 0;
}
#magazine_list_content #magazine_list_sub .magazine_sub_content_in{
margin: 20px 0 30px 0;
}
#magazine_list_content #magazine_list_sub .magazine_sub_content_in .cms_list_area{
margin-top: -20px;
}
#magazine_list_content #magazine_list_sub .cms_list_wrap{
margin: 0;
}
#magazine_list_content #magazine_list_sub .cms_list{
padding: 20px 0;
border-bottom: 1px solid #d9d9d9;
}
#magazine_list_content #magazine_list_sub .cms_list:last-child{
padding-bottom: 0;
border-bottom: none;
}
/* #magazine_list_ranking */
#magazine_list_sub #magazine_list_ranking .cms_list .img_cover{
padding: 0 0 120% 0;
}
#magazine_list_sub #magazine_list_ranking .cms_list .img_wrap{
width: 30%;
}
#magazine_list_sub .ranking_block .cms_list .img_wrap:after{
top: -0.87em;
left: -0.87em;
right: auto;
font-size: 13px;
}
#magazine_list_sub #magazine_list_ranking .cms_list .text_wrap{
width: 70%;
}
#magazine_list_sub #magazine_list_ranking .cms_list .text_wrap h3{
font-size: 14px;
}
#magazine_list_sub #magazine_list_ranking .cms_list .text_wrap p{
font-size: 11px;
}
/* #magazine_list_movie */
#magazine_list_sub #magazine_list_movie .cms_list .img_cover{
padding: 0 0 74.5% 0;
}
#magazine_list_sub #magazine_list_movie .cms_list .text_wrap{
position: relative;
padding: 0 0 20px 0;
}
#magazine_list_sub #magazine_list_movie .cms_list .text_wrap .title.type04{
font-size: 13px;
}
#magazine_list_sub #magazine_list_movie .cms_list .text_wrap p{
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
}
/*
---------------------------------------------- マガジン詳細専用CSS --------------------------------------------------------
*/
/* .title_magazine_list */
.title_magazine_contents{
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size: 235px;
margin: 0 0 20px 0;
}
.title_magazine_contents .text01{
display: block;
white-space: nowrap;
text-indent: 200%;
overflow: hidden;
width: 1em;
height: 0.247em;
background: url(../img/icon/magagine_contents_logo.svg);
}
.normal #magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list a:hover .magazine_credit_list_title{
text-decoration: underline !important;
}
@media screen and (max-width: 700px) {
.title_magazine_contents{ font-size: 117px; margin: 0 0 8px 0; }
}
#magazine_detail_01 .magazine_credit_list_title .text01{
background-color: #000000;
}
#magazine_detail_01 .magazine_slider_zone .magazine_slier_in .txt_wrap{
bottom: auto;
top: 30px;
}
#magazine_detail_01 .magazine_credit_list_zone{
margin: 30px 0 0 0;
padding: 0 0 30px 0;
border-bottom: 1px solid #b2b2b2;
}
#magazine_detail_01 .magazine_credit_list_wrap{
font-size: 20px;
letter-spacing: -0.4em;
margin: 0 -3.5em -1em 0;
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list{
display: inline-block;
white-space: nowrap;
vertical-align: middle;
line-height: 1;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
margin: 0 3.5em 1em 0;
letter-spacing: -0.4em;
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list_icon{
margin: 0 1em 0px 0;
letter-spacing: -0.4em;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
line-height: 0;
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list_title{
white-space: nowrap;
display: inline-block;
vertical-align: middle;
letter-spacing: normal;
margin-top: 0;
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list_icon .icon{
display: inline-block;
vertical-align: middle;
margin: 0 1em 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left top;
overflow: hidden;
white-space: nowrap;
text-indent: 200%;
letter-spacing: normal;
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list_icon .icon:last-child{
margin: 0 0 0 0;
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list_icon .icon.icon_human{
width: 1.1em;
height: 1.7em;
background-image: url(../img/icon/icon_human.svg)
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list_icon .icon.icon_memo{
width: 1.6em;
height: 1.6em;
background-image: url(../img/icon/icon_memo.svg)
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list_icon .icon.icon_camera{
width: 1.7em;
height: 1.3em;
background-image: url(../img/icon/icon_camera.svg)
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list_icon .icon.icon_bike_min{
width: 2.6em;
height: 1.45em;
background-image: url(../img/icon/icon_bike_min.svg)
}
@media screen and (max-width: 900px) {
#magazine_detail_01 .magazine_credit_list_wrap{
font-size: 15px;
}
}
@media screen and (max-width: 700px) {
#magazine_detail_01 .magazine_credit_list_zone{
margin: 20px 0 0 0;
padding: 0 0 15px 0;
}
#magazine_detail_01 .magazine_credit_list_wrap{
font-size: 13px;
margin: 0 -1em -1em 0;
}
#magazine_detail_01 .magazine_credit_list_wrap .magazine_credit_list{
margin: 0 1em 1em 0;
display: block;
}
}
/* #magazine_detail_content */
#magazine_detail_content{
}
/* #magazine_control */
#magazine_control{
font-size: 20px;
line-height: 1;
position: relative;
margin: 50px 0;
display: flex;
display: -webkit-flex;
}
#magazine_control:empty{
display: none;
}
#magazine_control li{
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
flex-grow: 1;
-webkit-flex-grow: 1;
display: flex;
display: -webkit-flex;
}
#magazine_control li a{
position: relative;
display: inline-block;
}
#magazine_control li .control_text{
position: relative;
display: block;
}
#magazine_control li .control_text:before,
#magazine_control li .control_text:after{
position: absolute;
top: 0;
}
#magazine_control .prev .control_text{
padding: 0 0 0 2em;
}
#magazine_control .prev .control_text:before{
left: 0;
content:"\03c\03c"
}
#magazine_control .next .control_text{
padding: 0 2em 0 0;
}
#magazine_control .next .control_text:after{
right: 0;
content:"\03e\03e"
}
#magazine_control li .control_title{
line-height: 1.4;
font-size: 80%;
display: block;
margin: 0.25em 0 0 0;
}
/*
#magazine_control .prev .control_title{
margin-left: -0.5em;
}*/
#magazine_control .prev{
display: flex;
display: -webkit-flex;
justify-content: flex-start;
-webkit-justify-content: flex-start;
text-align: left;
padding: 0 20px 0 0;
}
#magazine_control .next{
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
text-align: right;
padding: 0 0 0 20px;
}
/*
#magazine_control .next .control_title{
margin-right: -0.5em;
}*/
/*
#magazine_control .control_title:before{
content:"(";
}
#magazine_control .control_title:after{
content:")";
}*/
/* #pager_multiple_control */
#pager_multiple_control{
margin: 100px 0 100px 0;
padding: 30px 0px 30px 20px;
border-top: 2px solid #cccccc;
border-bottom: 2px solid #cccccc;
background-color: #f2f2f2;
}
@media screen and (max-width: 900px) {
#magazine_control{
font-size: 16px;
}
}
@media screen and (max-width: 700px) {
#magazine_control{
font-size: 14px;
margin: 30px 0;
}
#magazine_control .prev{
padding: 0 10px 0 0;
}
#magazine_control .next{
padding: 0 0 0 10px;
}
}
/* magazine_recommend_btn */
#magazine_recommend_btn{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin: 50px -10px 30px -10px;
}
#magazine_recommend_btn:last-child{
margin-bottom: -20px;
}
#magazine_recommend_btn > *{
margin: 0;
padding: 0 10px 20px 10px;
flex-grow: 1;
-webkit-flex-grow: 1;
width: 50%;
}
#magazine_detail_bottom #magazine_recommend_btn > *{
width: auto;
}
@media screen and (max-width: 900px) {
#magazine_recommend_btn .btn_wrap.type03 .btn{
font-size: 16px;
}
}
@media screen and (max-width: 700px) {
#magazine_recommend_btn{
display: block;
margin: 30px 0;
}
#magazine_recommend_btn:last-child{
margin-bottom: 0;
}
#magazine_recommend_btn > *{
padding: 0;
width: auto;
margin: 0 0 10px 0;
}
#magazine_recommend_btn > *:last-child{
margin: 0;
}
#magazine_recommend_btn .btn_wrap.type03 .btn{
font-size: 15px;
}
}
/* #magazine_detail_list */
#magazine_detail_list{
margin-top: 65px;
}
#magazine_detail_list .news_list_area{
margin: 30px 0 0 0;
}
#magazine_detail_list .news_list p{
font-size: 12px;
}
@media all and (min-width: 901px) {
#magazine_detail_list .news_list_area.pc_max3 .news_list_wrap{
padding: 0 8px 8px 0;
}
#magazine_detail_list .news_list_area.pc_max3 .news_list_wrap:nth-child(3n){
padding-right: 0;
}
}
@media screen and (min-width: 701px) and (max-width: 900px) {
#magazine_detail_list .news_list_area.pad_max3 .news_list_wrap{
padding: 0 8px 8px 0;
}
#magazine_detail_list .news_list_area.pad_max3 .news_list_wrap:nth-child(3n){
padding-right: 0;
}
#magazine_detail_list{
margin-top: 45px;
}
}
@media screen and (max-width: 700px) {
#magazine_detail_list{
margin-top: 30px;
}
#magazine_detail_list .news_list_area{
margin-top: 20px;
}
#magazine_detail_list .news_list_area.sp_max1 .news_list_wrap{
padding: 4px 0;
}
}
/*
---------------------------------------------- 掲載のご案内について専用CSS --------------------------------------------------------
*/
/* #member_content */
#member_content{
display: flex;
display: -webkit-flex;
width: 100%;
}
#member_main{
flex-grow: 1;
-webkit-flex-grow: 1;
padding: 0 40px 0 0;
width: 730px;
}
#member_main .row{
margin: 0;
}
#member_sub{
width: 285px;
}
#member_subnav_wrap{
margin: 0 0 30px 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.4;
}
#member_subnav_wrap h2{
border-bottom: 1px solid #ddd;
padding: 0.5em 0.5em 0 0.5em;
text-align: center;
}
#member_subnav_wrap h2 img{
max-width: 250px;
}
#member_subnav_wrap li{
border-bottom: 1px solid #ddd;
}
#member_subnav_wrap li a{
text-decoration: none !important;
display: block;
padding: 1.2em 0.8em;
color: #223F91;
background-color: #ffffff;
-moz-transition: color 0.4s ease 0s, background-color 0.4s ease 0s;
-o-transition: color 0.4s ease 0s, background-color 0.4s ease 0s;
-ms-transition: color 0.4s ease 0s, background-color 0.4s ease 0s;
-webkit-transition: color 0.4s ease 0s, background-color 0.4s ease 0s;
transition: color 0.4s ease 0s, background-color 0.4s ease 0s;
}
#member_subnav_wrap li:last-child a{
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.normal #member_subnav_wrap li a:hover,
#member_subnav_wrap li a.active{
background-color: #ffffea;
color: #e22f26;
}
#member_subnav_wrap li:last-child{
border-bottom: none;
}
@media screen and (max-width: 700px) {
#member_content{
display: block;
margin: 0 0 40px 0;
}
#member_main{
width: auto;
padding: 0 0 0 0;
margin: 0 0 40px 0;
}
#member_sub{
margin: 0 auto;
width: auto;
}
}
/*
---------------------------------------------- バイク用語辞典専用CSS --------------------------------------------------------
*/
/* .bike_word_head_zone */
.bike_word_head_zone{
position: relative;
}
.bike_word_head_zone .bike_word_head_wrap{
position: relative;
z-index: 2;
}
.bike_word_head_zone .bike_word_head{
display: table;
width: 100%;
height: 400px;
}
.bike_word_head_zone .bike_word_head_in{
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 30px;
}
.bike_word_head_zone .bike_word_head_content{
display: inline-block;
max-width: 436px;
color: #ffffff;
}
.bike_word_head_zone .bike_word_head_content .title{
color: #ffffff;
}
.bike_word_head_zone .bike_word_head_content .d_border_type{
border-color: #ffffff !important;
}
.bike_word_head_zone .bike_word_head_content p{
font-size: 18px;
}
.bike_word_head_zone .bike_word_head_img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
@media screen and (max-width: 900px) {
.bike_word_head_zone .bike_word_head_content p{
font-size: 16px;
}
}
@media screen and (max-width: 700px) {
.bike_word_head_zone .bike_word_head{
height: auto;
}
.bike_word_head_zone .bike_word_head_content p{
font-size: 14px;
}
}
/* .bike_word_serach_list_wrap */
.bike_word_serach_list_wrap{
margin: 0 0 1.4em 0;
font-size: 24px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
line-height: 1;
}
#magazine_list_sub .bike_word_serach_list_wrap{
font-size: 15px;
margin: 0 0 1em 0;
}
#magazine_list_sub .bike_word_serach_list_wrap .bike_word_serach_list{
margin-right: 0 !important;
}
.bike_word_serach_list_wrap:last-child{
margin-bottom: 0 !important;
}
.bike_word_serach_list_wrap .bike_word_serach_list{
margin: 0 -1em -0.5em 0;
letter-spacing: -0.4em;
}
.bike_word_serach_list_wrap .bike_word_serach_list li{
display: inline-block;
vertical-align: top;
margin: 0 1em 0.5em 0;
letter-spacing: normal;
}
.bike_word_serach_list_wrap .bike_word_serach_list li.no_link a{
text-decoration: none !important;
cursor: default !important;
color: #999999;
}
@media screen and (max-width: 900px) {
.bike_word_serach_list_wrap{
font-size: 20px;
}
}
@media screen and (max-width: 700px) {
.bike_word_serach_list_wrap{
font-size: 16px;
}
#magazine_list_sub .bike_word_serach_list_wrap{
font-size: 14px;
}
}
/* BBB NEWS 一覧 */
#bbb_news_detail{
}
#bbb_news_detail .news_detail_date{
line-height: 1;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
margin: 0 0 1em 0;
}
#bbb_news_detail .cms_area{
}
.admin_box_btn_wrap{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}
.admin_box_btn_wrap .admin_box_btn{
margin: 0 20px 0 0;
flex-grow: 1;
-webkit-flex-grow: 1;
}
.admin_box_btn_wrap .admin_box_btn:last-child{
margin-right: 0;
}
.admin_box_btn_wrap .admin_box_btn *{
margin: 0 !important;
}
.admin_box_btn_wrap .admin_box_btn .btn_wrap{
width: 100%;
}
/* SHOP MAPのメールフォーム */
#shop_map_mail{
}
/* #ajax_popup_wrap */
#ajax_popup_wrap{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 99998;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
letter-spacing: -0.4em;
text-align: center;
padding: 0 20px;
}
#ajax_popup_wrap .title.border_type:before{
left: 0;
width: 100%;
}
#ajax_popup_bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 200%;
z-index: 1;
background: rgba(0,0,0,0.7);
}
#ajax_popup_wrap:after{
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
vertical-align: middle;
}
#ajax_popup{
margin: 100px 0px;
max-width: 1000px;
position: relative;
z-index: 2;
display: inline-block;
vertical-align: middle;
width: 100%;
letter-spacing: normal;
text-align: left;
background: #ffffff;
}
#ajax_popup_main{
padding: 50px 30px;
}
#ajax_popup_close{
position: absolute;
top: 0;
right: 0;
z-index: 3;
width: 50px;
height: 50px;
cursor: pointer;
background: #999;
transition: background-color 0.4s ease 0s;
-webkit-transition: background-color 0.4s ease 0s;
-moz-transition: background-color 0.4s ease 0s;
-o-transition: background-color 0.4s ease 0s;
-ms-transition: background-color 0.4s ease 0s;
}
#ajax_popup_close:hover{
background-color: #162143;
}
#ajax_popup_close_in{
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 15px;
margin: -7px 0 0 -10px;
}
#ajax_popup_close_in .bar{
position: absolute;
left: 0;
width: 20px;
height: 1px;
background: #ffffff;
transition: transform 0.4s ease 0s, left 0.4s ease 0s;
-webkit-transition: transform 0.4s ease 0s, left 0.4s ease 0s;
-moz-transition: transform 0.4s ease 0s, left 0.4s ease 0s;
-o-transition: transform 0.4s ease 0s, left 0.4s ease 0s;
-ms-transition: transform 0.4s ease 0s, left 0.4s ease 0s;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
#ajax_popup_close_in .bar.bar01{
top: 0;
}
#ajax_popup_close_in .bar.bar02{
top: 7px;
}
#ajax_popup_close_in .bar.bar03{
top: 14px;
}
#ajax_popup_close_in .bar.bar01{
left: 3px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#ajax_popup_close_in .bar.bar02{
display: none;
}
#ajax_popup_close_in .bar.bar03{
left: 3px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#ajax_popup_main .main_content{
padding-left: 0;
padding-right: 0;
}
@media all and (max-width: 700px ){
#ajax_popup_close{
width: 50px;
height: 50px;
}
#ajax_popup_main{
padding: 25px 15px;
}
}
/* ========================================
お問い合わせページ共通のCSS
==========================================*/
#contact_page .contact_infomation{
width: 300px;
position: fixed;
z-index: 20000;
top: 10px;
left: 10px;
background: #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid #A5E482;
}
#contact_page .contact_infomation .contact_infomation_text .text.type02{
display: none;
}
#contact_page .contact_infomation.active .contact_infomation_text .text.type01{
display: none;
}
#contact_page .contact_infomation.active .contact_infomation_text .text.type02{
display: block;
}
#contact_page .contact_infomation .contact_infomation_text .text.type02 p{
font-weight: bold;
color: #FF1E6E;
}
#contact_page .contact_infomation_text .text p{
font-size: 1.3em;
line-height: 1.8em;
}
#contact_page .contact_infomation_text .text p.leadtext{
color: #0050a3;
font-weight: bold;
}
#contact_page .contact_infomation_text .text p.count{
font-size: 1.5em;
margin: 10px 0 0 0;
}
#contact_page .contact_infomation_text .text p.count span{
display: inline-block;
vertical-align: middle;
}
#contact_page .contact_infomation_text .text p.count strong{
margin: 0 10px;
display: inline-block;
vertical-align: middle;
font-weight: bold;
font-size: 2em;
color: #FF1E6E;
}
#contact_page .check .input_parts .inputerror{
background-color: #E09C9D;
}
#contact_page .input_parts .inputsuccess{
background-color: #A5E482;
}
/* フォーカス時の動作 */
#contact_page .input_parts .inputfocus{
background-color: #94C2D2;
}
#contact_page .input_parts_in{
position: relative;
display: inline-block;
vertical-align: middle;
}
#contact_page .input_parts_content{
position: relative;
}
#contact_page .inline_parts01{
position: relative;
display: inline-block;
vertical-align: middle;
}
/* ie8 placeholder */
#contact_page .placeholder_wrap_textarea{
position: relative;
display: inline-block;
}
#contact_page .placeholder_wrap_textarea.type02{
display: block;
}
#contact_page .placeholder_text{
text-align: left;
top: 0;
left: 0;
cursor: default;
position: absolute;
line-height: 18px;
color: #999999;
background: url(../img/contact/blank.png);
width: 100%;
padding: 15px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* input_parts_in width100%時 */
#contact_page .input_parts_in.block{
display: block;
}
/* テーブル成功時 */
#contact_page .table_tr.complete{
background: #D0F9EE;
}
/* テーブル不正解時 */
#contact_page .table_tr.miss{
background: #ECBCBD;
}
/* 入力補助文字 */
#contact_page .input_textparts{
position: absolute;
min-width: 300px;
z-index: 9999;
}
#contact_page .input_textparts .intro_text{
margin: 10px 0 0 0;
display: none;
background: #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-size: 0.8em;
line-height: 1.3em;
}
#contact_page .input_textparts .intro_text:before{
content: "";
display: block;
position: absolute;
top: -7px;
left: 40px;
margin: 0 0 0 -14px;
width: 28px;
height: 20px;
}
#contact_page .input_textparts .intro_text.default{
border: 3px solid #4EBCD4;
}
#contact_page .input_textparts .intro_text.default:before{
background: url(../img/contact/text_arrow_default.png) no-repeat;
}
#contact_page .input_textparts .intro_text.error{
color: #FF0000;
border: 3px solid #D79495;
}
#contact_page .input_textparts .intro_text.error:before{
background: url(../img/contact/text_arrow_error.png) no-repeat;
}
/* .check_parts */
#contact_page .check_parts input{
display: none;
}
#contact_page .check_list{
background: none !important;
}
#contact_page .check_list .check_parts{
display: inline-block;
font-size: 1em;
line-height: 1.6em;
cursor: pointer;
margin: 0 20px 0 0;
}
#contact_page .check_list .check_parts .checkbox{
display: inline-block;
vertical-align: middle;
position: relative;
width: 14px;
height: 14px;
border: 1px solid #0050a3;
margin: 0 10px 0 0;
background: #ffffff;
}
#contact_page .check_list .check_parts.check_success .checkbox:after{
content: "";
position: absolute;
top: -4px;
left: 0px;
display: block;
width: 21px;
height: 15px;
background: url(../img/contact/check_mark.png) no-repeat;
background-size: 21px 15px;
}
#contact_page .check_list .check_parts strong{
display: inline-block;
vertical-align: middle;
font-size: 1em;
line-height: 1.6em;
}
#contact_page .contact_select_box{
position: relative;
width: 350px;
height: 50px;
}
#contact_page .contact_select_box .contact_select_text{
border: 1px solid #0050a3;
width: 100%;
padding: 15px;
height: 50px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#contact_page .contact_select_box:after{
content: "";
position: absolute;
z-index: 1;
width: 50px;
height: 100%;
right: 0;
top: 0;
background-image: url(../img/contact/select_arrow.png);
background-repeat: no-repeat;
background-color: #0050a3;
background-size: 20px 10px;
background-position: center center
}
#contact_page .contact_select_box select{
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
cursor: pointer;
top: 0;
left: 0;
-ms-filter: "alpha(opacity=0)" ;
-khtml-opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
@media screen and (min-width: 0px) and (max-width: 699px) {
#contact_page .contact_infomation{
width: 300px;
position: fixed;
z-index: 20000;
top: auto;
bottom: 10px;
left: 50%;
margin: 0 0 0 -150px;
}
#contact_page .input_textparts{
position: absolute;
min-width: 200px;
}
#contact_page .input_parts_in{
display: block;
}
#contact_page .placeholder_text{
text-align: left;
top: 0;
left: 0;
cursor: default;
position: absolute;
line-height: 18px;
color: #999999;
background: url(../img/contact/blank.png);
width: 100%;
padding: 10px 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* .check_parts */
#contact_page .check_parts input{
display: none;
}
#contact_page .check_list .check_parts{
display: inline-block;
font-size: 1em;
line-height: 1.6em;
cursor: pointer;
margin: 0 20px 0 0;
background: none !important;
}
#contact_page .check_list .check_parts .checkbox{
display: inline-block;
vertical-align: middle;
position: relative;
width: 14px;
height: 14px;
border: 1px solid #0050a3;
margin: 0 10px 0 0;
background: #ffffff;
}
#contact_page .check_list .check_parts.inputsuccess .checkbox:after{
content: "";
position: absolute;
top: -4px;
left: 0px;
display: block;
width: 21px;
height: 15px;
background: url(../img/contact/check_mark.png) no-repeat;
background-size: 21px 15px;
}
#contact_page .check_list .check_parts strong{
display: inline-block;
vertical-align: middle;
font-size: 1em;
line-height: 1.6em;
}
#contact_page .contact_select_box{
position: relative;
width: 100%;
height: 40px;
}
#contact_page .contact_select_box .contact_select_text{
border: 1px solid #0050a3;
width: 100%;
padding: 15px;
height: 40px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#contact_page .contact_select_box:after{
content: "";
position: absolute;
z-index: 1;
width: 40px;
height: 100%;
right: 0;
top: 0;
background-image: url(../img/contact/select_arrow.png);
background-repeat: no-repeat;
background-color: #0050a3;
background-size: 20px 10px;
background-position: center center
}
#contact_page .contact_select_box select{
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
cursor: pointer;
top: 0;
left: 0;
-ms-filter: "alpha(opacity=0)" ;
-khtml-opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
}
#contact_page .red{
color: #ed0707;
}
#contact_page .contact_block h2 img{
max-width: 26px;
margin: 0 10px 0 0;
vertical-align: top;
}
/* ボタンエリア */
#contact_page .contact_btn_area{
text-align: center;
}
#contact_page .contact_btn_area.active .confirm{
display: none !important;
}
#contact_page .contact_btn_area .send{
display: none !important;
}
#contact_page .contact_btn_area.active .send{
display: inline-block !important;
}
#contact_page .contact_btn_area a{
text-decoration: none !important;
}
#contact_page .contact_btn_area .color01{
background: #0050a3;
}
#contact_page .contact_btn_area .color02{
background: #DC1417;
}
@media screen and (min-width: 700px) {
#contact_page textarea{
width: 100%;
height: 200px;
padding: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #0050a3;
}
#contact_page input[type="text"]{
padding: 15px;
height: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #0050a3;
max-width: 100%;
}
#contact_page input[type="text"].type01{
width: 348px;
}
#contact_page input[type="text"].type02{
width: 348px;
}
#contact_page .all_wrap{
font-size: 10px;
padding: 60px 20px;
background: #f1f4fa;
}
#contact_page .contact_btn_area input[type="button"]{
font-size: 1.3em;
border: 0px;
vertical-align: top;
display: inline-block;
width: 300px;
height: 50px;
margin: 0 10px;
color: #ffffff;
}
#contact_page .contact_btn_area input[type="submit"]{
font-size: 1.3em;
border: 0px;
vertical-align: top;
display: inline-block;
width: 300px;
height: 50px;
margin: 0 10px;
color: #ffffff;
}
#contact_page .contact_btn_area .contact_btn{
cursor: pointer;
font-size: 1.3em;
border: 0px;
vertical-align: top;
display: inline-block;
width: 300px;
height: 50px;
line-height: 50px;
margin: 0 10px;
color: #ffffff;
}
#contact_page .contact_btn_area .contact_btn_off{
font-size: 1.3em;
border: 0px;
vertical-align: top;
display: inline-block;
width: 300px;
height: 50px;
line-height: 50px;
margin: 0 10px;
color: #ffffff;
}
#contact_page .contact_wrap{
max-width: 880px;
background: #ffffff;
margin: 0 auto;
padding: 40px 40px 80px 40px;
}
#contact_page .contact_wrap h1{
font-size: 2.8em;
text-align: center;
margin: 0 0 80px 0;
color: #07194c;
font-weight: bold;
}
#contact_page .contact_wrap p.lead{
font-size: 1.5em;
line-height: 1.38em;
color: #0050a3;
margin: 0 0 15px 0;
}
#contact_page .contact_btn_area .contact_btn.one_watch{
cursor: pointer;
font-size: 1.0em;
border: 0px;
vertical-align: top;
display: inline-block;
width: 100px;
height: 24px;
line-height: 24px;
margin: 0 10px;
color: #ffffff;
}
#contact_page .contact_btn_area2 .contact_btn.m_one_watch{
cursor: pointer;
font-size: 1.0em;
border: 0px;
vertical-align: middle;
display: inline-block;
width: 100px;
height: 24px;
line-height: 24px;
margin: 0 10px;
color: #ffffff;
}
/* .contact_block */
#contact_page .contact_block{
margin: 60px 0;
}
#contact_page .contact_block h2{
font-size: 2.0em;
color: #0050a3;
font-weight: bold;
padding: 0 0 10px 0;
margin: 0 0 40px 0;
border-bottom: 3px solid #0050a3;
}
/* .contact_head */
#contact_page .contact_head_left{
float: left;
max-width: 540px;
width: 61.3%;
}
#contact_page .contact_head_right{
float: right;
max-width: 300px;
width: 34%;
}
#contact_page .contact_shop{
color: #0050a3;
display: table;
width: 100%;
margin: 15px 0 0 0;
}
#contact_page .contact_shop .contact_shop_img{
display: table-cell;
width: 26px;
padding: 0 6px 0 0;
}
#contact_page .contact_shop .contact_shop_img img{
max-width: 26px;
}
#contact_page .contact_shop .contact_shop_text{
display: table-cell;
vertical-align: middle;
}
#contact_page .contact_shop .contact_shop_text dl{
display: table;
width: 100%;
font-size: 1.4em;
}
#contact_page .contact_shop .contact_shop_text dl dt{
width: 156px;
display: table-cell;
vertical-align: top;
}
#contact_page .contact_shop .contact_shop_text dl dd{
display: table-cell;
vertical-align: top;
}
/* .contact_table */
#contact_page .contact_table .table_tr{
display: table;
width: 100%;
}
#contact_page .contact_table .table_tr .table_th{
display: table-cell;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#contact_page .contact_table .table_tr .table_th .table_th_title{
position: relative;
font-weight: bold;
}
#contact_page .contact_table .table_tr.check .table_th_title:after{
content: "必須";
position: absolute;
top: -3px;
right: 0;
display:block;
color: #ffffff;
background: #d60404;
font-size: 12px;
line-height: 18px;
width: 40px;
text-align: center;
}
#contact_page .contact_table .table_tr .table_td{
display: table-cell;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#contact_page .contact_table.type01{
border-top: 1px solid #0050a3;
}
#contact_page .contact_table.type01 .table_tr .table_td{
padding: 10px;
font-size: 1.3em;
line-height: 1.3em;
color: #091538;
vertical-align: top;
text-align: left;
border-right: 1px solid #0050a3;
border-bottom: 1px solid #0050a3;
}
#contact_page .contact_table.type01 .table_tr .table_th{
width: 30%;
padding: 10px;
font-size: 1.5em;
line-height: 1.3em;
vertical-align: top;
text-align: center;
background: #0050a3;
color: #ffffff;
border-right: 1px solid #0050a3;
border-bottom: 1px solid #ffffff;
}
#contact_page .contact_table.type01 .table_tr.last .table_th{
border-bottom: 1px solid #0050a3;
}
#contact_page .contact_table.type02{
border-top: 1px solid #0050a3;
}
#contact_page .contact_table.type02 .table_tr .table_th{
width: 220px;
padding: 15px 10px;
font-size: 1.5em;
line-height: 1.3em;
font-weight: bold;
vertical-align: top;
text-align: left;
color: #091538;
border-right: 1px solid #0050a3;
border-bottom: 1px solid #0050a3;
}
#contact_page .contact_table.type02 .table_tr .table_th small{
display: block;
font-size: 0.8em;
line-height: 1.2em;
margin: 5px 0 0 0;
}
#contact_page .contact_table.type02 .table_tr .table_td{
padding: 15px 15px;
font-size: 1.4em;
line-height: 1.3em;
color: #091538;
vertical-align: top;
text-align: left;
border-bottom: 1px solid #0050a3;
}
/* .contact_table_in */
#contact_page .contact_table_in .table_in_tr{
display: table;
width: 100%;
}
#contact_page .contact_table_in .table_in_tr .table_in_th{
display: table-cell;
text-align: left;
width: 160px;
padding: 0 0 20px 0;
}
#contact_page .contact_table_in .table_in_tr .table_in_td{
display: table-cell;
text-align: left;
padding: 0 0 20px 0;
}
}
@media screen and (min-width: 700px) and (max-width: 880px) {
#contact_page .contact_table.type02 .table_tr .table_th{
width: 200px;
padding: 15px 10px;
font-size: 1.5em;
line-height: 1.3em;
font-weight: bold;
vertical-align: top;
text-align: left;
color: #091538;
border-right: 1px solid #0050a3;
border-bottom: 1px solid #0050a3;
}
/* .contact_table_in */
#contact_page .contact_table_in .table_in_tr{
display: block !important;
width: 100%;
}
#contact_page .contact_table_in .table_in_tr .table_in_th{
display: block !important;
text-align: left;
padding: 0 0 20px 0;
}
#contact_page .contact_table_in .table_in_tr .table_in_td{
display: block !important;
text-align: left;
padding: 0 0 20px 0;
}
}
@media screen and (min-width: 0px) and (max-width: 699px) {
#contact_page textarea{
width: 100%;
height: 180px;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #0050a3;
}
#contact_page input[type="text"]{
padding: 10px;
height: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #0050a3;
max-width: 100%;
}
#contact_page input[type="text"].type01{
width: 100%;
}
#contact_page input[type="text"].type02{
width: 100%;
}
#contact_page .all_wrap{
font-size: 10px;
padding: 10px 10px 150px 10px;
background: #f1f4fa;
}
#contact_page .contact_btn_area input[type="button"]{
font-size: 1.3em;
border: 0px;
vertical-align: top;
display: inline-block;
width: 100%;
height: 50px;
color: #ffffff;
}
#contact_page .contact_btn_area .contact_btn{
cursor: pointer;
font-size: 1.3em;
border: 0px;
vertical-align: top;
display: inline-block;
width: 100%;
height: 50px;
line-height: 50px;
color: #ffffff;
}
#contact_page .contact_wrap{
background: #ffffff;
margin: 0 auto;
padding: 40px 15px 80px 15px;
}
#contact_page .contact_wrap h1{
font-size: 2.4em;
text-align: center;
margin: 0 0 30px 0;
color: #07194c;
font-weight: bold;
}
#contact_page .contact_wrap p.lead{
font-size: 1.3em;
line-height: 1.38em;
color: #0050a3;
margin: 0 0 15px 0;
}
/* .contact_block */
#contact_page .contact_block{
margin: 30px 0;
}
#contact_page .contact_block h2{
font-size: 1.6em;
color: #0050a3;
font-weight: bold;
padding: 0 0 10px 0;
margin: 0 0 20px 0;
border-bottom: 3px solid #0050a3;
}
/* .contact_head */
#contact_page .contact_head_left{
margin: 0 0 20px 0;
}
#contact_page .contact_head_right{
text-align: center;
margin: 0 0 20px 0;
}
#contact_page .contact_shop{
margin: 10px 0 0 0;
color: #0050a3;
display: table;
width: 100%;
}
#contact_page .contact_shop .contact_shop_img{
display: table-cell;
vertical-align: middle;
width: 26px;
padding: 0 6px 0 0;
}
#contact_page .contact_shop .contact_shop_img img{
max-width: 26px;
}
#contact_page .contact_shop .contact_shop_text{
display: table-cell;
vertical-align: middle;
}
#contact_page .contact_shop .contact_shop_text dl{
width: 100%;
font-size: 1.2em;
}
#contact_page .contact_shop .contact_shop_text dl dt{
line-height: 1.6em;
}
#contact_page .contact_shop .contact_shop_text dl dd{
line-height: 1.6em;
}
/* .contact_table */
#contact_page .contact_table .table_tr{
display: table;
width: 100%;
}
#contact_page .contact_table .table_tr .table_th{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#contact_page .contact_table .table_tr .table_th .table_th_title{
position: relative;
font-weight: bold;
}
#contact_page .contact_table .table_tr.check .table_th_title:after{
content: "必須";
position: absolute;
top: -3px;
right: 0;
display:block;
color: #ffffff;
background: #d60404;
font-size: 12px;
line-height: 18px;
width: 40px;
text-align: center;
}
#contact_page .contact_table .table_tr .table_td{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#contact_page .contact_table.type01{
border-top: 1px solid #0050a3;
}
#contact_page .contact_table.type01 .table_tr .table_td{
padding: 10px;
font-size: 1.3em;
line-height: 1.3em;
color: #091538;
vertical-align: top;
text-align: left;
border-right: 1px solid #0050a3;
border-left: 1px solid #0050a3;
border-bottom: 1px solid #0050a3;
}
#contact_page .contact_table.type01 .table_tr .table_th{
padding: 10px;
font-size: 1.3em;
line-height: 1.3em;
vertical-align: top;
text-align: center;
background: #0050a3;
color: #ffffff;
border-right: 1px solid #0050a3;
border-left: 1px solid #0050a3;
border-bottom: 1px solid #0050a3;
}
#contact_page .contact_table.type01 .table_tr.last .table_th{
border-bottom: 1px solid #0050a3;
}
#contact_page .contact_table.type02{
border-top: 1px solid #0050a3;
}
#contact_page .contact_table.type02 .table_tr .table_th{
padding: 15px;
font-size: 1.2em;
line-height: 1.2em;
font-weight: bold;
vertical-align: top;
text-align: left;
color: #091538;
border-bottom: 1px solid #0050a3;
}
#contact_page .contact_table.type02 .table_tr .table_th small{
display: block;
font-size: 0.8em;
line-height: 1.2em;
margin: 5px 0 0 0;
}
#contact_page .contact_table.type02 .table_tr .table_td{
padding: 15px;
font-size: 1.2em;
line-height: 1.2em;
color: #091538;
vertical-align: top;
text-align: left;
border-bottom: 1px solid #0050a3;
}
/* .contact_table_in */
#contact_page .contact_table_in .table_in_tr{
width: 100%;
}
#contact_page .contact_table_in .table_in_tr .table_in_th{
text-align: left;
padding: 0 0 20px 0;
}
#contact_page .contact_table_in .table_in_tr .table_in_td{
text-align: left;
padding: 0 0 20px 0;
}
}
#contact_page #submitbox {
display: block;
margin: 15px auto 20px;
width: 300px;
}
/* コンタクト打ち消し用 */
#contact_page .contact_infomation{
top: auto !important;
bottom: 10px !important;
}
#contact_page .contact_shop .contact_shop_text dl dd{
word-break: break-all;
}
/* #shop_news_popup */
#shop_news_slide_zone .shop_news_content{
display: none;
}
#shop_news_slide_zone .news_list_area .news_list .news_list_date{
line-height: 1;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color: #808080;
font-size: 90%;
}
#shop_news_slide_zone .news_list_area .news_list .news_list_title{
font-size: 110%;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
#shop_news_popup{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
z-index: 60000;
-ms-filter: "alpha(opacity=0)" ;
-khtml-opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
#shop_news_popup_head{
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
background: #ffffff;
height: 69px;
border-bottom: solid 1px #d9d9d9;
font-size: 20px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
#shop_news_popup_head_in {
position: relative;
height: 100%;
display: flex;
display: -webkit-flex;
padding: 10px 85px 10px 20px;
align-items: center;
-webkit-align-items: center;
justify-content: flex-start;
-webkit-justify-content: flex-start;
}
#shop_news_close {
position: absolute;
z-index: 2;
top: 0;
right: 0;
width: 69px;
height: 69px;
background: #e8e8e8;
cursor: pointer;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
#shop_news_close_in {
position: relative;
width: 30px;
height: 17px;
}
#shop_news_close .bar {
position: absolute;
left: 0;
width: 30px;
height: 1px;
background: #000000;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
#shop_news_close .bar.bar01 {
-webkit-transform: rotate(45deg) translate(0px, -7px);
-moz-transform: rotate(45deg) translate(0px, -7px);
-o-transform: rotate(45deg) translate(0px, -7px);
-ms-transform: rotate(45deg) translate(0px, -7px);
transform: rotate(45deg) translate(0px, -7px);
}
#shop_news_close .bar.bar01 {
top: 3px;
}
#shop_news_close .bar.bar02 {
-webkit-transform: rotate(-45deg) translate(3px, 3px);
-moz-transform: rotate(-45deg) translate(3px, 3px);
-o-transform: rotate(-45deg) translate(3px, 3px);
-ms-transform: rotate(-45deg) translate(3px, 3px);
transform: rotate(-45deg) translate(3px, 3px);
}
#shop_news_close .bar.bar02 {
top: 19px;
}
#shop_news_popup_head_title {
font-size: 25px;
position: relative;
line-height: 1;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
#shop_news_popup_in{
padding-top: 70px;
height: 100%;
}
#shop_news_detail_slide{
position: relative;
height: 100%;
}
#shop_news_detail_slide .shop_news_block{
float: left;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
#shop_news_detail_slide .shop_news_block_bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#shop_news_detail_slide .shop_news_block_in{
padding: 40px 20px 110px 20px;
min-height: 100%;
}
#shop_news_detail_slide .shop_news_content{
position: relative;
z-index: 2;
/*max-width: 1000px;*/
max-width: 700px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
min-height: calc(100vh - 220px);
}
#shop_news_detail_slide .shop_news_content .shop_news_head_image{
margin: 0 0 40px 0;
text-align: center;
line-height: 0;
}
#shop_news_detail_slide .shop_news_date{
font-size: 14px;
line-height: 1;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color: #808080;
margin: 0 0 0.4em 0;
}
#shop_news_detail_slide .shop_news_title{
font-size: 20px;
line-height: 1.2;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color: #162143;
}
#shop_news_detail_slide .shop_news_head{
padding: 0 0 12px 0;
margin: 0 0 20px 0;
border-bottom: 1px solid #808080;
}
#shop_news_detail_slide .slick-list,
#shop_news_detail_slide .slick-track{
height: 100%;
}
#shop_news_detail_slide .slick-arrow{
position: absolute;
bottom: 0;
}
#shop_news_detail_slide .slick-dots{
position: absolute;
bottom: 0;
}
#shop_news_popup_bottom{
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
background: #ffffff;
height: 69px;
border-bottom: solid 1px #d9d9d9;
font-size: 20px;
padding: 10px 20px;
}
#shop_news_popup_bottom_in {
position: relative;
height: 100%;
}
#shop_news_popup_bottom_arrow{
position: absolute;
top: 50%;
left: 0;
display: flex;
display: -webkit-flex;
line-height: 1;
margin: -0.5em 0 0 0;
}
#shop_news_popup_bottom_arrow .slick-arrow{
display: block;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
position: relative;
line-height: 1;
cursor: pointer;
margin: 0 1em 0 0;
}
#shop_news_popup_bottom_arrow .slick-arrow:last-child{
margin: 0 0 0 0;
}
#shop_news_popup_bottom_arrow .slick-arrow:after,
#shop_news_popup_bottom_arrow .slick-arrow:before{
content: "";
position: absolute;
top: 0.3em;
width: 0.4em;
height: 0.4em;
border-left: 2px solid #000000;
border-bottom: 2px solid #000000;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.html_hidden{
overflow: hidden !important;
}
#shop_news_popup_bottom_arrow .slick-arrow.slick-prev{
padding: 0 0 0 1em;
}
#shop_news_popup_bottom_arrow .slick-arrow.slick-prev:after,
#shop_news_popup_bottom_arrow .slick-arrow.slick-prev:before{
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#shop_news_popup_bottom_arrow .slick-arrow.slick-prev:before {
left: 0;
}
#shop_news_popup_bottom_arrow .slick-arrow.slick-prev:after {
left: 0.5em;
}
#shop_news_popup_bottom_arrow .slick-arrow.slick-next{
padding: 0 1em 0 0;
}
#shop_news_popup_bottom_arrow .slick-arrow.slick-next:after,
#shop_news_popup_bottom_arrow .slick-arrow.slick-next:before{
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
#shop_news_popup_bottom_arrow .slick-arrow.slick-next:before {
right: 0;
}
#shop_news_popup_bottom_arrow .slick-arrow.slick-next:after {
right: 0.5em;
}
#shop_popup_number{
position: absolute;
top: 50%;
right: 0;
margin: -0.5em 0 0 0;
font-size: 150%;
line-height: 1;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
line-height: 1;
}
#shop_popup_number .text01{
color: #ff0000;
}
#shop_popup_number .text02{
color: #808080;
margin: 0 0.15em;
}
#shop_popup_number .text03{
color: #162143;
}
@media screen and (max-width: 700px) {
#shop_news_popup_head{
height: 46px;
padding: 5p 60px 5px 10px;
}
#shop_news_popup_head_in {
padding: 10px 59px 10px 15px;
}
#shop_news_popup_head_title{
font-size: 14px;
}
#shop_news_close {
width: 46px;
height: 46px;
}
#shop_news_popup_in{
padding-top: 46px;
}
#shop_news_detail_slide .shop_news_block_in{
padding: 30px 15px 80px 15px;
}
#shop_news_popup_bottom{
height: 46px;
padding: 10px;
font-size: 13px;
}
#shop_news_detail_slide .shop_news_content{
padding: 20px 12px;
}
#shop_news_detail_slide .shop_news_content{
min-height: calc(100vh - 157px);
}
#shop_news_detail_slide .shop_news_head{
padding-bottom: 7px;
}
#shop_news_detail_slide .shop_news_title{
font-size: 15px;
}
#shop_news_detail_slide .shop_news_content .shop_news_head_image{
margin: 0px 0 20px 0;
}
}
/* バイクのポップアップjs */
.bike_search_list_block_wrap{
margin: 30px 0 60px 0;
}
.bike_search_list_block{
max-width: 1000px;
margin: 30px auto 30px auto;
padding: 20px;
border: 1px solid #b2b2b2;
}
.bike_search_list_block:last-child{
margin-bottom: 0;
}
.category_list.type_keyword.bike_search_list{
margin: 0 -5px -5px 0;
}
.category_list.type_keyword.bike_search_list li{
margin: 0 5px 5px 0;
}
.category_list.type_keyword.bike_search_list li a{
padding: 0 5px 0;
text-align: left;
}
@media screen and (max-width: 700px) {
#bike_cat_word_list .category_list.type_keyword.bike_search_list li:nth-child(n + 4){
display: none;
}
.bike_search_list_block{
margin: 0 auto 20px auto;
}
.bike_search_list_block_wrap{
margin: 7px auto 20px auto;
}
}
#bike_cat_popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
z-index: 60000;
display: none;
}
#bike_cat_popup_close {
position: absolute;
z-index: 3;
top: 0;
right: 0;
width: 69px;
height: 69px;
cursor: pointer;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
#bike_cat_popup_close_in {
position: relative;
width: 30px;
height: 17px;
}
#bike_cat_popup_close .bar {
position: absolute;
left: 0;
width: 30px;
height: 1px;
background: #ffffff;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
#bike_cat_popup_close .bar.bar01 {
-webkit-transform: rotate(45deg) translate(0px, -7px);
-moz-transform: rotate(45deg) translate(0px, -7px);
-o-transform: rotate(45deg) translate(0px, -7px);
-ms-transform: rotate(45deg) translate(0px, -7px);
transform: rotate(45deg) translate(0px, -7px);
}
#bike_cat_popup_close .bar.bar01 {
top: 3px;
}
#bike_cat_popup_close .bar.bar02 {
-webkit-transform: rotate(-45deg) translate(3px, 3px);
-moz-transform: rotate(-45deg) translate(3px, 3px);
-o-transform: rotate(-45deg) translate(3px, 3px);
-ms-transform: rotate(-45deg) translate(3px, 3px);
transform: rotate(-45deg) translate(3px, 3px);
}
#bike_cat_popup_close .bar.bar02 {
top: 19px;
}
#bike_cat_popup_in{
overflow-x: hidden;
overflow-y: scroll;
height: 100%;
letter-spacing: -0.4em;
white-space: nowrap;
text-align: center;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
#bike_cat_popup_in:after{
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
#bike_cat_popup_block_content{
display: inline-block;
letter-spacing: normal;
text-align: left;
width: 100%;
padding: 80px 20px;
vertical-align: middle;
white-space: normal;
}
#bike_cat_popup_block_content_in{
position: relative;
z-index: 2;
padding: 30px;
background-color: #ffffff;
}
#bike_cat_popup_bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* .bike_magazine_search_wrap.bike_search_list_block */
/*
.bike_magazine_search_wrap .bike_search_list_block.history_detail_bottom{
margin-top: 30px;
margin-bottom: 30px;
}
.bike_magazine_search_wrap .bike_search_list_block.history_detail_bottom .choice_slider_zone{
margin-bottom: -16px;
margin-top: 10px;
}
.bike_magazine_search_wrap .bike_search_list_block.history_detail_bottom .cms_list_area .text_wrap{
font-size: 12px;
}
.bike_magazine_search_wrap .bike_search_list_block.history_detail_bottom .cms_list_area .text_wrap .price_text{
font-size: 16px;
}*/
/*
.shop_list.bike_block .bike_block_sub .choices_img_wrap {
padding-left: 15px;
padding-right: 15px;
}*/
.bike_magazine_search_wrap .bike_search_list_block{
margin-top: 30px;
margin-bottom: 30px;
}
.magazine_bike_choice {
margin: 0 -15px -15px 0;
letter-spacing: -0.4em;
}
.magazine_bike_choice li{
width: 20%;
padding: 0 15px 15px 0;
display: inline-block;
vertical-align: top;
letter-spacing: normal;
white-space: normal;
}
.magazine_bike_choice .magazine_bike_choice_block{
font-size: 12px;
}
.magazine_bike_choice .magazine_bike_choice_block .img_wrap{
margin-bottom: 10px;
}
.magazine_bike_choice .magazine_bike_choice_block .text_wrap .price_text{
font-size: 145%;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
}
.magazine_bike_choice .magazine_bike_choice_block .text_wrap .price_text .text01{
font-size: 100%;
}
.magazine_bike_choice .magazine_bike_choice_block .text_wrap .price_text .text02{
font-size: 75%;
}
.magazine_bike_choice .magazine_bike_choice_block .text_wrap .price_text .text03{
font-size: 60%;
margin: 0 0 0 0.5em;
}
@media screen and (min-width: 701px) and (max-width: 950px) {
.magazine_bike_choice li{ width: 20%; }
}
@media screen and (min-width: 701px) {
#magazine_detail_content + .bike_magazine_search_wrap{
height: 0;
overflow: hidden;
}
}
@media screen and (max-width: 700px) {
/*.magazine_credit_list_zone + .bike_magazine_search_wrap{
height: 0;
overflow: hidden;
}*/
.magazine_bike_choice {
display: inline-block;
letter-spacing: -0.4em;
white-space: nowrap;
margin: 0;
}
.magazine_bike_choice li{
/*width: 140px;*/
width: 120px;
margin-right: 15px;
padding: 0;
}
.magazine_bike_choice li:last-child{
margin-right: 0;
}
}
/* #magazine_date_list */
#magazine_date_list .magazine_date_wrap{
display: flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -50px -50px 0;
}
#magazine_date_list .magazine_date_content{
width: 50%;
padding: 0 50px 50px 0;
}
#magazine_date_list .title.type04.d_border_type{
margin-bottom: 25px;
padding: 18px 10px;
line-height: 1.3;
font-size: 21px;
}
#magazine_date_list .title.type04.d_border_type small{
font-size: 13px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
/*color: #808080;*/
display: block;
margin-top: 4px;
}
#magazine_date_list .text_wrap .title.type04{
font-size: 18px;
}
#magazine_date_list .text_wrap .title.type07{
font-size: 15px;
}
#magazine_date_list .text_wrap p{
font-size: 13px;
font-family: "Midashi Go MB31",YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color: #808080;
}
#magazine_date_list .cms_list_area .cms_list_wrap{
margin-bottom: 20px;
}
#magazine_date_list .cms_list_area .cms_list_wrap:last-child{
margin-bottom: 0;
}
@media screen and (max-width: 900px) {
#magazine_date_list .magazine_date_wrap{
margin: 0 -30px -30px 0;
}
#magazine_date_list .title.type04.d_border_type{
font-size: 18px;
padding: 12px 5px;
}
#magazine_date_list .magazine_date_content{
padding: 0 30px 30px 0;
}
}
@media screen and (max-width: 700px) {
#magazine_date_list .magazine_date_content{
width: 100%;
}
#magazine_date_list .text_wrap .title.type04{
font-size: 16px;
height: auto !important;
}
#magazine_date_list .text_wrap .title.type07{
font-size: 14px;
}
#magazine_date_list .text_wrap p{
font-size: 13px;
}
#magazine_date_list .magazine_date_content .cms_list .img_wrap{
width: 40%;
}
#magazine_date_list .magazine_date_content .cms_list .text_wrap{
width: 60%;
}
}
/* other_maker_list_wrap
--------------------------------------------------------------*/
.other_maker_list_wrap {
padding:0;
}
.other_maker_list_wrap .other_maker_list ul {
letter-spacing: -0.4em;
}
.other_maker_list_wrap .other_maker_list li {
display: inline-block;
vertical-align: top;
letter-spacing: normal;
font-size:15px;
margin:0 0 5px 0;
}
.other_maker_list_wrap .other_maker_list li:last-child {
margin:0;
}
.other_maker_list_wrap .other_maker_list li p {
display: inline-block;
}
.other_maker_list_wrap .other_maker_list li a {
margin:0 5px 0 0;
}
.other_maker_list_wrap .other_maker_list li a.txt1 {
color:#0071bc;
}
.other_maker_list_wrap .other_maker_list li a.txt2 {
color:#f15a24;
}
@media screen and (max-width: 700px) {
.other_maker_list_wrap {
padding: 0;
border: none !important;
background: none !important;
}
#bike_block_wrap .tab_content .other_maker_list_wrap{
margin: 20px 0;
}
}