@charset "utf-8";
/*
Theme Name : hojokin-ss
*/

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*body*/
body {
/*    transform: translateY(30px) !important;*/
    webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: auto;
    font-size: 15px;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #313233;
    background-color: #fff;
    -webkit-font-feature-settings: 'palt' 1;
    font-feature-settings: 'palt' 1;
    min-width: 320px;
    position: relative;
    max-width: 100%;
    /*    overflow: hidden;*/
    opacity: 1;
}

.wraapper {
    position: relative;
}

/*---------------------------------------------------------------------------------------*/
/*--------header--------*/
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

.wrapper {
    width: 100%;
    margin: 0 auto
}

#header {
    position: fixed;
    z-index: 20;
    background: #fff;
    width: 100%;
}

.header-inner {
    position: relative;
    height: 75px;
    width: 95%;
    margin: 0 auto;
}

.header-logo {
    position: absolute;
    bottom: 0;
}

.header-nav {
    display: inline-block;
    position: absolute;
    list-style: none;
    right: 0;
    bottom: 0;
}

.header-nav li a {
    text-decoration: none;
    color: black;
}

.header-nav li a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    color: black;
    text-decoration: none;
  }
  
  .header-nav li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: black;
    transform: translate(-100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
    content: "";
}
  
.header-nav li a:hover:after {
    transform: translate(0, 0);
}

.header-nav-item {
    color: black;
    font-size: 21px;
    float: left;
    padding-left: 28px;
}

.hamburger-menu {
    display: none;
}

/*--------main-contents--------*/
/*--------top-arrow--------*/
.top-arrow {
    position: fixed;
    display: block;
    bottom: 20px;
    right: 20px;
    z-index: 5;
}

.top-arrow a {
    box-sizing: border-box;
    display: block;
    position: relative;
    width: 75px;
    height: 75px;
    border: solid 6px #000;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
  }
  
  .top-arrow a:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75px;
    height: 75px;
    background-color: #000;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0, 0);
    transition: transform ease 0.4s;
  }
  
  .top-arrow a:hover:after {
    transform: translate(-50%, -50%) scale(1.1, 1.1);
  }
  
  .top-arrow a:before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 55%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-style: solid;
    border-color: #000;
    border-width: 6px 0 0 6px;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: border-color ease 0.1s;
  }
  
.top-arrow a:hover:before {
    border-color: #fff;
}
/*--------topcontents--------*/
.topcontents {
    position: relative;
    height: 640px;
    width: 100%;
    z-index: 2;
    background-image: url(../img/main-img.jpeg);
    background-size: cover;
}

.topcontents-wrapper {
    height: 800px;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
}

.main-contents {
    /* position: relative; */
/*    height: 1920px;*/
}

.toprightcontents h1 {
    color: black;
    font-weight: 600;
    /* display: inline-flex; */
}

.right-contents1 {
    width: 50%;
    text-align: center;
}

.right-contents2 {
    width: 50%;
    text-align: center;    
}

.toprightcontents {
    width: 95%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 40px;
    -webkit- transform: translateY(-50%);
    
}

.right-contents1-txt {
    font-size: 6.5vw;
}

.fadein {
    opacity: 0;
    animation: fadein 6s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}

/*以下遅延の指定*/
.txt01 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    animation-delay: 1s;
}

.txt02 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    animation-delay: 3s;
}

.txt03 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    animation-delay: 5s;
}

.txt04 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    animation-delay: 7s;
    font-size: 4vw; 
}

.right-contents2-txt {
    font-size: 4vw;
    margin-top: 20px;
}

.right-contents3 {
    display: block;
    width: 50%;
    text-align: center;
}

h1.right-contents3-contact {
    display: inline-block;
    font-size: 1.7vw;
    margin-top: 20px;
    padding: 16px;
    background: #333c5e;
    color: #fff;
    border-radius: 36px;
    border: 2px solid #333c5e;
}

h1.right-contents3-contact:hover {
    background: none;
    color: #333c5e;
}

h1.right-contents3-contact i:hover {
    color: #333c5e;
}


.topleftcontents {
    position: absolute;
    /* height: 80%; */
    width: 50%;
    background: brown;
    right: 0;
}

.news {
    padding-top: 85px;
    padding-bottom: 85px;
    margin: 0 7% 0 3%;
    position: relative;
    z-index: 2;
}

.news_title {
    position: absolute;
    top: 75px;
    z-index: 3;
    color: #00053a;
    font-size: 20px;
    right: 0;
    margin-right: -25px;
    /* margin-right: calc((100% - 1104px - 50px ) / 2); */
}

.font-pt {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 400;
    font-style: normal;
}

.scrollabel {
    height: 200px;
    overflow: hidden;
    overflow-y: scroll;
    margin-right: -17px;
    padding-right: 17px;
}

.asjustment {
    margin-right: 80px;
}

