@charset "utf-8";
/* CSS Document */
body{
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
font-size:15px;
line-height: 1.5;
background-color: #CCC1BE;
color:#451d16;
}

img{
vertical-align: bottom;
}

#wrapper1{
display:flex;
width:100%;
overflow:hidden;
  flex-direction: column;
  min-height: 100vh;

}

#wrapper2{
margin:0 auto;
width:67%;
}

.title{
 padding-top: -100px;
 margin-top:100px;
 height:21px;
 width:auto;
}


header{
background-color: #b28383;
height:40px;
position:fixed;
width:100%;
display:flex;
justify-content: space-between;
z-index:1;
}

header a{
text-decoration-line: none;
list-style: none;
}

#header_logo{
text-align:left;
margin-left:10%;
display:flex;
}


header #gra{
margin-top:2%;
  margin-right:10px;
  width:auto;
height:30px;
}
header #typ{
margin-top:4%;
  width:auto;
height:22px;
}

header #memu{
margin-top:50px;
margin-right:50px;
}


.nui{
display:block;
margin:0 auto;
margin-top: 50px;

}


article .title{
text-align: center;
margin-bottom:30px;
}
article h3{
font-size:20px;
font-weight:600;
color:#934746;
}

article section{
margin-bottom:20px;
}


.pui{
width:80%;
height:80%;
margin-top: 80px;
margin-bottom: 120px;
}

#about .title{
width:100%;
height:auto;
}

.kuzira{
width:75%;
height:75%;
margin-top: 80px;
margin-bottom:-150px;
}

#link{
text-align:center;
}

#link_contents{
  margin:0 auto;
	z-index:0;
	position:relative;
	height:100%;
	padding-bottom:40px;
	display: flex;
   flex-direction: column;
}

#instagram{
width:70%;
	height:auto;
	margin:0 auto;
}

#base{
margin-top:40px;
width:100%;
	height:auto;
	margin:0 auto;
}


#youtube{
margin-top:40px;
width:70%;
	height:auto;
	margin:0 auto;
}


#instagram:hover{
opacity:0.6;
transition: 0.5s ease;
}
#base:hover{
opacity:0.6;
transition: 0.5s ease;
}

#youtube:hover{
opacity:0.6;
transition: 0.5s ease;
}

#xiao:hover{
opacity:0.6;
transition: 0.5s ease;
}

#tictok:hover{
opacity:0.6;
transition: 0.5s ease;
}

.kuma{
width:70%;
height:70%;
margin-bottom:-100px;
}

#about{
display:block;
text-align:center;
}
#sell_repair{
display:block;
text-align:center;
margin-top:-150px;
}


#gallely{
display:block;
text-align:center;
}



#gallely .title{
margin-top:200px;
padding-top:-200px;
margin-bottom:50px;

}

#shiro{
width:85%;
height:85%;
margin-top:50px;

}

#accsess{
display:block;
text-align:center;
}

#accsess_contents{
display:block;
}



#movie iframe{
width:100%;

margin-bottom:15px;
}

#adress section{
font-size:14px;
margin-left:10px;
}

#adress section a{
color:#451d16;
text-decoration-line: underline;
}

#adress section a:hover{
color:#934746;
}

#adress iframe{
width:100%;
height:300px;

}

#accsess_contents section{

line-height: 2;
font-size:16px;
width:100%;
margin:0 auto;
}

.usa{
width:80%;
height:80%;
}

#syutten .title{
width:auto;
height: 40px;
object-fit: cover;
}


#syutten p{
margin-bottom: 10px;
}

#syutten .img{
 display: flex;
 float:left;
 height:350px;
 width:100%;
 padding:15px;
text-align: center;
 
}



#contact{
display:block;
text-align:center;
}

#contact_contents #tel{
display: inline-flex;
text-align:center;
}

#contact_contents #tel_icon{
justify-content: flex-start;
height:20px;
width:auto;
margin-top:3px;
margin-right:3px
}

#contact_contents a{
color:#451d16;
text-decoration-line: underline;
}

