@charset "UTF-8";

/*--------------------基本CSS--------------------*/
body{
  width: 1024px;
  margin: 0 auto;
  padding: 0;
  background-color: #fff;
  font-family:'Helvetica','Helvetica Neue','Arial', "Noto Sans JP",'sans-serif';
  font-optical-sizing: auto;
  font-style: normal;
  color: #000;
  }


/*--------------------header--------------------*/
.index-header{
  width: 1024px;
  height: 576px;
  margin: 0 auto;
}

.img_header{
  width: 1024px;
  height: 576px;
  position: relative;
  margin: 0 auto;
}

.img_logo1{
  width: 360px;
  height: 158px;
  position: relative;
}
.img_logo2{
  position: absolute;
  top: -566px;
  left: 10px;
  background-size: cover;
  background-position: center center;
  justify-content: center;
}

.image{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  animation: image-switch-animation 25s infinite;
}

@keyframes image-switch-animation{
  0%, 30%, 100% {opacity: 0;}
  10%, 20% {opacity: 1;}
}

.src1{
  background-image: url(../images/keyvisual_01.JPG);
}
.src2{
  background-image: url(../images/keyvisual_02.JPG);
}
.src3{
  background-image: url(../images/keyvisual_03.JPG);
}
.src4{
  background-image: url(../images/keyvisual_04.JPG);
}
.src5{
  background-image: url(../images/keyvisual_05.jpg);
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}
.image:nth-of-type(5) {
  animation-delay: 20s;
}

/*----------sub-header-start---------*/
.sub-header{
  width: 1024px;
  height: auto;
  margin: 0 auto;
}
.sub-header1{
  margin: 0 auto;
  text-align: center;
}
.logo_header{
  width: 518px;
  height: 168px;
  margin: 0 auto;
}
/*----------sub-header-end---------*/


/*--------------------gnav--------------------*/
.gnav{
  margin-top: 1.5rem !important;
  margin-bottom: 3rem;
  padding: auto;
  line-height: 2;
  border-top: solid 1px #c0c0c0;
}

.list-gnav{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
}

.label{
  padding: 0 1em;
  color: #333;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  letter-spacing: .1em;
  display: block;
  position: relative;
  overflow: hidden;
  padding-left: 2rem;
  padding-right: 2rem;
}

.ruby{
  margin-top: .5em;
  color: #008037;
  text-align: center;
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  border-bottom: 1.5px solid #74463a;
}

/*----------heading----------*/
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  text-align: center;
}

.h2title{
  margin: 0 auto;
  width: 15rem;
  text-align: center;
  font-size: 1.75rem;
}

/*----------main----------*/
main{
  margin-bottom: 3rem;
}

.main_logo{
  text-align: center;
}

.ruby_main{
  margin-top: 0.1em;
  color: #008037;
  text-align: center;
  display: block;
  line-height: 1.5;
}

/*---news---*/
.new_title{
  text-align: center;
  width: 100%;
  margin-bottom: 100px;
}

.news{
  text-align: center;
}

.news_dl{
  display: flex;
  text-align: left;
}

.news_list{
  display: flex;
}

.pr{
  margin-top: 3rem;
  text-align: center;
}

/*---profile---*/
.profile_title{
  text-align: center;
}

.Biography{
  display: flex;
  justify-content: center;
  margin: 2rem;
}

.bio1{
  padding: 1rem;
}
.bio2{
  padding: 1rem;
  font-size: 1.1rem;
}
.bio2 h3{
  font-size: 1.5rem;
}
.bio2 p{
  line-height: 1.4;
}

.characteristic{
  display: block;
  width: 37rem;
  margin: 2rem;
  margin: 0 auto;
  padding: 3rem;
  text-align: center;
}
.characteristic h3{
  font-size: 1.5rem;
}
.characteristic p{
  font-size: 1.1rem;
  line-height: 1.4;
  text-align: left;
}

/*---equipment---*/
.camera{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}
.equipment h3{
  width: 150px;
  margin: 0 auto;
  margin-top: 3rem;
}
.eq_h3{
  font-size: 1.5rem;
}
.eq_h4{
  font-size: 1.25rem;
}

.camera_cont{
  width: 400px;
  height: auto;
  margin: 1rem;
}

.camera_cont p{
  width: 368px;
  text-align: justify;
}