.news ul {
    background: #FAFAFA;
    padding: 0 80px 0 80px;
}

.news li {
    display: flex;
    margin-bottom: 20px;
}

.news_date {
    color: #00053a;
    font-size: 14px;
    margin-right: 40px;
}

.font-brabdon {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 300;
    font-style: normal;
}

.news .scrolbar {
    position: absolute;
    top: 10%;
    right: 0;
    bottom: 0;
    width: 2px;
    background-color: #DDDDDD;
    z-index: 2;
    height: 90%;
}

.scrolbar-thumb {
    min-height: 50px;
    background-color: #00053a;
}

.topcontents-bottom {
    position: relative;
    overflow: hidden;
    height: 267px;
    padding: 30px 0 30px 0;
    background: #FAFAFA;
    box-sizing: border-box;
    max-width: 1104px;
    margin: 0 auto;
}

.topcontents-bottom::before {
    content: "";
    display: block;
    width: 80px;
    height: 267px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
}

.topcontents-bottom-inner {
    height: 240px;
    width: 80%;
    margin: 0 auto;
    box-shadow: 0px 3px 13.5px 1.5px rgb(18 108 153 / 30%);
    background: #fff;
}


.news-wrapper{
    list-style: none;
    padding: 20px;
}

.news-wrapper li div {
    display: inline-block;
    float: left;
    font-size: 21px;
}

.main-contents {
    top: -65px;
}

.main-contents-1 {
    height: 540px;
    position: relative;
    width: 95%;
    margin: 0 auto;
}

.main-contents-1 h2 {
    font-size: 3.8vw;
    font-weight: 600;
    color: #fff;
}

.main-contents-1 p {
    /* width: 50%; */
    color: #fff;
    font-size: 21px;
    margin-top: 18px;
    text-align: justify;
    line-height: 30px;
}

.main-contents-1-left {
    background: darkgray;
    position: absolute;
    left: 0;
    width: 50vw;
    height: 300px;
    z-index: 1;
    box-shadow: 5px 5px 5px #999;
}

/*アニメーション指定(フェードイン)*/
.scrollanime {
    /*一瞬表示されるのを防ぐ*/
    opacity: 0;
}

.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}

/*上下の動きを指定*/
.updown {
    transform: translateY(-100px);
}

.downup {
    transform: translateY(100px);
}

/*左右の動きを指定*/
.main-contents-1{
    /*横スクロールバーを隠す*/
    overflow: hidden;
}

.slide-right {
    transform: translateX(200px);
}

.slide-left {
    transform: translateX(-200px);
}

.main-contents-1-right {
    background: darkgray;
    position: absolute;
    right: 0;
    top: 200px;
    width: 50vw;
    height: 300px;
    box-shadow: -5px 5px 5px #999;
}

.main-contents-1-left-wrapper {
    margin: 20px;
}

.main-contents-1-right-wrapper {
    margin: 20px 20px 20px 90px;
    right: 0;
}

.main-contents-1-right-wrapper h2 {
    text-align: end;
}



.main-contents-1-right-wrapper p {
    margin: 20px;
    width: 80%;
    color: #fff;
    font-size: 21px;
    margin-top: 10px;
    text-align: justify;
    line-height: 30px;
    display: inline-block;
    position: absolute;
    right: 0;
}

.business-contents {
    height: 440PX;
    background: #00053a;
    position: relative;
    margin-bottom: 40px;
}

.business-contents-left {
    position: absolute;
    height: 440px;
    width: 50%;
    left: 0;
    
}

.business-contents-right-wrapper {
    position: absolute;
    height: 100%;
    width: 47%;
    right: 0;
    padding: 20px;
    display: inline-block;
    background: #010066;
}

.business-contents-right {
    position: absolute;
    height: 440px;
    width: 50%;
    right: 0;
    padding: 20px;
    
}

.business-contents-cat {
    height: 540PX;
    margin-top: 30px;
/*    background: gray;*/
    position: relative;
}

.business-contents-right-inner {
   height: 400px;
   display: block;
}

.backimage {
    width: 400px;
    height: 400px;
    position: absolute;
    background: #00053a;
    right: 15px;
}

.img {
    width: 400px;
    height: 400px;
    position: absolute;
    background: black;
    right: 48px; 
    top: 53px;
}

.backimage1 {
    width: 400px;
    height: 400px;
    position: absolute;
    background: #00053a;
    left: 15px;
}

.img1 {
    width: 400px;
    height: 400px;
    position: absolute;
    background: black;
    left: 50px; 
    top: 34px;
}

.contact-area {
    margin-top: 40px;
}

.right-contents4 {
    text-align: center;
    margin-bottom: 50px
}

h1.right-contents4-contact {
    display: inline-block;
    width: 300px;
    height: 76px;
    font-size: 2.3vw;
    padding: 18px;
    background: #333c5e;
    color: #fff;
    border-radius: 56px;
    border: 2px solid #333c5e;
    

}

