@charset "UTF-8";
/* CSS Document */


.header{
padding: 0;
margin: 0;
}

.toplogo{
padding: 2rem;
}
.toplogo img{
width: 150px;
}



/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
	z-index: 1;
	height: 800px;
}
/*　背景画像設定　*/

.slider-item01 {
    background:url("/img/top01.jpg");
}

.slider-item02 {
    background:url("/img/top02.jpg");
}

.slider-item03 {
    background:url("/img/top03.jpg");
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:810px;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}



@media only screen and (max-width: 640px) {
.slider {
	height: 300px;
}
.slider-item {
    width: 100%;
    height:310px;
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
}




/*--------イントロ部分----------*/

#intro{
position: relative;
background-color: #000;
background-image: url("../img/intro_back.png");
background-position: top left 5rem;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
padding: 8rem 0;
}
#intro h1{
margin-top: 12rem;
padding-left: 8rem;
padding-bottom: 1rem;
font-size: 4.5rem;
font-weight: bold;
letter-spacing: 1rem;
display: inline-block;
font-family: 'Zen Kaku Gothic New', sans-serif;
}
#intro p{
font-family: 'Zen Kaku Gothic New', sans-serif;
font-weight: bold;
font-size: 1.4rem;
margin-top: 5rem;
line-height: 3.2rem;
letter-spacing: 0.6rem;
}

.in_l{
position: relative;
}
.greenline_l{
position: absolute;
left: 0;
bottom:1;
border-bottom: 3px solid #b8d200;
width: 60%;
}

.intro_r{
position: absolute;
top:5rem;
right: 0;
}
.intro_r img{
width: 530px;
}

.introbox{
position: relative;
}
.intro_l{
position: absolute;
top:0;
left: 0;
}
.intro_l img{
width: 530px;
}
.in_r{
text-align: right;
margin-top: 5rem;
position: relative;
}
.in_r h1{
margin-top: 12rem;
padding-top: 3rem;
padding-right: 8rem;
padding-bottom: 1rem;
font-size: 4.5rem;
font-weight: bold;
letter-spacing: 1rem;
display: inline-block;
font-family: 'Zen Kaku Gothic New', sans-serif;
text-align: left;
}
.greenline{
position: absolute;
right: 0;
bottom:1;
border-bottom: 3px solid #b8d200;
width: 60%;
}
.in_te2{
margin-top: 1rem;
}
.bannerbox{
display: flex;
}
.bannerbox img{
width: 50%;
}

@media only screen and (max-width: 1000px) {
#intro{
background-position: bottom left 5rem;
background-size: contain;
background-repeat: no-repeat;
padding: 3rem 0;
}
#intro p{
font-size: 1.3rem;
margin-top: 5rem;
line-height: 2rem;
letter-spacing: 0.1rem;
}
.intro_r,.intro_l{
position: static;
}
.intro_r img,.intro_l img{
width: 100%;
margin-top: 3rem;
}
#intro h1,.in_r h1{
margin-top: 0;
padding: 2rem 1rem 1rem 1rem;
font-size: 2.4rem;
letter-spacing: 0.3rem;
display: inline-block;
align-items: center;
}
.greenline_l,.greenline{
margin-bottom: 5rem;
width: 80%;
}


}



/*--------プロダクト----------*/

#product{
background-color: #910000;
padding: 15rem 0;
}

 h2{
color: #fff;
text-align: center;
letter-spacing: 1rem;
font-weight: bold;
font-size: 6rem;
letter-spacing: 0.5rem;
font-family: 'Zen Kaku Gothic New', sans-serif;
margin-bottom: 2rem;
}
h2 span{
font-size: 1.8rem;
letter-spacing: 0.5rem;
font-weight: 200;
margin-top: 1rem;
display: block;
}