.tool{
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.tool_cont{
  width: 250px;
  height: auto;
  margin: 1rem;
}

.tool_li{
  padding-left: 1rem;
}
.tool_margin{
  margin-top: 0.2rem;
}

/*----------Portfolio----------*/
.grid{
  width: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 0%;
  row-gap: 0%;
  padding: 0
}

.g_item1{
  grid-column: 1/3;
  grid-row: 1/2;
  width: 640px;
  height: 320px;
}

.g_item2{
  grid-column: 3/4;
  grid-row: 1/3;
  width: 320px;
  height: 640px;
}

.g_item3{
  grid-column: 2/4;
  grid-row: 3/4;
  width: 640px;
  height: 320px;
}

.g_item4{
  grid-column: 1/2;
  grid-row: 2/4;
  width: 320px;
  height: 640px;
}

.g_item5{
  /* aspect-ratio: 1/1; */
  /* object-fit: cover; */
  grid-column: 2/3;
  grid-row: 2/3;
  width: 320px;
  height: 320px;
}

.g_item1:hover{opacity: 0.7;}
.g_item2:hover{opacity: 0.7;}
.g_item3:hover{opacity: 0.7;}
.g_item4:hover{opacity: 0.7;}
.g_item5:hover{opacity: 0.7;}


/*----------footer----------*/
.footer-content{
  display: flex;
  justify-content: space-around;
  position: relative;
  align-items: center;
  border-top: solid 1px #c0c0c0;
  text-align: center;
  text-decoration: none;
}

.footer-left{
  text-align: center;
  margin-top: 1rem;
  margin-left: 1rem;
}

.footer-left-ul li{
  display: inline;
  margin: 1rem 0 1rem 0;
}

.btn_disclaimer, .btn_privacy{
  text-decoration: none;
  color: #202020;
  margin: 1rem 0 1rem 0;
}

.btn_disclaimer::before{ content: "＜";}
.btn_disclaimer::after {content: "＞";}
.btn_privacy::before{ content: "＜";}
.btn_privacy::after {content: "＞";}

.footer-right{
  margin-top: 1rem;
  margin-right: 1rem;
}

.ft li{
  align-items: center;
}
.twitter {
  margin: 0 1rem 0 1rem;
} 
.instagram{
  margin: 0 1rem 0 1rem;
}
.youtube {
  margin: 0 2rem 0 1rem;
}

.copyright{
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}


/*----------disclaimer&privacy----------*/
.disclaimer, .privacy, .c_section, .profile, .equipment, .portfolio, .news_title{
  /* width: 100%; */
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
  padding: 20px;
  background: #f8f8f0;
  border-radius: 20px;
}

.privacy_sec, .disclaimer_sec, .contact_sec{
  width: 64rem;
  margin: 0 auto;
  display: block;
  text-align: left;
  list-style: none;
  font-size: 100%;
}

.privacy_sec/*, .disclaimer_sec*/ ol li{
  list-style: outside decimal;
}
.privacy_sec/*, .disclaimer_sec*/ ol li::marker{
  font-size: 120%;
  font-weight: 500;
  color: #008037;
}

.privacy_sec h2{
  margin-top: 2rem;
  padding: 1rem 0 1rem 1rem;
  font-size: 1.5rem;
  border-left: 5px solid #008037;
}

.period{
  text-align: right;
  margin: 2rem 2rem 4rem 0;
}

.ga {
  display: block;
}

.galia{
  text-decoration: none;
  padding-right: 1rem;
}

.h1{
  text-align: center;
  font-size: 2rem;
}

.h2left{
  text-align: left;
  font-size: 1rem;
}

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

.c_form{
  margin:  0 auto;
  display: block;
}


.c_label{
  display: block;
  margin: 1.5rem 0 .5rem 0;
  padding: .2rem .2rem .5rem .5rem;
  border-left: 3px solid #008037;
}

.c_name, .c_email, .c_subject{
  width: 30rem;
}

.c_message{
  width: 40rem;
  height: 300px;
}

.c_submit{
  text-align: center;
  margin: 2rem;
}


.submit_btn{
  display: inline-block;
  width: auto;
  border-radius: 5px;
  font-size: 1.25rem;
  text-align: center;
  cursor: pointer;
  padding: 8px 8px 8px 16px;
  background-color: #008037;
  color: #fff;
  line-height: 1rem;
  transition: .3s;
  border: 2px solid #008037;
  letter-spacing: 8px;
}

.submit_btn:hover{
  color: #008037;
  background-color: #fff;
}


/*----------@media screen----------*/
@media screen and (max-width: 768px) {
  footer {
    flex-direction: column;
  }

  .header_logo{
    width: stretch;
  }
  .footer-content {
    /*flex-wrap: wrap; 
    justify-content: center;
    width: stretch;
    align-items: center; */
    display: block;
    text-align: center;
  }
}