h1.right-contents4-contact:hover {
    background: none;
    color: #333c5e;
}

h1.right-contents4-contact i:hover {
    color: #333c5e;
}

#rotating-section{ 
    position:relative;
    background: #bbb;
    height:600px;
    overflow:hidden;
    }
.rect1,.rect2,.rect3,.rect4{
position:absolute;
width:100px;
height:100px;
bottom:-150px;
background:#fff;
-webkit-animation: mymove2 4s linear infinite;
}

.rect1{left:50%;}
.rect2{left:10%;-webkit-animation-delay:0.3s;}
.rect3{left:25%;-webkit-animation-delay:2s;}
.rect4{left:85%;-webkit-animation-delay:1s;}


.rect5,.rect6,.rect7,.rect8{
position:absolute;
width:50px;
height:50px;
background:#fff;
bottom:-150px;
-webkit-animation: mymove2 4s linear infinite;	
}

.rect5{left:0%;}
.rect6{left:15%;-webkit-animation-delay:2.2s;}
.rect7{left:45%;-webkit-animation-delay:0.8s;}
.rect8{left:77%;-webkit-animation-delay:1.4s;}


.rect9,.rect10{
position:absolute;
width:300px;
height:300px;
background:#fff;
bottom:-250px;
border-radius:50%;
-webkit-animation: mymove3 5s linear infinite;	
}

.rect9{left:3%;}
.rect10{left:95%;-webkit-animation-delay:0s;}

.rect13,.rect14{
position:absolute;
width:0px;
height:0px;
border:solid 40px transparent;
border-bottom:solid 40px #fff;
bottom:-150px;
-webkit-animation: mymove4 4s linear infinite;
}


