@charset "utf-8";

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

.sp{ display: block!important;}
.pc{ display: none!important;}
.pc_inline{ display: none!important;}

.sp_center {
    text-align: center;
}



.sp_mt30 {
    margin-top: 30px;
}
.sp_mb30 {
    margin-bottom: 30px;
}
.sp_pl20 {
	padding-left: 20px;
}
.sp_pt95 {
    padding-top: 95px;
}
.sp_pr20 {
	padding-right: 20px;
}
.sp_pb40 {
    padding-bottom: 40px!important;
}
.sp_width100 {
	width: 100%!important;
    height: auto!important;
}

.sp_f12 {
    font-size: 1.2rem;
}

/*=============================================== 
    ios ボタンスタイルをリセット 
===============================================*/
* {
  -webkit-appearance: none;
}
input[type="submit"], input[type="button"], input[type="reset"], 
button, select, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}
/*===============================================*/


*{margin:0; padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

html {font-size: 80.0%;}
body{ background:#fff; font-size: 1.8rem; -webkit-text-size-adjust: 100%;}


h1,h2,h3,h4,h5,h6,p,address,
ul,ol,li,dl,dt,dd,
table,caption,th,td,img,form{margin:0;	padding:0; border:none;	font-style:normal; font-weight:normal; text-align:left;}

/*=============================================== 
	フォントサイズ
===============================================*/



/*=============================================== 
	基本コンテンツ
===============================================*/
#Breadcrumb ul {
    font-size: 1.2rem;
    width: 100%;
    line-height: 1.1em;
}
#Breadcrumb li a {
    background: rgba(0, 0, 0, 0) url("/img/common/bread_arrow.gif") no-repeat scroll right center;
}

.Content {
    width: 100%;
}
.WhiteGroung {
    padding: 30px 16px;
}
.GrayGroung {
    padding: 30px 16px;
}
.GrayLineGroung {
    padding: 30px 16px;
}

/*=============================================== 
	wrapper
===============================================*/
#container {
    width: 100%!important;
}


/*=============================================== 
	head
===============================================*/
#Header {
    display: none;
}
#HeadWrapper {
    display: none;
}
#CorporateNameBlock {
    position: fixed;
    border-bottom: 1px solid #ccc;
}
#CorporateName {
    height: auto;
    width: 100%;
    padding-top: 0;
    padding-bottom: 20px;
    padding-left: 10px;
}
#CorporateName .Mark {
    display: none;
}
#CorporateName .Address {
    display: none;
}
#CorporateName .Company a span img {
    width: 62.5%!important;
    max-width: 400px;
    height: auto;
}

.NewItemBnr01 ,
.NewItemBnr02 {
    display: none;
}
/*=============================================== 
	global navi
===============================================*/




img.bg {
    left: 0!important;
    margin-left: 0px!important;
}
img.bg {
    min-width: 120%!important;
    width: 100%!important;
}


/*=============================================== 
    トップページ
===============================================*/
.TopSpecialOrder {
    width: 100%;
    padding: 16px;
    background: #eaf2ff;
    height: auto;
}

.SpecialOrderCopy .Photo img {
    border-radius: 50%;
}

.SpecialOrderCopy {
    font-size: 1.7rem;
    margin: 0px;
}
.TopSpecialOrder a.TopFormBtn_sp {
    text-align: center;
    display: block;
    margin-bottom: 20px;
}

.TopSpecialOrder a img {
    margin: auto;
}
.TopSpecialOrder .ClientLink {
    margin-top: 26px;
    margin-bottom: 26px;
}
.GokoInfo {
    width: 100%;
}
.rslides li {
    margin-top: 80px;
}

