@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Zen+Kaku+Gothic+New:wght@400;700;900&display=swap');

#main section::after,
#main li::after,
#main ul::after,
#main div::after{
 content: normal
}
#main{
 font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"
}
#main p{
 line-height: 2; 
}
#main .lp_main_image{
 height: 100vh;
 max-height: 800px;
 background: url("../page_images/csp/main_pc.webp") no-repeat center center;
 background-size: cover;
 color: #fff;
}
#main .lp_main_image h1{
 line-height: 1.75;
 margin: 0;
 font-size: 50px;
}
#main .lp_main_image h1 img{
 margin-bottom: 0;
 width: 160px;
}
#main .lp_main_image .inner{
 display: flex;
 align-items: center;
 height: 100%;
 max-width: 1020px;
 width: 100%;
 margin: auto;
}
#main .lp_about{
 background: url("../page_images/csp/about_image.webp") 0 0;
 background-size: auto 100%;
 height: 630px;
 animation: bg 20s linear infinite;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
}
.lp_member_item h4,
.lp_products h2,
.lp_member h2,
.lp_project h2,
.lp_about h2{
 font-family: Oswald,Arial, Helvetica, "sans-serif";
 font-weight: normal;
}
#main .lp_about h2{
 font-size: 3.75rem;
 line-height: 1;
}
#main .lp_about p{
 font-size: 1rem;
 line-height: 2;
 width: 50%;
}
#main .lp_about h2 small{
 display: block;
 font-size: 1.5rem;
 margin-top: 10px;
}
#main .lp_event{
 background: #f3f3f3;
 padding: 50px 0;
}
#main .lp_event h2{
 text-align: center;
 line-height: 1;
 font-size: 2.25rem;
}
#main .cpplus{
 text-align: center;
 margin-bottom: 60px;
}
#main .cpplus img{
 width: 50%;
 max-width: 300px;
}
.grp{
 display: flex;
 justify-content: space-between;
}
#main .lp_event .grp{
 max-width: 800px;
 margin: 0 auto 50px auto;
}
#main .lp_event .pic{
 width: 50%;
 text-align: center;
 margin: 0;
 font-weight: bold;
 font-size: 1.125rem;
 line-height: 1;
}
#main .lp_event .pic img{
 width: 100%;
 margin-bottom: 10px;
}
#main .lp_event>p{
 width: 48%;
 margin: 0;
}
#main .lp_project h2{
 line-height: 1;
 font-size: 2.25rem; 
 margin-bottom: 1.5em;
}
#main .lp_project h2 small{
 line-height: 1;
 font-size: 1.5rem;
 margin-top: 10px;
 display: block;
 color: #666;