.rect13{left:45%;border-bottom:solid 65px #fff;-webkit-animation-delay:0.6s;}
.rect14{left:72%;border-bottom:solid 120px #fff;-webkit-animation:mymove5 6s liner infinte;-webkit-animation-delay:1s;}


.rect11,.rect12{
position:absolute;
width:0px;
height:0px;
border:solid 40px transparent;
border-bottom:solid 40px #fff;
bottom:-150px;
-webkit-animation: mymove5 4s linear infinite;
}

.rect11{left:30%;}
.rect12{left:65%;border-bottom:solid 60px #fff;-webkit-animation-delay:1.3s;}

.rect15{
position:absolute;
width:300px;
height:300px;
background:#fff;
bottom:-400px;
-webkit-animation: mymove3 6s linear infinite;
}

.rect15{left:55%;}


.rect17{
position:absolute;
width:150px;
height:150px;
background:#fff;
bottom:-400px;
}

@-webkit-keyframes mymove2{

0%{	transform:rortate(0deg);opacity:1;}
100%{transform:rotate(540deg);opacity:0;bottom:340px;}
}

@-webkit-keyframes mymove3{

0%{	transform:rortate(0deg);opacity:1;}
100%{transform:rotate(720deg);opacity:0;bottom:540px;}
}

@-webkit-keyframes mymove4{	
0%{	transform:rortate(0deg);opacity:1;}
100%{transform:rotate(720deg);opacity:0;bottom:540px;}
}

@-webkit-keyframes mymove5{	
0%{	opacity:1;}
100%{opacity:0;bottom:540px;}
}

/*商品一覧*/
.contents-product {
    width: 95%;
    margin: 0 auto;
}

.contents-product h1 {
    text-align: center;
    font-size: 38px;
}

.product-wrapper {
    display: flex;
    margin-top: 40px;
}

div.product {
  width: calc(33.3% - 10px);
  margin: 5px;
}

div.product-lp {
width: calc(33.3% - 10px);
  margin: 5px;
}

.product {
    text-align: center;
    border: 1px solid black;
}

.product-lp {
    text-align: center;
    border: 1px solid black;
}

.product h1 {
    font-size: 20px;
    padding: 5px;
    background: black;
    color: #fff;
}

.product-lp h1 {
    font-size: 20px;
    padding: 5px;
    background: #000;
    color: #fff;
    border-bottom: 1px solid black;
}

.product img {
    
}

.prduct-lineup {
    padding: 30px 71px;
    width: 1180px;
    margin: 0 auto;
}

.product p {
    display: inline-block;
    font-size: 24px;
    font-weight: 600;
    padding: 8px;
    width: 80%;
}

.product-lp p {
    display: inline-block;
    font-size: 24px;
    font-weight: 600;
    padding: 8px;
    width: 80%;
}

.product a {
    text-decoration: none;
    display: block;
    font-size: 18px;
    padding: 8px;
    color: black;
    background:#fff;
    padding: 16px 16px 16px 16px;
    display: block;
    border-top: 1px solid black;
}

.product a:hover {
    text-decoration: none;
    display: block;
    font-size: 18px;
    padding: 8px;
    color: #fff;
    background:black;
    padding: 16px 16px 16px 16px;
    display: block;
    border-top: 1px solid black;
}

.product-lp a {
    text-decoration: none;
    display: block;
    font-size: 18px;
    padding: 8px;
    color: black;
    background:#fff;
    padding: 16px 16px 16px 16px;
    display: block;
    border-top: 1px solid black;
}
.product-lp a:hover {
    text-decoration: none;
    display: block;
    font-size: 18px;
    padding: 8px;
    color: #fff;
    background: transparent;
    padding: 16px 16px 16px 16px;
    display: block;
    border-top: 1px solid black;
}

.business-contents-left {
    position: relative;
    display: inline-block;
}

.business-contents-right {
    position: absolute;
    height: 440px;
    width: 50%;
    right: 0;
    padding: 20px;
    display: inline-block;
}

.business-contents-cat .business-contents-wrapper .business-contents-left h2 {
    color: black;
    top: 20%;
    left: auto;
    transform: none;
    padding: 75px;
}

.business-contents-cat .business-contents-wrapper .business-contents-left p {
    margin-top: 150px;
    padding: 75px;
}

.business-contents-cat .business-contents-wrapper .business-contents-right h2 {
    color: black;
    font-size: 3.0vw;
}

.business-contents-left h2 {
    position: absolute;
    color: #fff;
    font-size: 3.0vw;
    line-height: 1.4em;
    top: 50%;
    left: 0%;
    transform: translateY(-50%) translateX(13%);
    -webkit- transform: translateY(-50%) translateX(13%);
}

.business-contents-right-wrapper h3 {
    color: #fff;
    font-size: 23px;
    line-height: 2.4em;
    width: 230px;
    margin: 0 auto;
    padding: 30px 0;
}


.right-contents5 {
    display: block;
    text-align: center;
}

h1.right-contents5-contact {
    display: inline-block;
    font-size: 24px;
    padding: 16px;
    background: #333c5e;
    color: #fff;
    border-radius: 36px;
    border: 2px solid #333c5e;
    letter-spacing: 5px;
}

h1.right-contents5-contact:hover {
    background: none;
    color: #333c5e;
    background: #fff;
}

h1.right-contents5-contact i:hover {
    color: #333c5e;
    background: #fff;
}

.contact-form {
    position: relative;
    z-index: 1;
    color: #CBCBD9;
    font-size: 16px;
    padding-top: 185px;
    padding-bottom: 145px;
    background-color: #00053a;
    background-image: url(../img/bg_logo_pc.png);
    background-repeat: no-repeat;
    background-position: center;
    line-height: 1.8em;
}

.contact-wrapper {
    max-width: 660px;
    margin: 0 auto;
}

.form div {
    margin-bottom: 40px;
}

.form label {
    line-height: 1em;
    font-size: 16px;
    color: #CBCBD9;
    text-indent: 15px;
    margin-bottom: 12px;
    display: block;
}

.form input {
    width: 100%;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 17px 15px;
    font-size: 14px;
    line-height: 1em;
    outline: none;
    color: #70707D;
    -webkit-appearance: none;
    appearance: none;
}

.form textarea {
    width: 100%;
    height: 260px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 17px 15px;
    font-size: 14px;
    outline: none;
    color: #70707D;
    -webkit-appearance: none;
    appearance: none;
}

.form .btn_submit {
    width: 280px;
    line-height: 83px;
    border-radius: 41.5px;
    box-sizing: border-box;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 25px;
    letter-spacing: 0.15em;
    margin: 0 auto;
    display: block;
    outline: none;
    transition: all 0.2s ease;
}

.form .btn_submit:hover {
    background: #fff;
    color: #333c5e;
}

footer {
    height: 75px;
    background: #fff;
}

.footer-contents {
    text-align: center;
    color: #262741;
    padding: 30px;
    font-size: 18px;;
}

.contents-product-min {
    display: none;
}

.pc{
	display:block;
}
.sp{
	display:none;
}

a,
a:active ,a:hover,
a:visited{
	text-decoration: none;
	color:#000;
}

a:hover p{
	opacity:0.8;
}
.mz_breadcrumb {
	display:none;
}

.mz_breadcrumb {
	margin: 0 auto 0 auto;
}
.mz_container {
	width: 100%;
	margin: 0 auto 0 auto;
	max-width:100%;
}
.main-col--shingle {
	padding: 0;
}
#contents{
	width:100%;
	margin:auto;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-feature-settings: 'palt' 1;
	color:#151515;
	line-height:1.5;
}

#contents .cnt{
	width:1180px;
	margin:auto;
}
#main{
	height:438px;
	background:url(/~/media/Images/jp/biogear/about/main_bg.png) top center no-repeat;
	background-size:cover;
	position:relative;
}
#main .bg_logo{
	position:absolute;
	width:303px;
	margin:auto;
	top:93px;
	left:0;
	right:0;
}
#about{
    padding: 50px 0 0 0;
    width: 960px;
    margin: 0 auto;
    min-height: 500px;
}
#about .about_img{
	margin-top:50px;
	margin-bottom:42px;
	width:300px;
}
#about .about_txt{
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.866666;
    margin-bottom: 20px;
    text-align: left;
    width: 50%;
    float: left;
}