.WineJewelry {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.WineJewelry li {
    width: 49%;
}
.WineJewelry li img {
    width: 100%;
    height: auto;
}

.QuarterBox {
    width: 48%;
	margin-right: 4%!important;
	margin-bottom: 36px;
}
	.QuarterBox:nth-child(2n) {
		margin-right: 0!important;
	}
.QuarterBox dl {
    font-size: 2.6rem;
}
.QuarterBox dt {
    font-size: 1.7rem; 
}
	.QuarterBox dd img {
		width: 100%;
		height: auto;
	}
	.TopBuyBtn ,
	.TopBuyBtnBlue {
		width: 100%;
	}
	.TopBuyBtn a ,
    .TopBuyBtnBlue a {
		font-size: 1.3rem;
		width: 100%;
	}
	.TopBuyBtn ul li ,
	.TopBuyBtnBlue ul li {
		font-size: 1.3rem;
	}
.fb-page {
	float: none;
	margin-bottom: 30px;
    sp_width100
}

.Half460Box {
	float: none;
	width: 100%;
}
.Inner220 {
    width: 48%!important;
	margin-right: 4%!important;
    float: left;
}
	.Inner220:nth-child(2n) {
		margin-right: 0!important;
	}
.Inner220 img {
	width: 100%;
	height: auto;
}
.Half460Box a img {
	width: 100%;
	height: auto;
}
#FeedBox .BlogHead {
    font-size: 2.5rem;
}
#feed {
    font-size: 1.8rem;
}
#feed li {
    margin-bottom: 17px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}


#TopicNavi li {
	float: none;
	width: 100%;
	font-size: 1.8rem;
	display: block;
}

.Matorikkun dl {
    text-align: center;
    font-size: 1.7rem;
    line-height: 1.4em;
    margin-bottom: 8px;
}
.Matorikkun dd {
    text-align: center;
}
.Matorikkun dd img {
    height: auto;
    width: 70%;
    margin: auto;
}

.title-border {
  position: relative;
  text-align: center!important;
  font-size: 2.0rem;
}
.title-border span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: #f4f4f4;
  text-align: left;
}
.title-border::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

/*=============================================== 
    製品のご案内ページ
===============================================*/

#Compression .BlTitle ,
#Tension .BlTitle ,
#Torsion .BlTitle ,
#Special .BlTitle {
    text-align: center!important;
}
#Compression .TopBuyBtn ,
#Tension .TopBuyBtn ,
#Torsion .TopBuyBtn ,
#Special .TopBuyBtnBlue {
    width: 400px!important;
}

#MainObj {
    padding-top: 95px!important;
}
#MainObj .WhTitle {
    text-align: center!important;
    font-size: 2rem!important;
}
.PageArrow {
    text-align: center!important;
    font-size: 1rem!important;
}

/*=============================================== 
    コーポレートページ
===============================================*/
table.company {
    font-size: 1.3rem;
}
table.company th {
    width: 185px;
}
ul.CustomerList li {
    width: 50%;
    font-size: 1.3rem;
}
dl.History dt {
    height: 120px;
    text-align: center;
}
dl.History dd {
    text-align: center;
}
#map {
	width: 100%!important;
}


/*=============================================== 
    recruitページ
===============================================*/
.standard{
    border-bottom:none;
}
.standard th{
    padding: 5px 10px;
    width:100%;
    display:block;
    margin: 0 auto;
    border:none;
    text-align: left;
}
.standard td{
    padding: 5px 10px;
    width:100%;
    display: list-item;     /* リストに変換 */
    list-style:none;     /* リストに変換によるドットを非表示 */
    border-top: none !important;
    border-bottom:1px solid #d8d8d8;
}
table.standard dt {
    width: 25%!important;
}
table.standard dd {
    width: 75%!important;
}

/*=============================================== 
    howtoページ
===============================================*/
#MainObj220 {
    height: 310px;
    padding-top: 95px;
}
#MainObj220 .WhTitle {
    font-size: 2rem;
    text-align: center;
}
#Comment {
    width: 90%;
}
.ThirdBox {
    float: none;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.ThirdBox dd a img {
	width: 100%!important;
	height: auto!important;
}
.HalfBox {
	width: 100%;
}
dl.HowToFlow dd, dl.HowToFlowEnd dd {
    font-size: 1.5rem;
}
.TxtSiz13 {
    font-size: 1.3rem;
}
iframe {
	width: 100%!important;
}
.HowToFlow dt img ,
.HowToFlowEnd dt img {
	width: 100%;
	height: auto!important;
}

.HowtoLeft ,
.HowtoRight {
    float: none;
    width: 100%;
}

#TableCloth {
    font-size: 1.4rem!important;
}

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

