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


.grid-container-wrap{
width: 90%;
margin: 50px auto 0;
}



/* ---------------VISUAL */

.v-on{
border-bottom: 1px solid #333;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px 0;
}

.item img {
  width: 100%;
  height: auto;
}

@media (min-width: 40em) {
.grid-container-wrap{
width: 75%;
max-width: 1240px;
margin: 50px auto 0;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-gap: 30px;
}
.item__1{
grid-column:1/2;
grid-row:1/2
order: 1;
}
.item__2{
grid-column:2/3;
grid-row:1/2
order: 2;
}
.item__3{
grid-column:1/2;
grid-row:2/3
order: 3;
}
.item__4{
grid-column:2/3;
grid-row:2/3
order: 4;
}
.item__5{
grid-column:1/3;
grid-row:3/4
order: 5;
}
.item__6{
grid-column:1/2;
grid-row:4/5
order: 6;
}
.item__7{
grid-column:2/3;
grid-row:4/5
order: 7;
}
.item__8{
grid-column:1/2;
grid-row:5/6
order: 8;
}
.item__9{
grid-column:2/3;
grid-row:5/6
order: 9;
}
.item__10{
grid-column:1/3;
grid-row:6/7
order: 10;
}
.item__11{
grid-column:1/3;
grid-row:7/8
order: 11;
}
.item__11-2{
grid-column:1/2;
grid-row:7/8
order: 11;
}
.item__12{
grid-column:2/3;
grid-row:8/8
order: 12;
}
}

.visual_credit{
line-height: 1.4em;
margin-top: 10px;
}

/* ---------------CRAFTMANSHIP */

.grid-menu{
margin: 0 auto;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

.grid-menu p{
margin-top: 10px;
}

.factory_content{
width: 80%;
margin: 0 auto;
}

@media(max-width: 767px){
  .factory_content {
    width: 95%;}
  }

.factory_content .grid-contents{
 display: grid;
 gap: 30px;
 grid-template-columns: 1fr 1fr;
 margin-top: 30px;
}
@media(max-width: 767px){
 .factory_content .grid-contents {
    grid-template-columns: 1fr;
  }
}

.factory_content .grid-contents p{
text-align: left;
}

.factory_img_top img{
width: 100%;
margin-top: 50px;
}

.factory_img_top_video{
width: 50%;
margin: 50px auto 0 auto;
}
@media(max-width: 767px){
  .factory_img_top_video {
    width: 80%;}
  }
.factory_img_top_video video{
width: 100%;
}
.factory_content .people_p{
margin-top: 50px;
}


.factory_img{
margin-top: 20px;
}


.grid-contents-item2{
gap: 30px
}


.stock_box p{float:left;margin-right: 150px;}




/* Mobile (Portrait/iPhone6) 画面の横幅が375px〜479pxまで
---------------------------------------------------- */

@media screen and (max-width: 479px) {
.wrapper { width: 100%;}
#contents{ width: 100%; padding:0 15px;}
.header-inner { width: 336px; margin: auto; }
li.item { height: auto; margin-bottom: 100px; }
.footer-inner { width: 336px; padding: 0px 0px;}
.stock_box p{float:none;margin-right: 0px;}
}



/* Mobile (Landscape) 画面の横幅が767pxまで
---------------------------------------------------- */

@media screen and (max-width: 767px) {
.wrapper { width: 100%;}
#contents{ width: 100%; padding:0 15px;}
.header-inner { width: 420px; margin:auto; }
li.item { height: auto; margin-bottom: 100px; }
.footer-inner { width: 420px; padding: 0px 0px;}
.stock_box p{float:none;margin-right: 0px;}
}


.sp{ display: none; }

@media screen and (max-width: 768px) {
  .sp{ display: block; }
}