#about img {
    padding: 20px 28px;
}

#mechanis {
    min-height: 1300px;
}

.clearfix_h2 {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 50px 0 0 0;
}


#comp{
	background:#f8f8f8;
}
#comp .comp_txt_e{
	font-size:1.2rem;
	color:#000;
	padding-top:67px;
	margin-bottom:7px;
	letter-spacing:0.07em;
	text-indent:0.07me;
	font-weight:500;
}
#comp .comp_txt_j{
	font-size:3.6rem;
	font-weight:500;
	margin-bottom:12px;
}
#comp .comp_txt{
	font-size:1.5rem;
	line-height:1.866666;
	padding-bottom:65px;
}
#type{
	background:#151515;
	color:#fff;
	padding-bottom:32px;
}
#type .type_txt_e{
	font-size:1.2rem;
	color:#000;
	padding-top:67px;
	margin-bottom:7px;
	letter-spacing:0.07em;
	text-indent:0.07me;
	font-weight:500;

}
#type .type_txt_j{
	font-size:3.6rem;
	font-weight:500;
	margin-bottom:59px;
}
#type section{
	padding:0 71px;
	width:1180px;
	margin:0 auto 72px auto;
	text-align:left;
}
#type section h3{
	font-size:2.4rem;
	color:#000;
	margin-top:-6px;
	margin-bottom:9px;
}
#type section h4{
	font-size:1.7rem;
	color:#fff;
	margin-bottom:21px;
}
#type section p{
	font-size:1.5rem;
	font-weight:300;
	line-height:1.666666666;
}
#type .text_area_l{
	width:496px;
	padding-right:50px;
	float:left;
}
#type .text_area_r{
	width:496px;
	padding-left:50px;
	float:right;
}
#type .img_area{
	float:left;
}

#mechanis .mechanis_txt_e{
	font-size:1.2rem;
	color:#010066;
	padding-top:67px;
	margin-bottom:7px;
	letter-spacing:0.07em;
	text-indent:0.07me;
	font-weight:500;
    text-align: center;
}
#mechanis .mechanis_txt_j{
	font-size:3.6rem;
	font-weight:500;
	margin-bottom:59px;
    text-align: center;
    background: #00053a;
    color: #fff;
}
#mechanis h2{
	font-size:3.2rem;
	font-weight:700;
	display:inline-block;
	padding:14px 17px;
	border-top:1px solid #010066;
	border-bottom:1px solid #010066;
}
#mechanis section{
	padding:0 71px;
	width:1180px;
	margin:0 auto 0 auto;
	text-align:left;
}
#mechanis section h3{
	font-size:2.4rem;
	color:#010066;
	margin-top:29px;
	margin-bottom:9px;
}
#mechanis section h4{
	font-size:1.7rem;
	margin-bottom:21px;
}
#mechanis section h5{
	font-size:1.5rem;
	margin-bottom:4px;
}
#mechanis section p{
	font-size:1.5rem;
	line-height:1.666666666;
	margin-bottom:18px;
}
#mechanis .text_area_l{
	width:496px;
	padding-right:50px;
	float:left;
    min-height: 330px;
}
#mechanis .text_area_r{
	width:496px;
	padding-left:50px;
	float:right;
    min-height: 350px;
}
#mechanis .img_area{
	float:left;
}
#spec{
	background:#fff;
}
#spec .spec_txt_e{
	font-size:1.2rem;
	color:#010066;
	padding-top:67px;
	margin-bottom:7px;
	letter-spacing:0.07em;
	text-indent:0.07me;
	font-weight:500;
    text-align: center;

}
#spec .spec_txt_j{
	font-size:3.6rem;
	font-weight:500;
	color: #fff;
	margin-bottom:19px;
    text-align: center;
    background: #00053a;
}
#spec .spec_txt{
	font-size:1.5rem;
	font-weight:500;
	line-height:1.86666666;
	color:#000;
    padding: 0 71px;
    width: 1180px;
    margin: 0 auto;
}

.spec_text_img {
    text-align: center;
    width: 1180px;
    padding: 0 71px;
    margin: 0 auto;
}

