@charset "utf-8";
/*
Theme Name: Bicycleshop Axis
Theme URI: https://www.bicycle-axis.pro/
Description: Versions 1.0.x
Version: 1.0
Author: Dental Promotion
Tags: mantle color, variable width, two columns, widgets

This is just a basic layout, with only the bare minimum defined.
Please tweak this and make it your own. :)
*/

*, *:before, *:after{
	box-sizing: border-box;
}

.co{clear: both;}
.mb8{margin-bottom:8px;}
.mb16{margin-bottom:16px;}
.mb24{margin-bottom:24px;}
.mb32{margin-bottom:32px;}
.mb40{margin-bottom:40px;}
.mb80{margin-bottom:80px;}
.dop{
    margin-bottom:24px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ccc;
    text-align: right;
    font-size: 13px;
}
.ac{text-align: center;}

img{
    max-width: 100% !important;
    height: auto !important;
    border:none;
    vertical-align:middle;
}

.cf{zoom:100%;}
.cf:after{
    content:"";
    clear:both;
    height:0;
    display:block;
    visibility:hidden;
}

.oz{
	overflow: hidden;
	_zoom: 1;
}
.oz .imgL, .s_imgL, .txtL{float:left;}
.oz .imgR, .s_imgR, .txtR{float:right;}
.oz .imgL,
.oz .s_imgL{
    width: 48%;
    margin-right: 24px;
}
.oz .imgR,
.oz .s_imgR{
    width: 48%;
    margin-left: 24px;
}
@media screen and (max-width: 767px) {
.oz .imgL{
    float: none;
    width: 100%;
    margin-right: 0;
    text-align: center;
}
.oz .imgR{
    float: none;
    width: 100%;
    margin-left: 0;
    text-align: center;
}
}


.articlecards .imgL{
    margin-bottom: 40px;
}

a.more-link{
    clear: both;
	display: block;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 120px;
    padding: 1.5em;
    background: #ede22f;
    color: #333;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    border-radius: .7em;
}
a:hover.more-link{
    background: #D4CF00;
}
@media screen and (max-width: 1024px) {
a.more-link{
    width: 60%;
}
@media screen and (max-width: 768px) {
a.more-link{
    width: 80%;
}
@media screen and (max-width: 540px) {
a.more-link{
    width: 92%;
}
}
}
}



.boxL{
    float: left;
    width: 45% !important;
    margin-right: 0;
    text-align: center;
}
.boxR{
    float: right;
    width: 54% !important;
}


.boxL{
    float: left;
    width: 45% !important;
    margin-right: 0;
    text-align: center;
}
.boxR{
    float: right;
    width: 54% !important;
}

.ar{
    text-align: right;
}



.nbarticle{
    background: #ede22f;
    border-radius: 10px;
}
.nbarticle a{
    padding: 20px;
    display: block;
}
.nbarticle .box{
    border-right: 1px solid #fff;
}
.nbarticle,
.two_columns,
.two_blocks,
.four_blocks{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	justify-content: space-between;
}
.nbarticle .box,
.two_blocks .imgbox{
    width: 49% !important;
}
.two_columns:nth-of-type(even)
{
    flex-direction: row-reverse;
}
.two_columns .box{
	display: block !important;
    margin: 0 !important;
	justify-content: space-between;
}
.two_columns .box:first-of-type{
	width: 60%;
}
.two_columns .box:last-of-type{
	width: 40%;
}



.columns{
}
.column_area{
	width: 92%;
    max-width: 1280px;
    margin: auto;
    padding: 150px 0;
}
.column_area strong{
	background: linear-gradient(transparent 60%, #ede22f 60%);
}
.column_area b{
    color: firebrick;
}
.column_area p{
    margin-bottom: 1.6rem;
}
.column_area section{
    margin-bottom: 80px;
}
#breadcrumbs{
    margin-bottom: 40px;
    text-align: right;
}
#contents.archive h1,
.columns .hd{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    box-sizing: border-box;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 45px;
    font-weight: 900;
    text-shadow: 0px 0px 11px #000000,
				 0px 0px 13px #000000,
				 0px 0px 18px #000000,
				 0px 0px 12px #000000;
    background: url("../../../img/column/main_img.jpg") no-repeat center center;
    background-size: cover;
}
#contents h1{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    margin: 0 0 40px;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    line-height: 1.3;
    color: #000;
    text-shadow: 0 0 0 #000,
				 0 0 0 #000,
				 0 0 0 #000,
				 0 0 0 #000;
    height: inherit;

}
#contents h2{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    margin: 0 0 50px;
    padding: 0 0 10px;
    border-bottom: solid 1px #ccc;
    font-size: 30px;
    line-height: 1.4;
}
#contents h3{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    margin: 50px 0 40px;
    padding: 0 0 0 15px;
    border-left: solid 5px #EDE22F;
    font-size: 25px;
    line-height: 1.2;
}
#contents h4{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    margin: 50px 0 40px;
    padding: 0 0 10px 1.3em;
    border-bottom: solid 1px #ccc;
    position: relative;
    font-size: 20px;
    line-height: 1.2;}