#contact_contents a:hover{
color:#934746;
}

#contact_contents h2{
font-size:22px;
}
#contact_contents h4{
font-size:14px;
}

#contact #contact_contents h3{
  padding-bottom:10px;
}

#contact .form{
margin-top: 30px;
}

#contact .form h3{
text-align:center;
}

#contact section{
width:200px;
margin:0 auto;
}

#contact section dt{
font-weight: bold;
}

#contact section dd input{
height:25px;
width:200px;
outline:0;
border:0;
border-radius: 15px;
}

#contact section dd textarea{
height:200px;
width:200px;
outline:0;
border:0;
border-radius: 15px;
}

main #contact section input[type="submit"]{
width:100px;
height:40px;
display:inline-block;
margin-bottom:30px;
margin-top:20px;
border:none;
outline:0;
background-color:#934746;
color:white;
font-weight:normal;
cursor:pointer;
text-align:center;
border-radius: 20px;
 -webkit-appearance: none;
}



h3{
width:100%;
text-align:left;
margin-bottom:10px;
margin-top:20px;
}

article p{
text-align:left;
}

.usi{
margin-top: 50px;
margin-bottom: -10px;
}

#company{
display:block;
text-align:center;
}

.company_sentence{
text-align:center;
}


article ul li{
text-align:left;
}

footer{
 margin-top:100px;
		bottom:0;
	width:100%;
	position:relative;/*←相対位置*/
	
}


#footer2{
text-align:center;
width:100%;
background-color: #934746;
color:#FFFFFF;
height:200px;
		position: relative;
	z-index:1;
bottom:0;

}

.footer{
position:absolute;
bottom:0;
}


#footer2 section {
padding-top: 20px;
text-align:center;
}


#footer2 small{
font-size:11px;
text-align:center;
}



#nav-drawer {
  position:relative;
		justify-content: flex-end;
top:10%;
 right:3%;
}


/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/

#nav-open{
 display: inline-block;
	margin-top:20%;
	margin-right:70%;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  display: block;
  cursor: pointer;
  justify-content: flex-end;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

#nav-open img{
height:20px;
width:35px;

}

#btnHamburger {
 display:none;
  position: fixed;
  top: 20px;
  left: 5px;
  margin-left: 5px;
  width: 30px; /* クリックエリアの横幅*/
  height: 20px; /* クリックエリアの高さ*/
  
 transition: .3s ease-in-out;
	z-index:99;

}

/* 3本線の1本ごとに共通するスタイルを指定 ---------------------- */
#btnHamburger .line {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px; /* 横幅 */
  height: 3px; /* 1本辺りの高さ */
  background: #fff; /* 線の色 */

  /* 適用するプロパティ、変化する時間、変化する速度 */
/*  -webkit-transition: 0.3s;
  transition: 0.3s;*/
 }

/* 3本線の各線の位置を指定 ---------------------- */
#btnHamburger .line_01 { top: 0px; }
#btnHamburger .line_03 { top: 10px; }


/*ハンバーガーメニュークリック後*/
/* 最上部の線のスタイル ---------------------- */
#btnHamburger .line_01{
  top: 8px; /* 上から2番目の線の位置に変更 */
 

  /* 線を45度回転 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
	background:#fff;
}


/* 最下部の線のスタイル ---------------------- */
#btnHamburger .line_03{
  top: 8px; /* 上から2番目の線の位置に変更 */

  /* 線を135度回転 */
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
	background:#fff;
}


/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background:#C97A7B;
  opacity: 0;
  transition: .3s ease-in-out;
}


/*中身*/
#nav-content {
  overflow: auto;
  position:fixed;
  top: 0;
  left:0;
  z-index: 9999;/*最前面に*/
  width:70%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 500%;/*最大幅（調整してください）*/
  height: 100%;
  background: #934746;/*背景色*/
  transition: .4s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(150%);
  transform: translateX(150%);/*左に隠しておく*/
  color: #FFFFFF;
  text-align: center;

}

