@charset "utf-8";
/*==========================
common
==========================*/

body {
    font-family:'Noto Sans JP',sans-serif;
    font-style: normal;
    color: #2F2F2F;
    background-color: #fff;
    line-height: 1.7;
}
html {
	scroll-behavior: smooth;
}

/*==========================
header
==========================*/
header{
    background: #f6f6ee;
}
.header__topic img {
    width: 100%;
}
/*==========================
section topic
==========================*/

.mainTopics {
    padding: 64px 0 0 0;
    background: #f6f6ee;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 900;
    font-style: normal;
    text-align: center;
}
.mainTopicsInner{
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
}

.mainTopic_logojp{
    font-size: 1.875rem;
}
.w50{
    width: 50%;
    display: flex;
}
.mainTopicsInner .main_carry_photo{

    width: 40%;
}
.mainTopicsInner .txt_c{
    width: 60%;
}
.mainTopicsInner .artist_dis{
    width: 50%;
    font-size: 1.4rem;
    line-height: 2;
    display: flex;
    align-items: center;
}
.mainTopicsInner .artist_dis h3{
    margin-bottom: 40px;
}
.txt_c{
    display: flex;
    align-items: center;
}
.artist_dis ul.fl {
    justify-content: space-between;
    
}
.artist_dis ul.fl li{
    width: 23%;
}
.mainTopics_txt{
    font-size:1.5rem;
   line-height: 1.8;
   font-weight: 600;
   margin-top: 50px;
   padding-bottom: 100px;
}
.section__topic {
    font-family: 'Arial';
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1.3;
    text-align: center;
}

/*==========================
section sas
==========================*/


.sas{
    background: linear-gradient(90deg, #fff 0%, #fff 50%, #f6f6ee 50%, #f6f6ee 100%);
    position: relative;
    z-index: 2;

}
#container{
    position: relative;
}



.sasInner{
    padding: 80px 0;
     max-width: 1280px;
    background: #fff;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.tl_en{
    position: absolute;
    right: 0;
    color: #eee;
    font-size: 11rem;
    line-height: 1;
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    transform-origin: top right;
    transform: rotate(90deg) translatex(100%);
    z-index: -2;
}
.what h2{
    color:#0168b7 ;
    font-size: 2.25rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;

}
.what h3{
    color: #FC0A0A;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 50px;
}
.car{
    margin-right: 20px;
}
.what h3 img{
    margin-left: 15px;
}
.what h3:before{
    /* content: url(../images/car.png);
  vertical-align: middle;
  padding-right: 5px; */

}
.sas_cap{
    font-size: 1.125rem;
    margin-top: 60px;
    line-height: 2.4;
}
.bane{
    border: 2px dotted #f00;
    color: #f00;
    display: inline-block;
    text-align: center;
}
.point dt{
    /* background:yellow; */
    color: #000;
    padding: 0 20px; 

}
.point {
    margin-bottom: 10px;
    /* border: dotted red; */
}
.color_v .gray{
    background: #a0a0a6;
}
.color_v .khaki{
    background: #61654f;
}

.color_v .wh{
    background: #c6c2b2;
}
.color_v .bk{
    background: #000;
}
.color_v .nv{
    background: #393f63;
}
.lineup .color_ver li{
    border: none;

}
.lineup .color_ver ul{
    display: flex;
    text-align: center;
    max-width: 800px;

}
.lineup .color_ver {
    border: #0168B7 2px solid;
    max-width: 900px;
    margin: 50px auto 100px auto;
}

.lineup .color_ver li {
    width: 20%;
    background: #fff;
    padding: 10px;
    margin-bottom: 50px;
    position: relative;
    text-align: center;

    position: relative;
}
.lineup .color_ver h2{
    font-size: 20px;
    font-weight: 400;
    background: #0168B7;
    color: #fff;
    width: 300px;
    margin: 0 auto;
    margin-top: -20px;

}
.lineup .color_ver li img{
    display: block;
    margin: 0 auto;
    max-width: 100px;
}

/*車動き*/
@keyframes goDownAndUp {
    50% {
      top: -5px;
    }
    100% {
      top: 0px;
    }
  }
  
  .goDownAndUp {
    width:  50px;
    height: 50px;
    position: relative;
    left: 0px;
    top: 0px;
  
    animation-name: goDownAndUp;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
  }


.sas_des{
    width: 50%;
    max-width: 800px;
    font-size: 1rem;
    margin-top: 20px;
    font-family:'Noto Sans JP';
    background: #eeeddf;
    padding: 20px;
    margin-left: 20px;
}
.tokkyo{
background: #f00;
color: #fff;
display: inline-block;
padding: 10px 30px;
font-size: 2rem;
letter-spacing: 0.1em;
margin-left: 20px;
}
.tl_bk{

    font-weight: 700;
    font-size:2rem;
    text-align: center;

}