/*=============================================== 
    問合せ
===============================================*/
#MainObj150 {
    padding-top: 95px!important;
    height: 310px!important;
}
#MainObj150 .WhTitle {
    text-align: center!important;
    font-size: 2rem;
}
.inp ,
.inp2 {
    width: 100%;
}
form #zip0 {
    width: 7rem!important;
}
form #zip1 {
    width: 8rem!important;
}
form #tel0 ,
form #tel1 ,
form #tel2 {
    width: 8rem!important;
}



/*=============================================== 
    バネの豆知識
===============================================*/
#TopicBox {
    margin-bottom: 50px;
    margin-right: 0;
    width: 100%;
    letter-spacing: 0;
}
#Use .BlTitleSLine {
    text-align: center;
}
#Use dl {
    margin-right: 5%;
    margin-left: 5%;
    width: 40%;
    margin-bottom: 28px;
}
#Use dl dt img {
    width: 100%;
    height: auto;
}
#Use dd {
    top: auto;
    bottom: -15px;
    font-size: 1.8rem;
    left: 10%;
    width: 80%;
}

#QuarterSide {
    display: none;
}


/*=============================================== 
	バネの製造工程
===============================================*/
#Process dl dt {
    width: 50%;
}
#Process dl dd {
    width: 49%;
}
#Process dl dd img {
    width: 100%;
}

/*=============================================== 
    五光発條の活動
===============================================*/
.ThirdBox280 {
	width: 46%!important;
	margin: 0 2% 10px;
	padding: 5px 15px;
}
.ThirdBox280 a {
    left: 15px;
}
.ThirdBox280 a:hover {
    left: 0px;
}

/*=============================================== 
    バネ用語辞典
===============================================*/
#DictionaryNavi li {
    font-size: 1.4rem;
    width: 50%;
}

.Balloon-Answer {
    line-height: 1.8;
    margin-bottom: 10px;
    padding: 4px 0;
    height: auto;
}
/*=============================================== 
	footer
===============================================*/
#Footer {
    padding: 20px 0 80px 0;
}
#Footer .Inner {
    width: 100%;
    text-align: center!important;
}
#Footer .Inner a img {
    width: 300px;
    height: auto;
}
#Footer .Copyright {
    width: 100%;
    margin-top: 20px;
}
.External dd {
    font-size: 1.4rem;
}
#animationList dl {
    width: 100%!important;
    height: auto;
    float: none;
}

#animationList dl span {
    width: 100%!important;
    height: 210px;
}
#animationList dl dt {
    width: 20%;
}
#animationList dl dd {
    width: 76%;
}
#animationList dl dd p {
    width: 100%;
}
#animationList .BodyCopy {
    width: 100%;
    font-size: 1.4rem;
}


/* Back to top button 
---------------------------------------*/
#back-top {
    bottom: 90px!important;
}
#back-top2 {
    position: fixed;
    height: 70px;
    bottom: 0px;
    left: 0px;
    z-index:1009!important;
    width: 100%;
    background-color: #1d194d;
}
#back-top2 ul {
    display: flex;
}
#back-top2 ul li {
    width: 33.33%;
    line-height: 70px;
    text-align: center;
    border-right:1px solid #ddd;
    font-size: 1.4rem;
    color: #fff;
}
#back-top2 ul li:last-child {
    border-right:none;
}
#back-top2 ul li a {
    display: block;
    color: #fff;
}

/*=============================================== 
    drawerナビ
===============================================*/
.js-offcanvas li {
    letter-spacing:0.05em;
    padding-left:14px;
    /*font-weight:bold;*/
    background:url(../img/common/icon_navi_arrow.png) no-repeat left center;
    margin: 0 2% 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ccc;
}
.js-offcanvas li.Blank {
    letter-spacing:0.05em;
    padding-left:14px;
    /*font-weight:bold;*/
    background:url(../img/common/icon_navi_blank.gif) no-repeat left center;
}
.js-offcanvas li.Indent {
    letter-spacing:0.05em;
    padding-left:14px;
    margin-left:14px;
    font-weight:normal;
    background:url(../img/common/icon_navi_arrow.png) no-repeat left center;
}
.js-offcanvas li a {
    text-decoration:none;
    color:#464646;
    outline: none;
}
#Footer #FootNavi li a:hover {
    color:#686868;
    text-decoration:underline;
}
#Information {
    width: 100%;
    margin-top: 10px;
}
	#TopicNavi {
		margin-bottom: 0!important;
	}

/*=============================================== 
    form
===============================================*/	
.inp ,
.inp2 {
    width: 100%;
}