#nav-content ul{
	text-align: center;
	margin-top:120px;
	margin-bottom:30px;
}

#nav-content ul li{
	 font-size:14px;
	line-height:2;
}

#nav-content ul li a{
	 text-decoration-line: none;
	 color:#FFFFFF;
	 list-style :none;
}

#nav-content ul li:hover{
	 text-decoration-line:underline;
	  opacity:0.6;
transition: 0.5s ease;
	
}

#nav-content .nav-pic{
margin:auto auto 150px auto;
}

#nav-content .nav-pic img{
display:flex;
text-align: center;
margin:auto;
padding:5px 0 5px 0;

height:auto;
}




#nav-content img:hover{
  opacity:0.7;
transition: 0.5s ease;
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close{
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #btnHamburger{
display: block;/*カバーを表示*/
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(50%);
  transform: translateX(50%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}




.carousel-cell {
  width: 100%; /* full width */
  height: 300px;
  background: #CCC1BE;
	  margin-right: 10px;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #CCC1BE;
	height:300px;
	margin-bottom:70px;
}


.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

.carousel-cell-image {
  display: block;
  max-height: 100%;
}

.carousel.is-fullscreen .carousel-cell-image {
  max-width: 100%;
}





.clo_test img,.clo_test2 img{
width:27%;
	height:auto;
	

}

.clo_test{
position: fixed;
z-index:-20;
 overflow: hidden;
 display:flex;
  flex-direction: column;
  left:-8%;
}

.clo_test2{
z-index:-20;
position: fixed;
 overflow: hidden;
 display:flex;
  flex-direction: column;
top:0px;
left:78%;
right:-78%;

}

/* 1つ目の画像 */
.clo_test img:first-child {
  -webkit-animation: loop 100s  -50s linear infinite;
  animation: loop 100s  -50s linear infinite;
  will-change: transform; 

}

/* 2つ目の画像 */
.clo_test img + img {
  -webkit-animation: loop2  100s linear infinite ;
  animation: loop2  100s linear infinite;
	  will-change: transform; 
}



/* 1つ目の画像 */
.clo_test2 img:first-child {
  -webkit-animation: loop 100s -50s linear infinite;
  animation: loop 100s -50s linear infinite;
   will-change: transform; 
  
}

/* 2つ目の画像 */
.clo_test2 img + img {
  -webkit-animation: loop2 100s linear infinite;
  animation: loop2 100s linear infinite;
	  will-change: transform; 
}


/*アニメーション*/
@-webkit-keyframes loop {
  0% {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }

	
}

@-webkit-keyframes loop2 {
  0% {
    -webkit-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
  }
  to {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }
}




/*confirm*/
.confirm{
margin-top:100px;
text-align:center;
}

.confirm dt{
font-weight:bold;
font-size:18px;
}

.footer2{
position: absolute;/*←絶対位置*/
 bottom: 0; /*下に固定*/
}

/*complete*/
.complete{
margin-top:150px;

}
.complete p{
text-align:center;
}

.tel1,.tel2.address-number{
color: inherit;
  text-decoration: none;
  pointer-events: none;
}





@media screen and (min-width:700px) and ( max-width:1020px) {

header{
background-color: #b28383;
height:70px;
position:fixed;
width:100%;
display:flex;
justify-content: space-between;
z-index:1;
}

header a{
text-decoration-line: none;
list-style: none;
}

#header_logo{
text-align:left;
margin-left:10%;
display:flex;
}


header #gra{
margin-top:4%;
  margin-right:10px;
  width:auto;
height:50px;
}
header #typ{
margin-top:6%;
  width:auto;
height:35px;
}

header #memu{
margin-top:70px;
margin-right:70px;
}

#nav-open{
 display: inline-block;
	margin-top:30%;
	margin-right:70%;
}

#nav-drawer {
  position:relative;
		justify-content: flex-end;
top:11%;
 right:3%;
}


#nav-open img{
height:auto;
width:45px;

}

#nav-content img{
display: block;
text-align: center;
height:auto;
}