.nayami_inner img{
    max-width: 700px;

}

.nayami_inner{
    text-align: center;
    width: 70%;
    margin: 0 auto;
}


.nayami{
    background: #f5f9fc;
}
.nayami:before{
    content: "";

    background-size: 50%;
    display: block;
    aspect-ratio: 5670 / 234;
    transform: translateY(calc(-100% + 5px)) ;
}
.lineup h2{
    color: #FC0A0A;
    font-size: 5rem;
    text-align: center;
    /* transform: translateY(-83px); */
    font-weight: 800;
}
.lineup h3{

    font-family: "M PLUS 1", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;

}

.lineup li{
    width: 40px;
}
.lineup ul{
    width: 80%;
    max-width: 1280px;
    display: flex;
    margin: 50px auto 0;
    flex-wrap: wrap;
    justify-content: space-between;
}
.lineup li{
    width: 46%;
    background: #fff;
    padding: 10px;
    margin-bottom: 50px;
    position: relative;
    text-align: center;
    border:#0168B7 2px solid;
    position: relative;
}
.line_no{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 3rem;
    font-weight: 600;
    background: #0168b7;
    color: #fff;
    padding: 10px;

}
.lineup h3{
    color: #0168B7;
}
.line_cap{
    color: #000;
}
.point_nayami{
    background: yellow;
    font-weight: 700;
    position: relative;
	padding: .5em;
    width:80%;

}
.point_fini{
    background: #0168b7;
    color: #fff;
    padding: 15px;
}
.point_nayami:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	width: 0;
	height: 0;
	border: 15px solid transparent;
	border-top: 15px solid yellow;
}


.point_fini{

}
.lineup_detatil p{
    width: 50%;
}
.lineup_detatil .line_up_txt p{
    width: 100%;
    text-align: left;
}
.lineup_detatil dl{

    line-height: 1.8;
}
.line_up_txt{
    width: 50%;
}
.lineup_detatil{
    display: flex;
    margin-top: 20px;
}
.lineup dl{
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    text-align: left;

}

.lineup dt{
    float: left;
}
.lineup dd{
    margin-left: 80px;
}
.lineup a{
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #ffffff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
  

}
.product {
    background:#FFF8D9;
}
.product_2 {
    background:#fafaf5;
}
.product .product_inner,.product_2 .product_inner{
    /* width: 80%; */
    margin: 0px auto;
       max-width: 1280px;
       padding: 0 clamp(1.25rem, 0.125rem + 3.75vw, 3.125rem);

}
.product_item{
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    /* width: 80%; */
    margin: 0 auto;

    flex-direction: row;
    max-width: 1280px;
    padding-bottom: 50px;
    justify-content: space-between;
}
.product h2,.product_2 h2{
    font-size: 1.8rem;
    color: #0168B7;
    text-align: center;
    font-weight: 700;
    padding-top: 40px;
}
.product h3,.product_2 h3{
    font-size: 1.6rem;
    padding-top: 40px;
}
.product_catch{
    font-size: 1.2rem;

    text-align: center;
    letter-spacing: 0.1em;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
}
.col3 .tl{
    color: #0168B7;
    font-size: 1.1rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
}
.col3 li{
    list-style:disc outside;
    margin-left: 40px;

}
.col3 li::marker{
    color:#0168b7;
}
.product_item :nth-child(1) { order: 3; }
.product_item :nth-child(2) { order: 1; }
.product_item :nth-child(3) { order: 2; }
.product_item :nth-child(4) { order: 4; }
.product_item :nth-child(5) { order: 5; }
.product_item :nth-child(6) { order: 6; }
.product_item :nth-child(7) { order: 7; }
.product_item :nth-child(8) { order: 8; }
.product_item :nth-child(9) { order: 9; }
.col3{
    width: 30%;
}
.product_item .col3 ul {order: initial;}


.carry_des{
    text-align: center;
    margin-top: 80px;
}
.ue{
    margin-bottom: 50px;
}


.product .product_item h3,.product_2 .product_item h3{
    margin-top: 0px;
    padding-top:0;
    font-size: 1.125rem;
}
.product_2 .product_item h3 span,.product .product_item h3 span{
    background: #0168B7;
    color: #fff;
    padding:2px 8px;
    margin-right: 10px;
}
.product_2 .product_item  p,.product .product_item  p{
    margin-top: 6px;
 
}
.mark{
    display: flex;
    width: 70%;
    max-width: 800px;
    justify-content: space-between;
    margin: 80px auto;
}
.about{
    text-align: center;
}
.about p{
    margin-top: 50px;
    line-height: 1.8;
}
.safety{
    background:#f5f9fd;
    text-align: center;
    margin-top: 100px;
}
.safety h2{
    background: #ea4609;
    font-size:1.5rem ;
    padding: 15px 20px;
    color: #fff;
    display: inline-block;
    transform: translateY(-30px);
    letter-spacing: 0.1em;

}

