@charset "utf-8";
html{
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
body{
    background:#fff;
font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	color: #000;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
font-feature-settings: "palt";/*文字詰め*/
font-size: 62.5%;/*相対基本フォントサイズ*/
}

body.appear{
    background:#fff;
}


ul{
	margin:0;
	padding: 0;
	list-style: none;
}

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


*{
    box-sizing: border-box
}

/*
.inner{
    width:100%;
    margin:0 auto;
    padding:10px;
}

@media screen and (max-width:940px) {
.inner{
    padding:10px;
}
}
*/

/* area */

#header{
position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
display:block;
width: 100%;
height:45vh;
background:#fff;
}

#section1,#section2,#section3,#section4,#section5,#section6,#section7,#section8{
  padding-top:150px;
  margin-top:-150px;
}

/*--======TOP company Logo======--*/
.logo{
position:fixed;
padding-left:10px;
background:#fff;
width:100%;
height:100px;
z-index:130;
}


/*Header company name*/
.companyname{
position:fixed;
right:175px;
top:20px;
z-index:9999;
font-size:1rem;
font-weight:bold;
}

/*Header TELEPHONE NUMBER*/
.telephone{
position:fixed;
right:175px;
top:39px;
z-index:9999;
font-size:1rem;
font-weight:bold;
}

/*Header URL*/
.ad{
position:fixed;
right:175px;
top:58px;
z-index:9999;
font-size:0.9rem;
font-weight:bold;
}

/*--======お問い合わせ======--*/
.button{
position:fixed;
right:10px;
top:22px;
z-index:9999;
display: inline-block;
width: 155px;
height: 58px;
text-align: center;
border-radius:10px;
font-size:1.1rem;
line-height: 56px;
font-weight:bold;
outline: none;
background: #cc3300;
color: #fff;
}
.button:hover{
background: #cc3300;
}
.button::before,
.button::after{
position: absolute;
z-index: -1;
display: block;
content: '';
}
.button,
.button::before,
.button::after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}


/*---=======トップページイメージ制御=========*/
.img-wrap {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.img-wrap li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
background-size:contain;
background-position: 0% 20%;
    background-repeat: no-repeat;
    opacity: 0;
    -webkit-animation: anime 40s linear 0s infinite ;
    animation: anime 40s linear 0s infinite ;
}
.img-wrap li:nth-child(1) { 
    background-image: url(../img/topimage1.png);
}
.img-wrap li:nth-child(2) {
    background-image: url(../img/topimage2.png);
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}
.img-wrap li:nth-child(3) {
    background-image: url(../img/topimage4.png);
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}

@-webkit-keyframes anime { 
    0% {
        -webkit-animation-timing-function: ease-in;
        opacity: 0;
    }
    10% {
        -webkit-transform: scale(1.1);
        opacity: 1;
    }
    40% {
        -webkit-transform: scale(1.5);
            -webkit-animation-timing-function: ease-out;
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(1.8);
        opacity: 0;
    }
    100% { opacity: 0 }
}
@keyframes anime { 
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }
    10% {
        transform: scale(1.1);
        opacity: 1;
    }
    40% {
        transform: scale(1.2);
            animation-timing-function: ease-out;
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0;
    }
    100% { opacity: 0 }
}




/*--======TOP INTRODUCE TEL======--*/
.topintro{
width:100%;
background-color:#333;
font-size:1rem;
padding:5px;
color:#fff;
text-align:center;
}

#container{
position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
display:block;
top:-30px;
z-index: 120;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
width:100%;
background:#fff;/*全体の背景色*/
color:#000;
}

@media only screen and (orientation:portrait) {
#container{
position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
display:block;
top:-100px;
z-index: 120;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
width:100%;
background:#fff;/*全体の背景色*/
color:#000;
}
}

.cr{
position:relative;
display:block;
width:100%;
top:15px;
font-size:1rem;
line-height:1.5;
text-align:center;
font-family:sans-serif;
}

/* header */
.header-area{
width:100%;
    color: #000;
text-align:center;
padding:20px;
}

.header-area p{
font-size:1.5rem;
font-weight: bold;
}


/*--==========index 注目製品========--*/

#fp{
    padding-top:20px;
}

#fp section{
    margin: 0 0 5px 0;
}

#fp ul li a{
    color:#000;
}

#fp ul li a:hover, a:active{
    background-color: #333;
    color:#000;
}

/*--=======hoverしたら画像拡大する前======--*/
#fp ul li.larger img{
transition:all .5s;
vertical-align:bottom;
text-align:center;
}


/*--======hoverしたら画像拡大======--*/
#fp ul li.larger img:hover{
transform:scale(1.2);
}


#fp section h3{
    font-size: 0.9rem;
line-height:1;
    margin: 2px;
}

#fp section p{
    font-size: 0.8rem;
line-height:1.2;
}

#fp .menu-area{
    padding: 5px;
    box-shadow: 1px 0 1px #cc3300;
}
/*--====注目製品ｐエリア高さ====--*/
#fp .menu-area p{
    height:55px;
}

#fp .menu-btn{
    text-align: center;
    margin: 5px 0 0 0;
}



