@charset "utf-8";

html { scroll-behavior: smooth;}

body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", serif;
    font-size: medium;
}

header {
	position: fixed;
    background-color: rgba(250, 250, 250, 0.9);
	width: 100%;
	z-index: 2;
	transition: .3s;
}

.visual {
 background-color: #9f9f9f;
 margin-bottom: 60px;
}

.inview.fadeup {
	opacity: 0;
	transition-duration: 1.5s;
	transform: translateY(10px);
}
.inview.fadeup.active {
	opacity: 1;
	transform: translateY(0px);
}

.inview.fadeup2 {
	opacity: 0;
	transition-duration: 1.8s;
	transform: translateY(15px);
}
.inview.fadeup2.active {
	opacity: 1;
	transform: translateY(0px);
}

.kv_top { 
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width:90%;padding:0 5%;
    height:100vh;
    /*background:#333;*/
}

.kv_top h1, h2 {
    margin:0;padding:0;
    mix-blend-mode: difference;
    color:#fff;
}

.kv_top h1 {
    font-family: Oswald;
    font-size:15vw;font-weight:400;
    line-height:150%;margin-bottom:25px;
}

.kv_top h2 {
    font-size:4vw;margin-bottom:25px;
}

.top_section {
    display: flex;
    width: 90%;
    padding: 10% 5%;
    flex-direction: column;
    background-color: #EBEBEB;
    background-image: url(../images/Logo_mark.svg);
    background-repeat: no-repeat;
    background-position: left center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.top_section_outer {
    display:inline-block;
    width: 100%;
    padding: 0;
    background-color: #fff;
}

.top_section h2 {
    font-family: Oswald;
    font-weight:400;
    font-size:10vw;
    margin:0 0 20px 0;padding:0;
}

.top_section h3 {
    font-size:6vw;
    margin:0 0 45px 0;padding:0;
}

.top_section h4 a {
    font-size:4vw;
    color:rgba(195,51,99,1.00);
    text-decoration:none;
    margin:0 0 25px 0;padding:0;
}

.top_section_right p {
    line-height:180%;margin-bottom:45px;
}

.top_section_right ul {
    list-style-type: none;
    margin:0;padding:0;
}

.top_section_right ul li {
    width:90%;padding:5%;margin:0 0 20px 0;
    border-bottom: dotted 1px #333;
    font-size: 4vw;font-weight:600;
}

.top_section_right ul li .st{
    font-size: 7vw;font-weight:700;
}

.top_section_info h4 { font-size:70%;font-weight:500;line-height:180%; }

.header_nav   {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_area {
    /*background-color: rgba(248,248,248,1.00);*/
}

.header_area {
    padding: 20px 3% 20px 3%;
    width: 94%;
}

.logomark_normal {
    max-width: 190px;
}

.footer_area {
    display: flex;
    flex-direction: column;
    justify-content : center;
    position: absolute;
    /* [disabled]bottom: 0px; */
    width: 94%;
    padding: 65px 3% 65px 3%;
    background-color: rgba(240,240,240,1.00);
    float: none;
    clear: both;
}

.footer_logo_area {
    display: flex;
    width: 100%;
    justify-content : center;
    margin-bottom: 60px;
}

.logomark_box   {
    width: 110px;
}

.footer_menu_area {
    display: flex;
    width: 100%;
    max-width: none;
    margin:0 auto;
    flex-wrap: wrap;
    justify-content: space-around;
}

.footer_menu_block {
    display: block;
    flex-basis: 96%;
    margin-bottom: 0;
}

.footer_menu_block a {
    font-size: medium;
    text-decoration: none;
    color: rgba(128,130,133,1.00);
    font-weight: 500;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.main {
    display: inline-block;
    z-index:0;
    width: 100%;height:800px;
    background-color: rgba(240,240,240,1.00);
}

.footer_menu_block ol {
    display:none;
    font-size: small;
    list-style-type: disc;
    color: rgba(128,130,133,1.00);
    margin-left: -10px;
    line-height: 200%;
}

.footer_menu_block ol li a {
    font-size: small;
    color: rgba(128,130,133,1.00);
}

.footer_banner_area {
    display: flex;
    width: 96%;
    /*max-width: none;*/
    flex-wrap: wrap;
    margin:40px 0 20px 0;
    padding: 0 2% 0 2%;
    /*background-color: rgba(152,217,217,1.00);*/
}

.footer_banner_block {
    display: flex;
    flex-basis: 100%;
    margin: 0 0 20px 0;
    background-color: rgba(224,217,217,1.00);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 70%;
}

.footer_banner_block_bg1 {
    background-image: url(../images/common/banner_recruit.jpg);
}

.footer_banner_block_bg2 {
    background-image: url(../images/common/banner_store.jpg);
}

.footer_banner_block_bg3 {
    background-image: url(../images/support/5-dl_top.jpg);
}

.footer_banner_block_bg4 {
    background-image: url(../images/common/banner_inquiry.jpg);
}

.footer_banner_block a {
    display: flex;
    align-items: center;
    width: 94%;
    height: 60px;
    padding: 3% 0% 3% 6%;
    text-decoration: none;
    background-color: rgba(0,0,0,0.50);
    font-size: small;
    font-weight: 500;
    color: rgba(255,255,255,1.00);
    border:solid 0px;
    outline:solid 1px;
    outline-offset: 0px;
}

.footer_menu_block a:hover {
    color: rgba(218,74,123,1);
}

.footer_menu_block .menu_item_top a {
    padding: 5%;
    display: block;
    width: 90%;
    border-bottom: 1px dotted rgba(164,164,164,1.00);
}

.footer_banner_block a {
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
.footer_banner_block a:hover {
    background-color: rgba(255,255,255,0.8);
    color: rgba(218,74,123,1);
    outline-width: solid 1px;
    outline-color: rgba(218,74,123,0.6);
    outline-offset: -10px;
}

.footer_info {
    display: flex;
    width: 100%;
    margin: 0;
    padding:0;
    align-items: center;
    flex-wrap: wrap;
}

.footer_rules_area {
    display: flex;
    width: 90%;
    margin: 0;
}

.footer_rules_area ol {
    list-style-type: none;
    margin: 0;
    line-height: 200%;
    font-size: small;
}

.footer_rules_area ol li a {
    text-decoration: none;
    color: rgba(128,130,133,1.00);
    margin-left: -25px;
    list-style-type: none;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.footer_rules_area ol li a:hover {
    color: rgba(218,74,123,1);
    cursor:pointer;
}

.footer_sns_area {
    display: flex;
    width: 96%;
    margin-bottom: 45px;
    align-items: center;
    font-weight: 500;
    color: rgba(128,130,133,1.00);
}

.footer_sns_area a {
    margin:0 15px 0 0;
    text-decoration: none;
    color: rgba(128,130,133,1.00);
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.sns_icons {
    display: flex;
    align-items: center;
}

.footer_sns_area a:hover {
    color: rgba(218,74,123,1);
}

.footer_copyright_area {
    font-size: small;
    font-family: "Roboto", serif;
    color: rgba(128,130,133,1.00);
    font-weight: 400;
    display: flex;
    justify-content:center;
    padding: 25px 2% 0 2%;
    width: 96%;
    border-top: 1px dotted rgba(128,130,133,1.00);
    margin-top: 45px;
    letter-spacing: 0.5px;
}

.top_section_products {
    display:flex;
    flex-direction:column-reverse;
    background: rgba(255,255,255,1.00);
}

.top_section_products_right {
    flex-basis: 90%;
    padding:10% 5%;
    display:flex;
    flex-direction:column;
    border:solid 0px;
}

.top_section_title_en {
    font-family: Roboto;
    font-weight:500;
    font-size:8vw;
    margin:0;
    color: rgba(38,38,38,1.00);
}

.top_section_title_jp {
    font-size:6vw;
    margin:0 0 20px 0;
    color:rgba(195,51,99,1.00)
}

.producs_features_area {
    display:flex;    flex-direction:column;
    width:100%;padding:10% 0;
    background-color: #EBEBEB;
    justify-content: flex-start;
}

.producs_features_area_over {
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    width:100%;
    max-width:1380px;
    margin:0 auto;
    background-color: #EBEBEB;
}
    
.producs_features_area_over_left {    
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    width:90%;
    border:solid 0px;
    margin:0 auto;
    background-color: #EBEBEB;   
}
    
.producs_features_area_over_right {    
    display:flex;
    flex-direction:column;
    width:90%;
    border:solid 0px;
    margin:0 auto;
    margin-bottom:25px;
    padding:0;
    background-color: #EBEBEB;
    font-size:100%;
    line-height:180%;
}

.producs_features_area_under {
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    width:90%;padding:5%;
    max-width:1380px;
    margin:0 auto;
    background-color: #EBEBEB;
}
    


.producs_features_area_under {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content: space-between;
    width:90%;padding:5%;
    max-width:1380px;
    margin:0 auto;
    background-color: #EBEBEB;
}  

.top_industry_wrap {
    display:flex;width:100%;
    padding:0;margin:0;
    background-color: #EBEBEB;
}

.top_industry {
    display:flex;flex-direction:row;
    width:100%;height:auto;padding:0;margin:0;
    background-color: #FFF;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);  
 }

.top_industry_inner {
    display:flex;flex-direction:column;
    width:96%;max-width:1480px;height:auto;padding:0 2% 100px 2%;margin:0 auto;
    background-color: #FFF;
 }

.industry__slider {
   display:flex;flex-direction:row;flex-wrap:wrap;width:100%;padding:0;margin:0 auto;background-color: #FFF;
 }

 .ins {
    flex-basis:48%;margin:0 1% 25px 1%;
    font-size:80%;
    color:#000; background-color: #FFF;         
}

.fig {
    width:100%;height:auto;margin-bottom:10px;
    aspect-ratio:3/2;overflow: hidden;
 }

.fig img {
    width:100%;aspect-ratio:3/2;
    transition: transform .3s ease;
}

.fig:hover img {
    transform: scale(1.1); /* 拡大 */
    opacity:0.8;
}

.ins a {
    color:#000;
    text-decoration:none;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.ins a:hover {
    color:rgba(195,51,99,1.00);
}

.news_block_over {
    display:flex;flex-direction: column;width:90%;max-width:1380px;
    padding:40px 5% 20px 5%;margin:0 auto;
}

.news_block_over a {
    color:#000;
    text-decoration:none;
}
.news_block_over a:hover {
    color:rgba(195,51,99,1.00);
    text-decoration:none;
}

.news_block_under {
    display:flex;flex-direction: column;width:90%;max-width:1380px;
    padding:20px 5% 20px 5%;margin:0 auto;border:solid 0px;
}

.news_line {
    display:flex;flex-direction: column;width:90%;
    padding:0 5% 20px 5%;margin:0 0 10px 0;
    border-bottom:dotted 1px;
    font-size:90%;
}

.news_date {
    display:flex;width:100%;max-width:150px;
    padding:0 0;justify-content:flex-start;
    font-weight:bold;
    border-bottom:solid 0px;
}

.news_title {
    display:flex;width:100%;padding:0 0;justify-content:flex-start;
}

.news_title a { color:#000;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }

.news_title a:hover { color:rgba(195,51,99,1.00); }

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  background: rgba(218,74,123,1);
  text-decoration: none;
  color: #fff;
  width: 60px;
  padding: 28px 5px;
  text-align: center;
  display: block;
  border-radius: 90px;
  opacity: 0.9;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}

.pankuzu {
    width:100%;
    padding:20px 0 0 0;
    border-top:dotted 1px #333;
}
.pankuzu a {
    color:#333;font-size:90%;
    text-decoration: none;margin:0 20px;
    transition: all .3s ease;
}
.pankuzu a:hover { color:rgba(218,74,123,1); }
.pankuzu a.active {color:rgba(218,74,123,1);}










@media screen and (min-width:500px){
    
.top_section_info h4 { font-size:80%;font-weight:500;line-height:180%; }
    
.top_section_products_left {
    flex-basis:46%;
    padding:0 2%;
    padding-top: 3%;
    padding-bottom:5%;
}

.top_section_products_right {
    flex-basis: 50%;
}

.industry__slider {
   display:flex;flex-direction:row;flex-wrap:wrap;width:90%;padding:0 5% 0 5%;margin:0 auto;background-color: #FFF;
   justify-content:flex-start;
 }

 .ins {
    flex-basis:30%;
    margin:0 1% 20px 1%;
    font-size:90%;
    color:#000; background-color: #FFF;         
}

.news_line {
    display:flex;flex-direction: row;width:100%;
    padding:0 0 20px 0;margin:0 0 10px 0;border-bottom:dotted 1px;
}


.news_date {
    display:flex;width:15%;max-width:150px;padding:0 5%;justify-content: center;font-weight:bold;
    border-right:solid 1px;
}

.news_title {
    display:flex;width:65%;padding:0 5%;justify-content: flex-start;
}

.ins {
    font-size:90%;   
} 

}

@media screen and (min-width:900px){

.header_area {
    /*padding: 2% 2% 2% 2%;*/
    padding: 5% 3% 0px 3%;
    width: 94%;
}
    
.logomark_normal   {
    max-width: 190px;
}

.footer_menu_area {
    justify-content: flex-start;
}

.footer_menu_block { 
    flex-basis: 31%;
    margin-left:1%;
    margin-right:1%;
}

.footer_menu_block ol {
    display:block;
    margin-bottom:60px;
}    

.footer_banner_area {
    width:100%;
    justify-content: space-between;
    margin-top:0px;
    padding: 0;
}

.footer_banner_block {
    flex-basis: 48%;
    margin: 0 0 20px 0;
}

}

@media screen and (min-width:1000px){

.header_area {
    padding: 20px 2% 20px 2%;
    width: 96%;
}

.logomark_normal   {
    max-width: 190px;
}

.header_nav_logo {
    margin: 0;
    padding: 0;
    flex-basis: 24%;
}

.header_nav_menu {
    flex-basis: 76%;
    font-size:small;
}

.footer_menu_area {
    display: flex;
    width: 100%;
    max-width: 1320px;
    margin:0 auto;
    flex-wrap: wrap;
    justify-content: space-around;
}

.footer_menu_block {
    display: block;
    flex-basis: 23%;
    margin-bottom: 40px;
}

.footer_menu_block ol {
    margin-bottom:30px;
}  

.footer_banner_area {
    width:100%;
    max-width: 1320px;
    margin:0 auto;
}

.footer_banner_block {
    flex-basis: 24%;
    margin:0;
    height:120px;
}

.footer_banner_block a {
    height:120px;
    padding: 0 0 0 6%;
}

.footer_info {
    max-width: 1320px;
    margin:25px auto;
}

.footer_rules_area ol {
    display:flex;
    width:100%;
    margin: 0 0 0 -10px;
    justify-content: flex-start;
}

.footer_rules_area ol li {
    display:flex;
    justify-content: flex-start;
    margin-right:50px;
}

.footer_copyright_area {
    font-size: middle;
    width: 96%;
}

.kv_top {
    display:flex;
    flex-direction: column;
    justify-content:flex-end;
    align-items: flex-start;
    width:90%;padding:0 5%;
    aspect-ratio: 16 / 9;
    /*background:#333;*/
    z-index:-1000;
}

.kv_top h1, h2 {
    margin:0;padding:0;
    mix-blend-mode: difference;
    color:#fff;

}

.kv_top h1 {
    font-family: Oswald;
    font-size:10vw;font-weight:400;
    line-height:120%;margin-bottom:25px;
}

.kv_top h2 {
    font-size:3vw;margin-bottom:25px;
}

.top_section {
    display: flex;
    width: 90%;
    padding: 10% 5%;
    flex-direction: row;
    justify-content: space-around;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

.top_section_outer {
    display:inline-block;
    width: 100%;
    padding: 0;
    background-color: #fff;
}

.top_section_right, .top_section_left {
    flex-basis:44%;    
}
    
.top_section h2 {
    font-size:6vw;
    margin:0 0 20px 0;padding:0;
background: linear-gradient(45deg, rgba(33,33,33,1) 0%, rgba(191,191,191,1) 41%, rgba(122,122,122,1) 87%); /* 背景色にグラデーションを指定 */
  -webkit-background-clip: text; /* テキストで切り抜く */
  -webkit-text-fill-color: transparent; /* 切り抜いた部分は背景を表示 */
}

.top_section h3 {
    font-size:3vw;
background: linear-gradient(175deg, rgba(57,57,57,1) 0%, rgba(106,106,106,1) 41%, rgba(122,122,122,1) 87%); /* 背景色にグラデーションを指定 */
  -webkit-background-clip: text; /* テキストで切り抜く */
  -webkit-text-fill-color: transparent; /* 切り抜いた部分は背景を表示 */
}

.top_section_info h4 {
    font-size:90%;line-height:180%;
}     

.top_section h4 a {
    font-size:1.5vw;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}    

.top_section h4 a:hover {
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}        

.top_section_right p {
    line-height:180%;margin-bottom:45px;
}

.top_section_right ul li {
    width:94%;padding:3%;margin:0 0 20px 0;
    border-bottom: dotted 1px #333;
    font-size: 1vw;font-weight:600;
}

.top_section_right ul li .st{
    font-size: 2vw;font-weight:700;
}

.top_section_products_outer {
    display:inline-block;
    width:100%;padding:0;margin:0;
    background-color: #EBEBEB;
}

.top_section_products {
    display:flex;flex-direction:row;
    width:100%;padding:0 0;margin:0;
    background-color: #FFF;

}

.top_section_products_left {
    display:flex;
    flex-basis:56%;
    padding:0 2%;
    padding-top: 3%;
    padding-bottom:3%;
    border:solid 0px;
}

.slide_container {
    display:block;float:left;
    width:100%;
    /*aspect-ratio:16/9;*/
    margin:0;padding:0;
    position:relative;  
}

.top_section_products_right {
    flex-basis: 40%;
    display:flex;
    flex-direction:column;
    padding:0 0;
    border:solid 0px;
}

.top_section_title_en {
    font-family: Roboto;
    font-weight:500;
    font-size:4vw;
    margin:0;
    color: rgba(38,38,38,1.00);
}

.top_section_title_jp {
    font-size:2vw;
    margin:0 0 20px 0;
    color:rgba(195,51,99,1.00)
}
    
.producs_features_area {
    display:flex;
    width:100%;padding:5% 0;
    background-color: #EBEBEB;
    justify-content: center;
}
    
.producs_features_area_over {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    width:100%;
    max-width:1380px;
    margin:0 auto;
    background-color: #EBEBEB;
}
    
.producs_features_area_over_left {    
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    width:45%;padding:0 0 0 5%;
    border:solid 0px;
    margin:0 auto;
    background-color: #EBEBEB;   
}
    
.producs_features_area_over_right {    
    display:flex;
    flex-direction:column;
    width:45%;
    border:solid 0px;
    margin:0 auto;
    padding:0 5% 0 0;
    background-color: #EBEBEB;
    font-size:100%;
    line-height:150%;
}

.producs_features_area_under {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content: space-between;
    width:90%;padding:5%;
    max-width:1300px;
    margin:0 auto;
    background-color: #EBEBEB;
}   

.industry__slider {
   width:100%;padding:0;
 }

 .ins {
    flex-basis:25%;
    margin:0;
    color:#000;
    background-color: #FFF;         
}

.ins a {
    font-size:120%;
}


    
} /* メディアクエリ（min-1000px)閉じタグ */