#spec h3{
	font-size:3.0rem;
	font-weight:500;
	color:#000;
	line-height:1.0;
	display:inline-block;
	position:relative;
	margin-bottom:38px;
}
#spec h3:before{
	content:"";
	width:507px;
	height:1px;
	background:#5d5d5d;
	position:absolute;
	top:50%;
	left:-537px;
}
#spec h3:after{
	content:"";
	width:507px;
	height:1px;
	background:#5d5d5d;
	position:absolute;
	top:50%;
	right:-537px;
}
#spec ul{
	font-size:0;
	margin-left:-22px;
}
#spec ul li{
	display:inline-block;
	padding-left:22px;
	width:33.333333333333%;
	margin-bottom:60px;
	vertical-align:top;
}
#spec ul li p{
	margin-bottom:20px;
}
#spec ul.tights_link{
	font-size:0;
	margin-left:-20px;
}
#spec ul.tights_link li{
	padding-left:20px;
	width:169px;
	margin-bottom:0;

}
#spec ul.tights_link_detail li{
	width:277px;
	margin-bottom:0;

}
#spec h4{
	font-size:2.0rem;
	font-weight:500;
	color:#000;
	line-height:1.0;
	margin-top:37px;
	margin-bottom:28px;
}
#spec .tights_function{
	margin-bottom:106px;
}
#spec .bg_gray{
	padding:11px 0 44px;
	background:#1f1f1f;
}
#movie{
	width:100%;
	padding:92px 0 100px 0;
	color:#fff;
	font-weight:600;
	background:#fff;
}
#movie .cnt{
	width:980px;
	margin:auto;
}
#movie .movie_ttl_s{
	font-size:1.2rem;
	color:#010066;
	margin-bottom:
}
#movie .movie_ttl_s{
	font-size:1.2rem;
	color:#010066;
    text-align: center;
}
#movie .movie_ttl{
	font-size:3.0rem;
	margin-bottom:9px;
}
#movie .movie_ttl_txt{
	font-size:1.5rem;
	line-height:1.86666666;
	color:#010066;
	font-weight:400;
	margin-bottom:23px;
}
@media screen and (max-width: 767px) {
.pc{
	display:none;
}
.sp{
	display:block;
}
.mz_gNavi{
	z-index:99;
}
.mz_container {
	width: auto;
	margin: 0;
}
.main-col--shingle {
	padding: 0;
	margin: 0 auto 0 auto;
}


#contents{
	width:100%;
	padding:0;
	min-width:initial;

}

#contents .cnt{
	width:100%;
}
#main{
	height:initial;
	background:none;
}
#main .bg_logo{
	position:absolute;
	width:40%;
	height:65%;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
#about{
	padding:0 10px;
}
#about{
	width:90%;
	margin: 0 auto;
}
#about .about_img{
	width:100%;
	max-width:230px;
	margin:30px auto 40px auto;

}
#about .about_txt{
	font-size:1.3rem;
	line-height:1.6;
	margin-bottom:20px;
	text-align:center;
}
#comp{
	padding:0 10px;

}
#comp .comp_txt_e{
	font-size:1.0rem;
	padding-top:37px;
}
#comp .comp_txt_j{
	font-size:2.0rem;

}
#comp .comp_txt{
	font-size:1.3rem;
	line-height:1.6;
	padding-bottom:35px;
}
#type{
	padding:0 10px 2px 10px;
}
#type .type_txt_e{
	font-size:1.0rem;
	padding-top:37px;


}
#type .type_txt_j{
	font-size:2.0rem;
	font-weight:500;
	margin-bottom:35px;
}
#type section{
	padding:0;
	width:100%;
	margin:0 auto 32px auto;
}
#type section h3{
	font-size:1.8rem;
	margin-top:0;
	margin-bottom:5px;
}
#type section h4{
	font-size:1.5rem;
	margin-bottom:21px;
}
#type section p{
	font-size:1.3rem;
}
#type .text_area_l{
	width:100%;
	padding-right:0;
	float:none;
}
#type .text_area_r{
	width:100%;
	padding-left:0;
	float:none;
}
#type .img_area{
	float:none;
	padding:20px 0 15px;
}
#mechanis{
	padding:0 10px;
}
#mechanis .mechanis_txt_e{
	font-size:1.0rem;
	padding-top:37px;
}
#mechanis .mechanis_txt_j{
	font-size:2.0rem;
	margin-bottom:15px;
}
#mechanis h2{
	font-size:1.9rem;
	padding:6px 5px;
	border-top:1px solid #000;
	margin-bottom:20px;
}
#mechanis section{
	padding:0;
	width:100%;
	margin:0 auto 32px auto;
}
#mechanis section h3{
	font-size:1.8rem;
	margin-top:19px;
	margin-bottom:5px;
}
#mechanis section h4{
	font-size:1.5rem;
	margin-bottom:8px;
}
#mechanis section h5{
	font-size:1.4rem;
	margin-bottom:4px;
}
#mechanis section p{
	font-size:1.3rem;
	line-height:1.666666666;
	margin-bottom:18px;
}
#mechanis .text_area_l{
	width:100%;
	padding-right:0;
	float:none;
    min-height: 330px;
}
#mechanis .text_area_r{
	width:100%;
	padding-left:0;
	float:none;
}
#mechanis .img_area{
	float:none;
	padding:20px 0 15px;
}
#spec{
	padding:0 10px;
}
#spec .spec_txt_e{
	font-size:1.0rem;
	padding-top:37px;
}
#spec .spec_txt_j{
	font-size:2.0rem;
	margin-bottom:19px;
}
#spec .spec_txt{
	font-size:1.3rem;
	line-height:1.6;
	margin-bottom:30px;
}
#spec h3{
	font-size:1.8rem;
	margin-bottom:28px;
}
#spec h3:before{
	width:200px;
	height:1px;
	left:-220px;
}
#spec h3:after{
	width:200px;
	right:-220px;
}

