@charset "UTF-8";
/* bigmac build lab | MECHANICAL */

/*==========================================
common
==========================================*/
* {
  box-sizing:border-box;
}
body {
  font-size:100%;
  background:#000;
}
a {
  color:#666;
  text-decoration:none;
}
.clearfix:after {
  content:"";
  display:block;
  clear:both;
}
/* SP **********************************************************/
@media only screen and (max-width:769px) {
/***************************************************************/
  /*==========================================
common
==========================================*/
  body {
    width:95%;
    margin:10px auto;
  }
  header,main {
    text-align:center;
    background:#fff;
  }
/*==========================================
header
==========================================*/
  .mean-bar {
		margin-bottom:15px;	
	}
/*==========================================
main left-col
==========================================*/
  main aside {
    font-family: 'Audiowide', cursive;
  }
  main aside h1 {
    font-size:2em;
    padding-top:10px;
    margin-bottom:5px;
  }
  main aside h2 {
    margin-bottom:10px;
  }
/*==========================================
main right-col
==========================================*/
  main section ul.select {
    display:none;
  }
  main section ul.thumbnail li {
    width:50%;
    float:left;
    padding:2.5%;
  }
  main section ul.thumbnail li:nth-child(odd) {
    padding-right:0px;
  }
  main section ul.thumbnail li img {
    width:100%;
    height:200px;
    object-fit: cover;
  }
/*-------------- about ----------------*/
  .about .aboutImg {
	width: 320px;
	text-align: center;
  }
  .about .aboutText {
	width: 320px;
	text-align: left;
	line-height: 1.4;
	padding-bottom: 20px;
	margin: 0 auto;
  }
  .about .aboutText h3 {
    font-size: 16px;
	margin: 20px 0;
  }
/*==========================================
footer
==========================================*/
  footer {
    padding:10px 0;
  }
  footer p {
    font-size:0.8em;
    color:#fff;
    text-align: right;
  }
  footer p small span {
    font-size:1.5em;
    vertical-align: -12%;
  }
/***************************************************************/
} /* end of PC media query
****************************************************************/

/* PC **********************************************************/
@media only screen and (min-width:769px) {
/***************************************************************/
/*==========================================
common
==========================================*/
  body {
    width:980px;
    font-size:13px;
    margin:0 auto;
  }
/*==========================================
header
==========================================*/
  header nav ul {
    display: flex;
    text-align: center;
    padding-top:65px;
  }
  header nav ul li {
    height:30px;
    line-height:30px;
    padding:0 15px;
    font-family: 'Play', sans-serif;
  }
  header nav ul li a {
    display: block;
    color:#fff;
    transition:color 0.5s;
  }
  header nav ul li a:hover {
    color:#fd4dba;
    transition:color 1s;
  }
  header nav ul li.stay {
    color:#fff;
    border-radius: 5px 5px 0 0;
    background:#fd4dba;
  }
/*==========================================
main left-col
==========================================*/
  main.container, main.container2 {
    display: flex;
  }
  main aside {
    width:320px;
    text-align:center;
    font-family: 'Audiowide', cursive;
    background:#fff;
    padding-top:333px;
  }
  .container2 aside {
	padding-top: 210px;  
  }
  main aside h1 {
    font-size:29px;
    margin-bottom:10px;
  }
  main aside h2 {
    font-size:19px;
  }
/*==========================================
main right-col
==========================================*/
  main section {
    width:661px;
    background:#fff;
    padding-top:10px;
  }
  main section ul.select {
    display:flex;
  }
  main section ul.select li {
    width:156px;
    height:32px;
    text-align: center;
    line-height:32px;
    font-family: 'Play', sans-serif;
    margin:0 10px 10px 0;
    background:#000;
    transition: background-color 0.5s;
  }
  main section ul.select li:hover {
    background:#ccc;
    transition: background-color 1s;
  }
  main section ul.select li a {
    display:block;
    color:#fff;
    transition: background-color 0.5s;
  }
  main section ul.select li:hover a {
    color:#000;
    transition:color 1s;
  }
  main section ul.thumbnail li {
    float:left;
    width:157px;
    height:136px;
    margin:0 10px 10px 0;
  }
  main section ul.thumbnail li:nth-child(4n) {
    margin-right:0px;
  }
  main section ul.thumbnail li img {
    width:100%;
    height:136px;
    object-fit: cover;
  }
  main section.viewer {
    padding-top:0;
  }
  main section.viewer ul li img {
    width:100%;
    height:800px;
    object-fit:cover;
  }
  .viewer {
    margin: 0 auto;
    width: 661px;
    height: 650px;
    text-align: left;
    overflow: hidden;
}
.viewer ul {
    width: 661px;
    height: 650px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer ul li {
    top: 0;
    left: 0;
    width: 661px;
    height: 650px;
    display: none;
    position: absolute;
}
/*--------------img position----------------*/
  #C00839 {
    object-position:24% 0;
  }
  #SC00880 {
    object-position:16% 0;
  }
  #SC00865 {
    object-position:50% 0%;
  }
  #C00856 {
    object-position:30% 0%;
  }
  #SC00885 {
    object-position:43% 0%;
  }
  #DSCF1402 {
    object-position:0% 0%;
  }
  #DSCF1398 {
    object-position:0% 5%;
  }
  #DSCF1407 {
    object-position:50% 0%;
  }
  #DSCF1405 {
    object-position:0% 12%;
  }
  #DSCF2190 {
    object-position:0% 0%;
  }
  #DSCF2195 {
    object-position:20% 0%;
  }
  #cyclone {
    object-position:100% 0%;
  }
  #DSCF22 {
    object-position:25% 0%;
  }
  #Cyclone2 {
    object-position:2% 0%;
  }
  #DSCF2217 {
    object-position:15% 0%;
  }
  #DSC01386 {
    object-position:0% 0%;
  }
  #DSCF2232 {
    object-position:0% 0%;
  }
  #DSCF2242 {
    object-position:0% 21%;
  }
  #DSCF1849 {
    object-position:5% 0%;
  }
  #DSCF1858 {
    object-position:0% 0%;
  }
/*-------------- about ----------------*/
  .about li {
    float:left;
	margin: 0 30px 10px 0;
  }
  .about .aboutImg {
    width: 320px;
  }
  .about .aboutText {
    width: 270px;
	line-height: 1.4;
  }
  .about .aboutText h3 {
    font-size: 16px;
	margin: 20px 0;
  }
/*==========================================
footer
==========================================*/
  footer {
    padding:10px 0;
  }
  footer p {
    font-size:11px;
    color:#fff;
    text-align: right;
  }
  footer p small span {
    font-size:19px;
    vertical-align: -15%;
  }
/***************************************************************/
} /* end of PC media query
****************************************************************/