#nav-content .nav-pic img{
display:flex;
text-align: center;
margin:auto;
padding:5px 0 5px 0;
}

#wrapper2{
margin:0 auto;
width:55%;
}

.nui{
width:35%;
height:35%
}
.pui{
width:50%;
height:50%;
}

#shiro{
width:55%;
height:55%;
}

#covid .title{
height:40px;
width:auto;
}

#about .title{
height:40px;
width:auto;
}

.title{
width:auto;
height:40px;
}

#instagram{
width:50%;
}

#base{
width:50%;
}

#youtube{
width:50%;
}

#movie iframe{
height:350px;
width:400px
}

#adress iframe{
height:370px;
width:400px
}


#adress section{
width:400px;
height:400px;
margin:0 auto;
}


#syutten .title{
width:auto;
height: 80px;
object-fit: cover;
}


#syutten p{
margin-bottom: 10px;
}

#syutten .img{
 display: flex;
 float:left;
 height:350px;
 width:auto;
 padding:15px;
text-align: center;
 
}


#contact .form h3{
text-align:center;
}

#contact section{
width:350px;
}

#contact section dd input{
width:350px;
}

#contact section dd textarea{
width:350px;
}

.usa{
margin-top:500px;
}

.clo_test{
right:3%;
  left:-6%;
}
}



@media screen and (min-width:1020px) {
header{
background-color: #b28383;
height:70px;
position:fixed;
width:100%;
display:flex;
justify-content: space-between;
z-index:1;
}

header a{
text-decoration-line: none;
list-style: none;
}

#header_logo{
text-align:left;
margin-left:10%;
display:flex;
}


header #gra{
margin-top:4%;
  margin-right:10px;
  width:auto;
height:50px;
}
header #typ{
margin-top:6%;
  width:auto;
height:35px;
}

header #memu{
margin-top:70px;
margin-right:70px;
}

#nav-open{
 display: inline-block;
	margin-top:30%;
	margin-right:70%;
}

#nav-drawer {
  position:relative;
		justify-content: flex-end;
top:11%;
 right:3%;
}


#nav-open img{
height:auto;
width:45px;

}

#nav-content img{
display: block;
text-align: center;
height:auto;
}

#nav-content .nav-pic img{
display:flex;
text-align: center;
margin:auto;
padding:5px 0 5px 0;
}

#wrapper2{
margin:0 auto;
width:40%;
}

.nui{
width:25%;
height:25%
}
.pui{
width:40%;
height:40%;
}

#shiro{
width:40%;
height:40%;
}

.usa{
width:30%;
height:30%;
}

#covid .title{
height:40px;
width:auto;
}

#about .title{
height:40px;
width:auto;
}

.title{
width:auto;
height:40px;
}

#link_contents{
	z-index:0;
	position:relative;
	width:100%;
	height:40%;
	padding-bottom:40px;
}

#instagram{
width:25%;
margin-bottom:10px;
}

#base{
width:50%;
margin-bottom:10px;
}

#tictok{
margin-bottom:10px;
}

#xiao{
margin-bottom:10px;
}

#youtube{
width:50%;
margin-bottom:10px;
}

#movie iframe{
height:290px;
width:400px;
}

#adress iframe{
height:400px;
width:400px;
}

#adress section{
width:400px;
margin:0 auto;
}

#syutten .title{
width:auto;
height: 80px;
object-fit: cover;
}


#syutten p{
margin-bottom: 10px;
}

#syutten .img{
 display: flex;
 float:left;
 height:350px;
 width:auto;
 padding:15px;
text-align: center;
 
}



#contact .form h3{
text-align:center;
}

#contact section{
width:400px;
}

#contact section dd input{
width:400px;
}

#contact section dd textarea{
width:400px;
}


.carousel-cell {
  width: 100%; /* full width */
  height: 450px;
  background: #CCC1BE;
	  margin-right: 10px;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #CCC1BE;
	height:450px;
	margin-bottom:70px;
}


.clo_test{
right:3%;
  left:-6%;
}

}