@charset "UTF-8";

/* 全体
============================================================== */

.frame{overflow-x:hidden}
.fix980{width:980px;margin:0 auto}
@media only screen and (max-width:640px){
.fix980{width:calc(100% - 40px)}
}
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
@media only screen and (max-width:640px){
.flex{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
}

/* 標示 非表示 --------------------*/
/* PC非表示 */
.break-sp{display:none}
@media only screen and (max-width:640px){
.break-sp{display:inline}
}
/* スマホ非表示 */
.break-pc{display:inline}
@media only screen and (max-width:640px){
.break-pc{display:none}
}


/* 見出し ---------------------- */
/* h1 */
.heading01{font-size:1.625em;position:relative;font-weight:700;padding:4px 0 12px 11px}
.heading01::before{content:'';display:inline-block;width:5px;height:24px;position:relative;top:3px;left:0;background-color:#db0303;margin-right:10px}

/* h2 */
.heading02{  position:relative;
color: #FFF; background:linear-gradient(to right, #820000, #e60013);text-align:center;height:46px;line-height:46px;font-size:1.5em;font-weight:700; letter-spacing: 0.1em; padding:5px 0 0 ;}

.heading02:after{content: "";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;border-style: solid;
  border-color: transparent #F7F7F7 #F7F7F7 transparent;
  border-width: 0 0 70px 51px;}

.rightBox .heading02:after{border-color: transparent #F2F4F9 #F2F4F9 transparent;}
.rightBox .heading02{background:linear-gradient(to right, #102d3b, #42606e);}


@media only screen and (max-width:640px){
.heading01{font-size:20px;padding:4px 0 12px 11px}
.heading01::before{width:5px;height:24px;top:3px;left:0;margin-right:10px}

.heading02{height:31px;line-height:31px;font-size:1.2em;padding:3px 0 0 ;}

.leftBox .heading02:after,
.rightBox .heading02:after{
  border-width: 0 0 34px 34px;border-color: transparent #FFF #FFF transparent;}
  }

/* ページトップ */
.pagetop{margin-top:8px;margin-bottom:32px}

@media only screen and (max-width:640px){
.pagetop{margin-top:32px;margin-bottom:32px;}
}

sub{font-size: 0.7em;}


/*  メインビジュアル 
============================================================== */
.main_img{background-image:url(/fa/products/mecha/laser/exhibition/jimtof2018_laser-auto/img/mainVisual.png);background-size:auto;background-position:top center;background-repeat:no-repeat;padding-top:0;padding-bottom:0; height: 445px;margin-bottom: 0px;}

.main_img_txt{width:980px;margin:0 auto; padding-top: 370px;font-weight: 700;font-size: 1.2em;}
.main_img_txt_laser{color: #e60013;}
.main_img_txt_auto{color: #FFF;}

@media only screen and (max-width:640px){
.main_img{
   height: 0;
    /* 表示画像の高さ（299） ÷ 表示画像の幅（670） × 100 */
    padding-top: 44.626%;
    background: url('/fa/products/mecha/laser/exhibition/jimtof2018_laser-auto/img/mainVisual_sp.png') 0 0 no-repeat;
    background-size: contain;margin-bottom: 70px;}
    
.main_img_txt{width:98%;text-align: center; z-index: 100; padding-top: 10px; }
.main_img_txt_laser{font-size: 1em;}
.main_img_txt_auto{font-size: 1em; color:#3C5A68;}
}


/*  ページナビ　スマホだけ
============================================================== */
ul.page_nav{width: 100%; margin: 0 auto;background: linear-gradient(to right,#d3d8dc 0,#94a0a9 100%);padding: 15px 0 5px;}

ul.page_nav li{margin: 0 auto 10px; font-weight: 700;}

ul.page_nav li a{padding: 10px; width: 280px; display:block;text-align: center;background-color: #FFF; text-decoration: none;position: relative;color: #FFF; letter-spacing: 0.05em;}
ul.page_nav li a:before{content: '▼';position: absolute;left: 1.5em;top: 0.6em;}

ul.page_nav li.nav_laser a{background: linear-gradient(to right, #820000, #e60013);}
ul.page_nav li.nav_auto a{background: linear-gradient(to right, #102d3b, #42606e);}


/*  新型ファイバレーザ加工機　＋　自動仕分けシステム
============================================================== */

.leftBox{width:440px; padding: 20px; background-color: #F7F7F7;}
.rightBox{width:440px; padding: 20px; background-color: #f2f4f9 ;}

.box_img{width:80%}

.box_video{width:440px;height:247px; background-color: #E7E7E8; margin-bottom: 1em;}
video{width:440px;height:247px;}

.first_box_txt{font-size:1.3em;line-height:1.4;letter-spacing:0.01em;margin:1.5em 0 1.5em;font-weight:700}
.first_box_txt2{font-size:0.9em;margin-bottom: 0.5em;min-height: 5em;}

.box_wrap p{line-height: 1.6;}

.box_wrap hr{display: block; border-top:2px solid #C7000C;margin: 50px 0 60px;}
.rightBox hr{border-top:2px solid #15576E;}

.box_detail{margin-top: 50px; border-top:1px dotted #CCC;}
.box_detail:first-child{border-top:none;}


.heading03{font-size:1.5em; letter-spacing: 0.06em; margin:50px 0 30px;font-weight:700; padding:4px 0 0 10px; border-left: 7px solid #c7000c; line-height: 1.2;}
.rightBox .heading03{border-left: 10px solid #15576e;}

.heading03 span{font-size:0.7em; font-weight: normal;}
.box_txt01{font-weight: 700; color: #A60F12;margin-bottom: 0.6em;}
.box_txt02{font-weight: 700; margin-bottom: 0.7em;}

.l_01 .box_txt01,.l_01 .box_txt02{letter-spacing: -0.05em;}

.box_detail_ul{font-size: 0.9em;}
.box_detail_ul li{padding-left:1.2em;position:relative;margin-bottom: 0.3em;}
.box_detail_ul li:before{ content: '●';position:absolute;left:0;top:-0.01em; color:#A60F12; }
#rightBox .box_detail_ul li:before{color:#15576E; }

.box_detail_ul li span{font-size: 0.8em;}
.box_detail_ul p span{font-size: 0.8em;}

.box_detail img.box_img{margin: 1em auto 1em; padding-left: 10%;}

@media only screen and (max-width:640px){
.box_wrap{margin-top:39px}
.leftBox,.rightBox{width:100%;padding: 0; margin-bottom:0px; background-color: #FFF;}
.leftBox{margin-bottom: 50px;}

.first_box_txt{font-size:1.1em;line-height:1.4;letter-spacing:0.01em;margin:1em 0 1em;}
.first_box_txt2{margin-bottom: 1em; font-weight: 100; min-height:inherit;}

.box_video{width:335px;height:188px;margin:1em auto 1em;}
.box_video video{width:335px;height:188px}

.box_detail{margin-top: 30px;}

.heading03{font-size:1.1em;margin:30px 0 20px;}
}