font-weight: bold;
}
#main .lp_project p{
 margin-bottom: 6.25em;
 line-height: 3;
}
.lp_project .slide{
 width: 50%;
 order: 2;
}
.lp_project .slide ul{
 position: relative;
 overflow: hidden;
 aspect-ratio: 1 / 1;
}
.lp_project .slide li{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.lp_project .txt{
 width: 46%;
 order: 1;
}
@keyframes bg{
 0%{
  background-position: 0% 0%;
 }
 100%{
  background-position: -3150px 0%;
 }
}
.btn_jump{
 line-height: 1;
 border: 1px solid #000;
 padding: 15px 10px;
 text-align: center;
 display: inline-block;
 border-radius: 5px;
 text-decoration: none;
 width: 100%;
 max-width: 280px;
}
.lp_project{
 padding: 50px 0;
}
.lp_member{
 padding: 50px 0;
 background: #f3f3f3;
}
.lp_products{
 padding: 50px 0;
 background: #fff;
}
#main .lp_products h2,
#main .lp_products h2,
#main .lp_member h2{
 line-height: 1;
 font-size: 3.75rem;
 text-align: center;
 margin-bottom: 1em;
}
#main .lp_member_item{
 margin-bottom: 100px;
 display: flex;
}
#main .lp_member_item h3 img{ width: 35px; margin-right: 0;}
#main .lp_member_item .pic{
 width: 32%;
}
#main .lp_member_item .txt{
 width: 62%;
}
#main .lp_member_item .txt_member{
 font-weight: bold;
 line-height: 1;
 font-size: 1.125rem;
}
#main .lp_member_item h3{
 font-weight: bold;
 line-height: 1;
 font-size: 1.875rem;
 margin-bottom: 1em;
}
#main .lp_member_item h3 small{ font-size: 50%;}
#main .lp_member_item h4{ font-size: 1.5rem; margin: 2em 0 0.5em 0;}
#main .lp_member_item p{
 font-size: 0.88rem;
}
#main .lp_member_item strong{
 font-size: 1rem;
}
#main .brand_stroy{
 background: #e8e8e8;
 padding:  30px 60px;
}
#main .brand_stroy h3{
 font-size: 1.5rem;
}
.lp_products .inner{
 max-width: 1100px;
}
.lp_products .pic{
 width: 46%;
}
.lp_products .txt{
 width: 50%;
}
.item_pic{
 width: 100%;
 margin-bottom: 30px;
}
.item_s{
 width: 100%;
 display: grid;
 grid-template-columns: repeat(6, 1fr);  column-gap: 5px; row-gap: 5px;
}
.btn_buy{
 display: block;
 width: 100%;
 max-width: 280px;
 line-height: 1;
 padding: 15px 10px;
 text-align: center;
 text-decoration: none;
 font-weight: bold;
 color: #fff;
 background: #000;
}
.btn_buy:hover,
.btn_buy:focus{ color: #fff; background: #999}
.lp_products_item{
 margin-bottom: 100px;
}
#main .lp_products h3{
 font-size: 1.875rem;
 line-height: 1;
 margin-bottom: 0.5em;
}
#main .lp_products h3 small{
 font-size: 1rem;
}
#main .lp_products h3+p{
 line-height: 1;
 margin-bottom: 2em;
}
#main .lp_products dl{
 margin: 1em 0 0 0;
 width: 49%;
}
#main .lp_products dt{
 font-weight: bold;
 margin-bottom: 0.5em;
}#main .lp_products dd{
 line-height: 2;
}
.mark{ display: none;}
#main .lp_products .brand_stroy h3+p{
 line-height: 2;
}
@media screen and (max-width: 768px) {
 #main .lp_main_image h1 img{
  width: 100px;
 }
 .grp {
 display: block;
 }
 #main .lp_main_image{
  max-height: 640px;
 }
#main .lp_main_image{
 background-image: url("../page_images/csp/main_sp.webp");
}
 #main .lp_main_image h1{
  font-size: 30px;
 }
 #main .lp_about p{
  width: auto;
 }
 #main .lp_event .pic{
  width: auto;
  margin-bottom: 20px;
 }
 .lp_project .slide{ width: auto; margin-bottom: 20px;}
 .lp_project .txt{ width: auto;}
 .lp_products .pic{ width: auto; margin-bottom: 20px;}
 .lp_products .txt{ width: auto;}
 #main .lp_member_item .txt_member{
      font-size: 1rem;
 }
 #main .lp_member_item strong{
  font-size: 0.88rem;
 }
 #main .lp_member_item{
  display: block;
 }
 #main .lp_member_item .pic{
  width: auto;
  display: block;
  text-align: center;
  margin-bottom: 20px;
 }
 #main .lp_member_item .pic img{
  width: 200px;
 }
 #main .lp_member_item .txt{
  width: auto;
 }
 #main .lp_event h2,
 #main .lp_products h2,
 #main .lp_member h2,
 #main .lp_about h2{
  font-size: 2rem;
 }
 #main .lp_member_item h3{
  font-size: 1.5rem;
 }
 #main .lp_member_item h4{ font-size: 1rem;}

 #main .lp_project h2{ font-size: 2rem;}
 #main .lp_products h3,
 #main .lp_project h2 small{
  font-size: 1.125rem;
 }
 #main .brand_stroy {
  padding: 20px;
 }
 #main .lp_products dl{ width: auto}
 .lp_products_item,
 #main .lp_member_item{ margin-bottom: 50px;}
 #main .lp_project p:last-child{ margin-bottom: 0}
 
}
.anime{
 opacity: 0;
 transition: 0.5s opacity;
}
.animeOn{
 opacity: 1;
}