#spec ul li{
	width:100%;
	margin-bottom:30px;
}
#spec ul li p{
	margin-bottom:20px;
}

#spec ul li:first-child p{
	margin-bottom:20px;
}
#spec ul.tights_link li{
	width:50%;

}
#spec ul.tights_link_detail li{
	width:90%;

}
#spec h4{
	font-size:1.7rem;
	margin-top:10px;
	margin-bottom:20px;
}
#spec .tights_function{
	margin-bottom:36px;
}
#spec .bg_gray{
	padding:18px 0 44px;
}
#movie{
	padding:30px 10px;
	margin:0;
}
#movie .cnt
	width:100%;
}
#movie .movie_ttl{
	font-size:3.2rem;
	margin-bottom:5px;
    text-align: center;
}
#movie .movie_ttl_txt{
	font-size:2.0rem;
	margin-bottom:18px;
    text-align: center;
}

ins, mark {
    background-color: #ff9;
    color:#000
}

body, ins, mark {
    color:#000
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, hr, menu, nav, section, summary {
    display:block
}

a, hr {
    border: 0;
    padding:0
}

abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align:baseline
}

html {
    overflow-y: scroll;
    font-size:62.5%
}

body {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 16px;
    font-size: 1.6rem;
    background: #FFF;
    text-align: left;
    letter-spacing: 0;
    -webkit-text-size-adjust:100%
}

abbr, address, cite, code, dfn, dt, em, i, kbd, mark, q, ruby, s, samp, time, var {
    font-style: normal;
    font-weight:400
}

fieldset, img {
    border: 0;
    vertical-align:top
}

blockquote, q {
    quotes:none
}

blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content:none
}

a {
    margin: 0;
    background: 0 0;
    font-size: 100%;
    vertical-align:baseline
}

ins {
    text-decoration:none
}

mark {
    font-style: italic;
    font-weight:700
}

del {
    text-decoration:line-through
}

abbr[title], dfn[title] {
    border-bottom: 1px #000 dotted;
    cursor:help
}

table {
    font-size: inherit;
    border-collapse: collapse;
    border-spacing:0
}

hr {
    height: 1px;
    border-top: 1px #ccc solid;
    margin:1rem 0
}

input, select {
    vertical-align:middle
}

button, input, select, textarea {
    font:99% arial, helvetica, clean, sans-serif
}

sub, sup {
    font-size:75%
}

code, kbd, pre, samp, tt {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height:100%
}

sup {
    vertical-align:text-top
}

sub {
    vertical-align:text-bottom
}

ol, ul {
    list-style:none
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap:break-word
}