.mark_wrap{
    display: flex;
    max-width: 1000px;
    width: 80%;
    margin: 60px auto 0px;
    justify-content: space-between  ;
    padding-bottom: 60px;
}
.safety h3{
    font-size: 1rem;
    color: #fff;
    background: #0168B7;
    display: inline-block;
    padding: 5px 15px;
    transform: translateY(-30px);
}
.mark_wrap div.item1,.mark_wrap div.item2{
    padding: 20px;
    border: 1px solid #555;
    background-color: #fff;
}
.item1{
    flex-basis: 25%; 
    
}
.item2{
    flex-basis: 70%;
}
.item2 ul{
    text-align: left;
  
}
.r_box{
    display: flex;
}
.r_box img{
    width: 50%;
}
.r_box li{
    list-style: square;
    margin-left: 3rem;
}
.about_eightex{
    text-align: center;
}
.about_eightex h2{
    width: 330px;
}
/*----------button--------*/
/* ボタンのスタイル */
.buttonIconText02 {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    max-width: 320px;
    height: 50px;
    padding: 8px 64px 8px 8px;
    /* font-family: sans-serif; */
    font-size: 16px;
    color: #fff;
    text-align: center;
    overflow-wrap: anywhere;
    background-color: #0168B7;
    border-radius: 32px;
    margin-top: 20px;
  }
  
  .buttonIconText02__reverse {
    flex-direction: row-reverse;
    padding: 8px 8px 8px 64px;
  }
  
  .buttonIconText02_icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    aspect-ratio: 1;
    overflow: hidden;
  }
  
  .buttonIconText02_text {
    flex-shrink: 1;
    width: 100%;
  }
  .artist{
    background: #FFF8D9;
    padding-bottom: 40px;

  }
  .artist_inner{
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
  }
  .artist_inner h2{
    font-size: 1.8rem;
    color: #000;
    text-align: center;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .artist_inner h3 ,.about_eightex h3{
    font-size: 1.3rem;
    font-weight: 600;
  }
  .fl{
    display: flex;
  }
  .satake_img{
    width: 40%;
  }
  .satake_img ul {
    justify-content: space-between;
  }
  .satake_img ul li{
    width: 22%;
    text-align: center;
   

  }
  .satake_txt{
    width: 60%;
    padding-left: 30px;
  }
.satake_txt p{
    margin-top: 30px;
    font-size: 1rem;
}
.mt60{
    margin-top: 60px;
}
.satake_txt.fl{
    align-items: center;
    display: flex;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 2;
}
.about_eightex{
    max-width: 1000px;
    margin:100px auto;
    text-align: left;
}
.footer{
    background: url(../images/back.png) ;
    height: 100px;
    text-align: center;
    display: flex;
    align-items: center;

}
@keyframes fu {
    from {
        transform:translateY(-50%) scale(0.95,1);
    }
    to {
        transform:translateY(0%) scale(1,0.9);
    }
}

#fu {
    /*変形の基準点を指定*/
    transform-origin:bottom;
    
    animation-name:fu;
    animation-duration:1s;
    animation-timing-function:ease-in;
    animation-direction:alternate;
    animation-iteration-count:infinite;
    width: 120px;
}
.spring{
    position: fixed;
    bottom: 0;
    right:25px;
    z-index: 100;
}
.sbr{
    display: none;
}
  @media (any-hover: hover) {
    .buttonIconText02 {
      transition: background-color 0.2s;
    }
  
    .buttonIconText02_icon {
      transition: transform 0.2s;
    }
  
    .buttonIconText02:hover {
      background-color: #02508d;
    }
  
    .buttonIconText02:hover .buttonIconText02_icon {
      transform: translateX(4px);
    }
  
    .buttonIconText02:hover .buttonIconText02_icon__left {
      transform: translateX(-4px);
    }
  }
  
  /* 左矢印アイコンのスタイル */
  .iconArrowLeft {
    rotate: 180deg;
  }
  /*その他と主な共通部分は省略*/

  a.btn-flat {
    overflow: hidden;
    padding: 10px 50px;
    color: #fff;
    border-radius: 0;
    background:  #FC0A0A;
  }
  
  a.btn-flat span {
    position: relative;
  }

  a.btn-flat:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: translateX(-96%);
    transform: translateX(-96%);
    background: #0168b7;
  }
  
  a.btn-flat:hover:before {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }




  @media screen and (max-width: 768px) {
.bane{
    width: 50%;
    display: block;
    margin: 0 auto 40px auto;
}
  #fu {
    width: 60px;
  }
  .mainTopicsInner{
    display: block;
  }
  .car{
    display: block;
  }
  .w50{
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
  }
  .mainTopicsInner .main_carry_photo{
    width: 30%;
  }
  .mainTopicsInner .txt_c{
    width: 70%;
  }
 .txt_c h2{
    width: 80%;
 } 
 .mainTopic_logojp{
    font-size: 1.2rem;
 }
 .mainTopicsInner .artist_dis{
    width: 90%;
    margin: 0 auto;
 }
 .tl_en{
    font-size: 5rem;
    opacity: 0.3;
 }
 .lineup .color_ver li img {

    max-width: 100%;
 }
 .what h2{
    font-size: 1.3rem;
    text-align: center;
 }
 .what h3{
    font-size: 1.2rem;
    text-align: center;
 }
 .what h3:before {
    display: block;
    text-align: center;
 }
 .nbr{
    display: none;
 }
 .sasInner{
    /* width: 95%;
    margin: 0 auto; */
    width: 100%;
    padding-bottom: 0;
 }
 .tokkyo{
    margin-left: 0;
 }
 .sas_des{
    width: 95%;
    margin: 0 auto;
    width: 100%;
 }
 .sas_cap {
    margin-top: 20px;
 }
 .sas{
    background: #fff;
 }
 .catch{
    line-height: 1.6;
    width: 95%;
    margin: 0 auto;
 }
 /*----------nayami---*/
 .nayami_inner{
    width: 100%;
 }
 .tl_bk{
    font-size: 1.2rem;
 }
 .nayami_inner img{
    max-width: 100%;
 }
  /*----------line up---*/
  .lineup_detatil img{
    width: 80%;
  }
  .lineup_inner{
    display: block;
  }
  .lineup_detatil{
    display: block;
  }
  .lineup_detatil p{
    width: 100%;
  }
  .lineup_detatil dl{
    width: 100%;
    padding-bottom: 40px;
  }
  .line_up_txt{
    width: 100%;
  }
  .lineup ul{
    display: block;
    width: 96%;
    margin: 0 auto;
  }
  .lineup li{
    width: 100%;
  }
  .lineup h3{
    font-size: 1.2rem;
    margin-left: 20%;
  }
  .lineup h3.tl_bk{
    margin-left: 0;
    margin-bottom: 10px;
  }
  .product_catch{
    font-size: 1rem;
    margin-left: 20%;
  }
  .lineup h2{
    font-size: 3rem;
  }
  .product h2, .product_2 h2{
    font-size: 1.4rem;
  }
  .product_catch{
font-size: 1rem;
  }
  .product_inner .product_catch{
    font-size: 1rem;
    margin-left: 0;
    padding-top: 0;
  }
  .sbr{
    display: block;
}
.product .product_inner, .product_2 .product_inner{
    width:100%;
}
.carry_des{
    width: 100%;
    margin-top: 20px;
}
.product_item{
    display: block;
}
.ue,.col3{
    width: 100%;
}
.lineup ul{
    justify-content: center;
}
.col3{
    margin-bottom: 20px;
}
.lineup .color_ver li{
    width: 32%;
    margin-bottom: 5px;
    font-size: 14px;
}
.lineup .color_ver{
    width: 95%;
}
.lineup .color_ver ul{
    margin-top: 30px;  
}
.about h2{
    width: 80%;
    margin: 40px auto 0 auto;
}
.mark {
    width: 90%;
    margin: 20px;
}
.about p{
    width: 90%;
    margin: 0 auto;
    text-align: left;
}
.mark_wrap div.item{
    padding: 20px;
    border: 1px solid #555;
    background-color: #fff;
}
.mark_wrap{
    display: block;
    width: 90%;
}
.mark_wrap div.item1{
    margin-bottom: 30px;
}
.r_box{
    display: block;
}
.artist_inner h2{
    font-size: 1.2rem;
}
.fl{
    display: block;
}
.artist_inner{
    width: 90%;
}
.artist_dis .fl{
    display: flex;
}
.satake_img{
    width: 90%;
    margin: 0 auto;
}
.satake_img{
    width: 100%;
    margin: 0 auto;
}
.satake_txt{
    width: 100%;
    margin: 0 auto;
}
.satake_img ul li {
    font-size: 0.9rem;
}
.satake_txt.fl{

    padding: 0;
    width: 100%;

}
.artist_inner ul.fl{
    display: flex;
    width: 100%;
}
.about_eightex{
    margin-top: 30px;
}
.about_eightex h2{
    width: 80%;
    margin: 20px auto;
}
.txtc{
    text-align: center;
}
.artist_inner h3, .about_eightex h3{
    font-size: 1.1rem;
}
.satake_txt{
    margin: 0 auto;
    padding-left: 0;
    width: 90%;
}
  }