/*=============================================== 
    サイトマップ・404
===============================================*/   
#SiteMap {
    width: 100%;
}
#SiteMap form input {
    padding: 10px;
}



/*=============================================== 
    ブログ
===============================================*/  
.list_extra {
    font-size: 1.1rem;
}
.list_extra span {
    font-size: 1.1rem;
}
#pre_nex ,
#pagelist {
    width: 100%!important;
}
#pre_nex::after {
    width: 100%!important;
}

.SysBlock {
    width: 100%!important;
}

/*=============================================== 
    マトリッ君
===============================================*/  

#ContentLeft {
    float: none;
    width: 100%;
}
#ContentRight {
    float: none;
    width: 100%;
}
.widget.widget_cart .btn_cart a {
    font-size: 1.3rem;
    margin: auto;
}
.btn_howto a {
    font-size: 1.3rem;
    margin: auto;
}
.widget .widgettitle, .categories .widgettitle {
    font-size: 1.6rem;
}
.categories ul ,
.widget ul {
    font-size: 1.4rem;
}

.HowtoAttention p {
    font-size: 1.5rem;
}




/*========= usces_cart.css =======*/ 

dl.itemGpExp dt {
    font-size: 1.6rem!important;
    height: 26px!important;
}
dl.itemGpExp li {
    font-size: 1.4rem!important;
    line-height: 1.8!important;
}
em.tax {
    font-size: 1.0rem!important;
}


#customer-info .customer_form input {
    font-size: 1.4rem!important;
}


#customer-info th {
    font-size: 1.4rem!important;
}

#customer-info .customer_form {
    border-bottom:none!important;
}
#customer-info .customer_form  th ,
#delivery-info .customer_form th ,
#confirm_table th {
    padding: 15px 10px!important;
    width:100%!important;
    display:block!important;
    margin: 0 auto!important;
    border:none!important;
    text-align: left!important;
}
#customer-info .customer_form  td ,
#delivery-info .customer_form td ,
#confirm_table td {
    padding: 15px 10px!important;
    width:100%!important;
    display: list-item!important;     /* リストに変換 */
    list-style:none!important;     /* リストに変換によるドットを非表示 */
    border-top: none !important;
    border-bottom:1px solid #d8d8d8!important;
}

#confirm_table h3 ,
#confirm_table th ,
#confirm_table td {
    font-size: 1.4rem!important;
}
#delivery-info th {
    font-size: 1.4rem!important;
}
#delivery-info td {
    font-size: 1.4rem!important;
}
#delivery-info .customer_form dt {
    font-size: 1.4rem!important;
}
#delivery-info .customer_form dd {
    font-size: 1.4rem!important;
}
select {
    font-size: 1.4rem!important;
}


#customer-info td {
    font-size: 1.4rem!important;
}

#cart input.quantity {
    font-size: 1.4rem!important;
}
#itempage .skuform .skuquantity {
    font-size: 1.4rem;
}

.send .to_customerinfo_button, .send .to_deliveryinfo_button, .send .checkout_button, .send .to_confirm_button {
    font-size: 1.4rem!important;
    padding: 20px 70px!important;
}
.send .continue_shopping_button, .send .back_cart_button, .send .back_to_delivery_button, .send .back_to_customer_button {
    font-size: 1.4rem!important;
    padding: 20px 70px!important;
}


#SiteMap li.Map ,
#SiteMap li.Blank {
    margin-bottom: 20px;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    padding-left: 14px;
    width: 100%;
}
#Breadcrumb {
    padding-top: 95px;
}


.MOVLIST {
    display: block;
}
.MoveBlock {
    width: 100%;
}
.MoveBlock dd div {
  font-size: 1.8rem;
}

	
/*2018.06.25トップチューニング追加分
-----------------------------------------------------------*/
.Matorikkun dt {
    text-align: center;
    font-size: 1.7rem !important;
    line-height: 1.4em;
    margin-bottom: 8px;
}
	
.QuarterBox dt a,.QuarterBox dd a {
  background: none;
  padding-left: 0;
}
	
.QuarterBox dt {
  font-size: 2.6rem;
}
	
.QuarterBox dd {
  font-size: 1.7rem;
}

.QuarterBox div img {
		width: 100%;
		height: auto;
	}
}