.whitebox{
background-color: #fff;
box-shadow: 5px 5px 0px 0 rgb(0, 0, 0);
margin: 3rem 1rem 1rem 1rem;
padding: 2rem;
text-align: center;
}
.whitebox img{
width: 100%;
}

#product h3{
text-align: center;
font-size: 2.6rem;
letter-spacing: 0.2rem;
font-weight: bold;
}
#product h3 span{
font-size: 1.4rem;
font-weight: bold;
margin-top: 1rem;
padding-bottom: 2rem;
display: block;
}

/*　透過　*/

.opacity img{
	opacity:1;
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.opacity a:hover img{/*hoverした時の変化*/
	opacity:0.5;/*透過具合を変更したい場合はこの数値を変更*/
}


/*== 波紋がふわっと広がる */

.btnripple3{
    /*波紋の基点とするためrelativeを指定*/
	position: relative;
    /*リンクの形状*/
	display:inline-block;
    text-decoration: none;
    color: #000;
    outline: none;
}

/*波形の設定*/
.btnripple3:hover::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left:30%;
    top:0;
    /*波形の形状*/
    border: 1px solid #910000;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /*はじめは不透明*/
	opacity:1;
    /*アニメーションの設定*/
    animation:1s circleanime2 forwards;
}

/*波形が広がるアニメーション*/
@keyframes circleanime2{
	0%{
	  transform: scale(0);
	}
	100%{
		transform:scale(2);
		opacity: 0;
	}
}


@media (max-width: 768px) {
#product{
padding: 8rem 0;
}
h2{
letter-spacing: 1rem;
font-weight: bold;
font-size: 4rem;
letter-spacing: 0.5rem;
margin-bottom: 2rem;
}
h2 span{
font-size: 1.4rem;
}

}



/*--------ショップ----------*/

#shop{
background-color: #000;
padding: 15rem 0;
}
.whitebox2{
position: relative;
background-color: #fff;
box-shadow: 5px 5px 0px 0 rgb(0, 0, 0);
margin: 6rem 1rem 1rem 1rem;
padding: 2rem;
}
.whitebox2 img{
position: relative;
width: 100%;
top:-4rem;
}


@media (max-width: 768px) {
#shop{
padding: 8rem 0;
}


}


/*--------会社概要----------*/
#about{
background-image: url("../img/ind_aboutback.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 10rem 0;
}
.infoinner{
background-color: rgba(23,23,23,0.79);
padding: 5rem;
}
.comment{
text-align: center;
color: #fff;
margin: 1rem 0;
font-size: 1.2rem;
}

/* table01 */
#table01{
color: #fff;
width: fit-content;
margin: 0 auto;
width: 60%;
}
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
  width: 100%;
}
#table01 td {
  padding: 24px 0;
  border: none;
  width: 100%;
}

#table01 th {
  width: 20%;
}

/* sp */
@media only screen and (max-width: 768px) {
#about{
padding: 6rem 0;
}
.infoinner{
padding: 3rem 1rem;
margin: 0 1rem;
}
.comment{
text-align: left;
}
#table01{
width: 100%;
}
#table01 tr{
padding: 2rem 0;
}
#table01 th,
#table01 td {
width: 100%;
display: block;
padding-top: 2rem;
}
#table01 th {
width: 100%;
}
#table01 td {
width: 100%;
padding-top: 0;
}
}



/*--------コンタクト----------*/
#contact h2{
color: #000;
text-align: center;
letter-spacing: 1rem;
font-weight: bold;
font-size: 5rem;
font-family: 'Zen Kaku Gothic New', sans-serif;
margin-bottom: 2rem;
padding-top: 10rem;
}

.iconbox{
padding-top: 3rem;
text-align: center;
}
.iconbox img{
width: 60px;
padding: 0 0.8rem;
}

@media only screen and (max-width: 768px) {
#contact h2{
font-size: 5rem;
letter-spacing: 0.5rem;
padding-top: 5rem;
}
}


/*--------フッター----------*/