/*--=========更新記録=========--*/
.news-list{
list-style:none outside;
margin-left:auto;
margin-right:auto;
width:80%;
font-size:1rem;
}
.news-list .item{
display:flex;
flex-wrap:wrap;
text-decoration:none;
color:#333;
border-bottom:1px dotted #000;
padding:20px 20px;
}

.news-list .item:last-child a{
border-bottom:none;
}

.news-list .item .date{
margin:0;
min-width:100px;
color:#000;
padding:0 10px 0 0;
}
/*--受注用--*/
.news-list .item .category span{
background:#cc3300;
color:#fff;
font-size:0.9rem;
text-align:center;
display:inline-block;
padding:5px;
border-radius:5px;
}
/*--出展用--*/
.news-list .item .category span2{
background:#0000FF;
color:#fff;
font-size:0.9rem;
text-align:center;
display:inline-block;
padding:5px;
border-radius:5px;
}
/*--おしらせ用--*/
.news-list .item .category span3{
background:#006400;
color:#fff;
font-size:0.9rem;
text-align:center;
display:inline-block;
padding:5px;
border-radius:5px;
}

/*--紫--*/
.news-list .item .category span4{
background:#9400d3;
color:#fff;
font-size:0.9rem;
text-align:center;
display:inline-block;
padding:5px;
border-radius:5px;
}

/*--濃シアン（Medium ターコイズ）--*/
.news-list .item .category span5{
background:#48d1cc;
color:#fff;
font-size:0.9rem;
text-align:center;
display:inline-block;
padding:5px;
border-radius:5px;
}

.news-list .item .title{
margin:0;
padding-top:10px;
width:100%;
}
.news-list .item .title img{
width:50%;
float:left;
padding-right:10px;
}
.news-list .item a:hover .title{
color:#00f;
}
/*--=========更新記録 ここまで=========--*/


/*--=========アクセス情報=========--*/
/*GMAP*/
.iframewrap{
position: relative;
width: 80%;
padding-top: 25%; /* = height ÷ width × 100 */
margin:0 auto;
}

.iframewrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.news-list4{
list-style:none outside;
margin-left:auto;
margin-right:auto;
width:80%;
padding-bottom:50px;
font-size:1rem;
}
.news-list4 .item{
display:flex;
flex-wrap:wrap;
text-decoration:none;
color:#333;
border-bottom:1px dotted #000;
padding:20px 20px;
}
.news-list4 .item:first-child a{
border-top:1px dotted #000;
}
.news-list4 .item:last-child{
border-bottom:none;
}

.news-list4 .item .date{
margin:0;
min-width:140px;
color:#000;
padding:0 10px 0 0;
}

.news-list4 .item .title{
margin:0;
padding-top:10px;
width:100%;
}
.news-list4 .item a:hover .title{
color:#00f;
}

.news-list4 .item .category span{
background:#cc3300;
color:#fff;
text-align:center;
display:inline-block;
padding:10px;
border-radius:10px;
}
/*--=========アクセス情報 ここまで=========--*/



/*ACCORDION OPEN DETAILS*/
details {
  margin: 0 auto 10px;
  width:80%;
/*width: min-width:500px;*/
font-size:1rem;
  line-height: 1.2;
}


summary {
  list-style: none;
  position: relative;
  padding: 10px 10px 10px 40px;
  cursor: pointer;
  background-color: #f0f0f0;
font-size:1rem;
color:#000;
}

summary::-webkit-details-marker {
  display: none;
}

summary:hover,
details[open] summary {
  background-color: #f0f0f0;
color:#000;
}

summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  transition: transform 0.5s;
  font-size:1rem;
color:#000;
}

details[open] summary::after {
  transform: translateY(-50%) rotate(225deg);
}

/*ISO INFORMATION*/
.answer {
  padding: 30px;
  background-color:#f0f0f0;
font-size:1rem;
line-height:1.4;
color:#000;
}
.answer img{
  width:50%;
padding:20px;
}


details[open] .answer {
  animation: fadein 1s ease;
}

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



/*--======contact======--*/

.titlecenter{
display:block;
margin:0 auto;
text-align:center;
font-size:1.5rem;
color:#cc3300;
padding-top:20px;
padding-bottom:20px;
}



/*--=====PAGE-TOP Button=====--*/
#page-top{
position:fixed;
z-index:999;
bottom:0;
right:0;
background:#cc0033;
min-width:40px;
min-height:40px;
text-align:center;
color:#ff0033;
border-radius:50%;
bottom:15%;
right:5%;
}


/* footer */

#footer{
position:relative;
display:block;
top:50px;
background-color:#cc3300;
color:#fff;
padding:30px;
}

#footer dl{
width:30%; 
padding-bottom:30px; 
}

#footer dl dt,
#footer dl dd{
font-size:0.9rem;
display: inline-block;
}


#footer .footer-list a{
font-size:0.8rem;
text-align:right;
color:#fff;
}

#footer ul li{
display: inline-block;
font-size:0.7rem;
line-height:0.9rem;
}


.copyrights{
position:absolute;
display: block;
top:30px;
right:30px;
font-size:0.7rem;
color:#fff;
text-align: right;
width: 100%;
}