@media print {
    a[href]:after {
        content: "" !important
    }

    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
        float:left
    }

    .col-sm-12 {
        width:100%
    }

    .col-sm-11 {
        width:91.66666667%
    }

    .col-sm-10 {
        width:83.33333333%
    }

    .col-sm-9 {
        width:75%
    }

    .col-sm-8 {
        width:66.66666667%
    }

    .col-sm-7 {
        width:58.33333333%
    }

    .col-sm-6 {
        width:50%
    }

    .col-sm-5 {
        width:41.66666667%
    }

    .col-sm-4 {
        width:33.33333333%
    }

    .col-sm-3 {
        width:25%
    }

    .col-sm-2 {
        width:16.66666667%
    }

    .col-sm-1 {
        width:8.33333333%
    }

    .col-sm-pull-12 {
        right:100%
    }

    .col-sm-pull-11 {
        right:91.66666667%
    }

    .col-sm-pull-10 {
        right:83.33333333%
    }

    .col-sm-pull-9 {
        right:75%
    }

    .col-sm-pull-8 {
        right:66.66666667%
    }

    .col-sm-pull-7 {
        right:58.33333333%
    }

    .col-sm-pull-6 {
        right:50%
    }

    .col-sm-pull-5 {
        right:41.66666667%
    }

    .col-sm-pull-4 {
        right:33.33333333%
    }

    .col-sm-pull-3 {
        right:25%
    }

    .col-sm-pull-2 {
        right:16.66666667%
    }

    .col-sm-pull-1 {
        right:8.33333333%
    }

    .col-sm-pull-0 {
        right:auto
    }

    .col-sm-push-12 {
        left:100%
    }

    .col-sm-push-11 {
        left:91.66666667%
    }

    .col-sm-push-10 {
        left:83.33333333%
    }

    .col-sm-push-9 {
        left:75%
    }

    .col-sm-push-8 {
        left:66.66666667%
    }

    .col-sm-push-7 {
        left:58.33333333%
    }

    .col-sm-push-6 {
        left:50%
    }

    .col-sm-push-5 {
        left:41.66666667%
    }

    .col-sm-push-4 {
        left:33.33333333%
    }

    .col-sm-push-3 {
        left:25%
    }

    .col-sm-push-2 {
        left:16.66666667%
    }

    .col-sm-push-1 {
        left:8.33333333%
    }

    .col-sm-push-0 {
        left:auto
    }

    .col-sm-offset-12 {
        margin-left:100%
    }

    .col-sm-offset-11 {
        margin-left:91.66666667%
    }

    .col-sm-offset-10 {
        margin-left:83.33333333%
    }

    .col-sm-offset-9 {
        margin-left:75%
    }

    .col-sm-offset-8 {
        margin-left:66.66666667%
    }

    .col-sm-offset-7 {
        margin-left:58.33333333%
    }

    .col-sm-offset-6 {
        margin-left:50%
    }

    .col-sm-offset-5 {
        margin-left:41.66666667%
    }

    .col-sm-offset-4 {
        margin-left:33.33333333%
    }

    .col-sm-offset-3 {
        margin-left:25%
    }

    .col-sm-offset-2 {
        margin-left:16.66666667%
    }

    .col-sm-offset-1 {
        margin-left:8.33333333%
    }

    .col-sm-offset-0 {
        margin-left:0
    }

    .visible-xs {
        display:none !important
    }

    .hidden-xs {
        display:block !important
    }

    table.hidden-xs {
        display:table
    }

    tr.hidden-xs {
        display:table-row !important
    }

    td.hidden-xs, th.hidden-xs {
        display:table-cell !important
    }

    .hidden-sm, .hidden-xs.hidden-print {
        display:none !important
    }

    .visible-sm {
        display:block !important
    }

    table.visible-sm {
        display:table
    }

    tr.visible-sm {
        display:table-row !important
    }

    td.visible-sm, th.visible-sm {
        display:table-cell !important
    }
}

.col-xs-2-5 {
    width: 20%;
    float:left
}

@media (min-width: 768px) {
    .col-sm-2-5 {
        width: 20%;
        float:left
    }
}

@media (min-width: 992px) {
    .col-md-2-5 {
        width: 20%;
        float:left
    }
}

@media (min-width: 1200px) {
    .col-lg-2-5 {
        width: 20%;
        float:left
    }
}

iframe[name=google_conversion_frame] {
    position: absolute;
    top: 0
}

.fit-image {
    position: relative;
}

.fit-image h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 48px;
    color: #fff;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    margin: auto;
    z-index: 1;
}

.fit-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
  }

  .prduct-top-img {
      position: relative;
      background-image: url(../img/main-img.jpeg);
      height: 300px;
      background-size: 100%;
  }

  .prduct-top-img h1 {
      position: absolute;
      top: 50%;
      left: 35%;
      transform: translateY(-50%) translateX(-50%);
      -webkit- transform: translateY(-50%) translateX(-50%);
      font-size: 4.0vw;
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  }

#about2{
    padding: 10px 0 0 0;
    width: 960px;
    margin: 0 auto;
    min-height: 100px;
}
#about2 .about2_img{
	width:300px;
}
#about2 .about2_txt{
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.866666;
    text-align: left;
    float: left;
}

#about2 img {
    padding: 55px 28px;
}

.news-wrapper a:hover {
    border-bottom: #000;
    color: #010066;
    font-weight: 700;
}

/*creaative-contents*/
.creative {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    width: 1020px;
    margin: 0 auto;
    padding: 70px 0;
}

.creative-wrapper {
    display: flex;
    margin-bottom: 60px;
}

.creative-box {
    width: 50%;
    margin: 0 20px;
    padding: 20px 0 40px 0;
    border-bottom: solid 3px #000;
}

.creative-box img {
    height: 60px;
    width: auto;
}

.creative-box h1 {
    color: #010066;
    position: relative;
    font-size: 28px;
    display: flex;
    padding: 0 0 0 15px;
}

.creative-box span {
    display: block;
    padding: 20px 0 20px 10px;
}

.creative-box p {
    font-size: 22px;
    letter-spacing: 4px;
    line-height: 32px;
    padding:20px 20px 0 20px;
}

.right-contents1-min {
    display: none;
}

.right-contents-product {
    display: block;
    text-align: center;
    margin: 30px 0;
}

.clearfix_h2_min {
    display: none;
}