#contents h4::before {
	content: "●";
	position: absolute;
	left: 0;
}
.btn{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, "Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    width: 250px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.0;
    margin: 40px auto 0 !important;
}
.btn a{
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: all .3s;
    color: #000;
    padding: 20px;
    background: #EDE22F;
    position: relative;
    display: block;
    text-align: center;
}
table.td_threes td:first-of-type{
    width: 15%;
}
table.td_fours td:first-of-type{
    width: 25%;
}
.draw_gmap{
    width: 70%;
    margin: auto;
    margin-bottom: 24px;
}
@media screen and (max-width: 540px) {
.draw_gmap{
    width: 100%;
}
}

.blocklink{
    position: relative;
}
.blocklink a{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.blocklink a:hover{
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha( opacity=50 )";
}




.columns_hd{
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
	background: linear-gradient(transparent 60%, #dfdcad 60%);
}
.top_columns{
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
}
.top_columns .box{
	width: calc( 20% - 10px);
}
@media screen and (max-width: 900px) {
.top_columns .box{
	width: calc( 33% - 10px);
}
@media screen and (max-width: 540px) {
.top_columns,
.columns_hd{
    width: 92%;
}
.top_columns .box{
	width: 100%;
}
}
}






.post_hd{
    margin-bottom: 1em;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
	background: linear-gradient(transparent 60%, #dfdcad 60%);
}
.post_Area{
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
}
.post_Area .box{
	width: calc( 16.777% - 10px);
}
.post_Area img{
	width: 100%;
    height: auto;
}
.post_thumbs{
    text-align: center;
    margin-bottom: 8px;
}
@media screen and (max-width: 900px) {
#wrap .entry .more a{
    width: 80%;
}
.post_Area .box{
	width: calc( 33% - 10px);
}
@media screen and (max-width: 540px) {
#wrap .entry .more a{
    width: 100%;
}
.post_Area .box{
	width: 100%;
}
.post_thumbs{
    float: left;
    max-width: 35%;
    margin-right: .4em;
}
}
}


.columns a{
    word-break: break-all;
}



.scroll table{
    width: 100%;
}
@media screen and (max-width: 767px) {
.scroll{
    padding-bottom: 2%;
    overflow: auto;
/*    white-space: nowrap;*/
}
.scroll::-webkit-scrollbar{
    height: 10px;
}
.scroll::-webkit-scrollbar-track{
    background: #eee;
}
.scroll::-webkit-scrollbar-thumb {
    background: #bbb;
}
.scroll table{
    width: 200%;
}
}


table{
    margin-bottom: 16px;
    border-collapse: collapse;
    border: 1px solid #ccc;
}
th,
td{
    padding: 16px;
    vertical-align: middle;
    border: 1px solid #ccc;
}
tr:nth-of-type(odd){
    background: #f9f9f9;
}
.two_cells th,
.two_cells td{
    width: 50%;
}
.three_cells th,
.three_cells td{
    width: 33%;
}
.hikaku th:nth-child(2),
.hikaku td:nth-child(2){
    background: #ececec;
}
tr:first-of-type,
tr:nth-child(1) > th:nth-child(2){
    background: #ede22f !important;
}


.four_cells th,
.four_cells td{
    width: 25%;
}
.five_cells th,
.five_cells td{
    width: 20%;
}
.six_cells th,
.six_cells td{
    width: 16.666%;
}
.seven_cells td{
    width: 14.285%;
}


#contents > div.column_contents.column_area > section:nth-child(30) > div > table > tbody > tr:nth-child(1){
    background: #fff !important;
}

.ncr td{
    padding: 16px;
}