@charset "UTF-8";
/* CSS Document */
@media screen and (min-width: 769px){

/*=========セッティング===============*/

a img {
    border-style:none;
    text-decoration: none;
}

a {
    text-decoration: none;
}

p,img {
    margin: 0;
    padding: 0;
}



ul,li,dl,dt,dd{
    margin: 0;
    padding: 0;
    list-style: none;
}

button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

html,body {
  -webkit-text-size-adjust: none;
scroll-behavior: smooth;
}

html {
	height: 100%;
	font-size: 14PX;
    line-height: 1.5rem;
	scroll-behavior: smooth;
}
body {
	height: 100%;
	color: #FFFFFF;
	-webkit-text-size-adjust : 100%;
	font-family: 'Noto Sans JP', sans-serif;
	background: #222222;

}

/*========= ヘッダー ===============*/



header{
    width: 1200px;
    height: 700px;
    background: url("../../image/lp/header_bg.jpg");
    margin: 0 auto;
}
header ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 20px;
}

header ul li{
    color: #FFFFFF;
}

header ul li h1 img{
    display: block;
    width: 270px;
    height: 55px;
    color: #FFFFFF;
}

header ul li button{
  border-width: 0px;
  border-color: rgb(5, 0, 1);
  border-style: solid;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(67, 132, 0);
  border-radius: 5px;
  background-image: -moz-linear-gradient( 90deg, rgb(87,175,1) 0%, rgb(147,209,0) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(87,175,1) 0%, rgb(147,209,0) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(87,175,1) 0%, rgb(147,209,0) 100%);
  box-shadow: -0.035px 2px 0px 0px rgba(14, 15, 15, 0.16),inset 0px 2px 0px 0px rgba(255, 255, 255, 0.38);
  width: 228px;
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    padding: 15px 0 15px 0;
    color: #FFFFFF;
}

    #anime01 {
        width: 1034px;
        height: 338px;
        margin: 150px auto 0  auto;
        animation-duration: 0.5s; /* アニメーションの時間 */
  animation-delay: 0.5s; /* アニメーション開始時間 */
  /* animation-iteration-count: infinite; アニメーションの繰り返し回数 */
    }


/*モーダル*/
/* 開くボタン */
.button-open {
  display: block;
  cursor: pointer;
}
/* モーダルウィンドウ */
.modal-window {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 255px;
  background-color: #ffffff;
  border-radius: 5px;
  z-index: 1001;
  padding: 10px;
color: #222222;
}

.modal-window .title{
    width: 100%;
    padding: 5px 0 5px 0;
    background: #222222;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 10px;
    font-weight: bold;
}

.modal-window .list{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 5px;
}

.modal-window .list li:nth-child(1){
    display: inline;
    padding: 2px 10px 3px 10px;
    background: #222222;
    color: #FFFFFF;
    border-radius: 5px;
}

.modal-window .list li:nth-child(2){
    font-weight: bold;
    padding: 2px;
    font-size: 1em;
}

.modal-window .btn{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    border-bottom:none;
    padding-bottom: 5px;
    margin-top: 15px;
}

.modal-window .btn button{
    display: block;
    width: 100%;
    margin-right: 5px;
    background: #FFE235;
    text-align: center;
    padding: 8px 0 8px 0;
    color: #222222;
    font-weight: bold;
    border-radius: 100px;
}


/* 閉じるボタン */
.button-close {
  position: absolute;
  top: -20px;
  right: -20px;
    color: #FFFFFF;
    font-size: 2em;
  cursor: pointer;
}
/* オーバーレイ */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 1000;
}
/* 表示領域外へはスクロールさせない */
.no_scroll {
  overflow: hidden;
}

.login_id,.login_pass{
   width: 100%;
    display: block;
    background: #f0f0f0;
    border: solid 2px #e1e1e1;
    padding: 10px 0 10px 0;
    border-radius: 3px;
    margin: 5px 0 5px 0;
    text-indent: 5px;
}

header02{
    width: 1200px;
    height: 100px;
    background:#ffffff;
    margin: 0 auto;
}
header02 ul{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 10px;
}

header02 ul li{
    color: #FFFFFF;
}

header02 ul li h1 img{
    display: block;
    width: 270px;
    height: 55px;
    color: #FFFFFF;
}


/*==================================
entry
===================================*/

.entry{
    width: 1200px;
    height: auto;
    background: url("../../image/lp/entry_bg.jpg");
    margin: 10px auto 0 auto;
	padding-bottom: 20px;
}

.entry .title{
    width: 1128px;
   padding-top: 30px;
    margin: 0 auto;
}

.entry .title02{
    width: 834px;
   padding-top: 30px;
    margin: 0 auto;
}

.entry ul li .entry_ad{
   width: 1100px;
    height: 80px;
    display: block;
    background: #FFFFFF;
    border: solid 2px #e1e1e1;
    padding: 10px 0 10px 0;
    border-radius: 3px;
    margin: 5px auto 5px auto;
    text-indent: 5px;
    font-size: 18px;
}

.entry ul li button{
   width: 640px;
    height: 140px;
    display: block;
    margin: 20px auto 0 auto;
}

.entry ul li button:hover{
  opacity: 0.9;
}

.entry .entry_text{
   width: 1100px;
    padding: 20px;
    border: solid 5px #555555;
    background: #222222;
    display: block;
    margin: 20px auto 0 auto;
     border-radius: 3px;
}

.entry .sns{
   width: 1100px;
    margin: 20px auto 0 auto;
}

.entry .sns li{
   display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.entry .sns li a{
   width: 340px;
    display: block;
    margin-right: 10px;
}

.entry .sns li a:hover{
   opacity: 0.9;
}

/*==================================
lp_img
===================================*/

.lp_img{
    width: 1200px;
    margin: 0px auto 0 auto;
}

.lp_img img{
    width: 100%;
    margin: 10px auto 0 auto;
    display: block;
}

/*==================================
performance
===================================*/

.performance{
    width: 1200px;
    margin: 10px auto 0 auto;
    background: url("../../image/lp_20220226/entry_bg.jpg");
    padding-bottom: 10px;
    padding-top: 30px;
}

.performance .title{
    width: 498px;
    margin: 0px auto 20px auto;
}

.performance .slider .inner{
    width: 380px;
    display: block;
    color: #222222;
    border: solid #f2cd35 5px;
}

.performance .slider .inner dl dl{

}

.performance .slider .inner dl dt{
    background: #222222;
    color: #FFFFFF;
    padding: 15px;
    position: relative;
}

.performance .slider .inner dl dt span{
    position: absolute;
    top: -5px;
    right: -15px;
}

 .performance .slider .inner dl dd{
    background: #FFFFFF;
    color: #222222;
    padding: 15px;
}

 .performance .slider .inner dl dd ul{
    display: flex;
     flex-wrap: nowrap;
     margin-bottom: 10px;
}

 .performance .slider .inner dl dd ul:nth-child(3){
     margin-bottom: 0px;
}
 .performance .slider .inner dl dd ul:nth-child(2) li:nth-child(1){
     margin-bottom: 0px;
     background: #e24439;
     color: #FFFFFF
}

 .performance .slider .inner dl dd ul li:nth-child(1){
    width: 80px;
     background: #f2cd35;
     padding: 5px 0 5px 10px;
     font-weight: bold;
     border-radius: 3px;
     margin-right: 5px;
}

 .performance .slider .inner dl dd ul li:nth-child(2){
    padding: 5px 0 0 0;
     font-weight: bold;
}

 .performance .slider .inner dl dd ul:nth-child(2) li:nth-child(2){
     color: #e24439;
     font-size: 21px;
}

/*=================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:0 auto;
}
/*
.slider li {
    width:390px;/*スライダー内の画像を横幅100%に
    height:auto;
}
*/
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================
review
===================================*/

.review{
    width: 1200px;
    margin: 10px auto 0 auto;
    background: url("../../image/lp_20220226/entry_bg.jpg");
    padding-bottom: 10px;
    padding-top: 30px;
}

.review .title{
    width: 498px;
    margin: 0px auto 20px auto;
}

.review .inner{
    width: 1100px;
    border: solid 5px #e1e1e1;
    background: #222222;
    border-radius: 5px;
    padding: 20px;
    margin: 0 auto 10px auto;
    display: flex;
    flex-wrap: nowrap;
}

.review .inner p img{
    width: 100px;
    display: block;
    margin-right: 10px;
}

.review .inner ul{
    width: 100%;
    display: block;
}

.review .inner ul li:nth-child(1){
    width: 100%;
    background: #e1e1e1;
    padding: 5px 0 5px 10px;
    color: #222222;
    border-radius: 5px;
    margin-bottom: 10px;
}

/*==================================
footer
===================================*/

footer{
    width: 100%;
    margin: 10px auto 0 auto;
    background: #333333;
    padding-bottom: 5px;
}

footer ul{
    width: 1200px;
    background: #666666;
    display: flex;
    flex-wrap: nowrap;
    margin: 0 auto;
}

footer ul li a{
    width: calc(1200px / 4);
    display: block;
    border-right: 1px solid #444444;
    text-align: center;
    padding: 15px 0 15px 0;
    color: #FFFFFF;
}

footer ul li a:hover{
    opacity: 0.7;
}

footer p{
    width: 100%;
    text-align: center;
    margin: 5px 0 5px 0;
}


/*==================================
privacy
===================================*/

#privacy{
    width: 1200px;
    margin: 10px auto 0 auto;
    padding-bottom: 10px;
    padding-top: 30px;
}

#privacy .title{
	display: block;
    width: 100%;
	font-weight: bold;
	text-align: center;
	background: #FFFFFF;
	padding: 10px 0 10px 0;
	color: #000000;
	border-radius: 100px;
    margin: 0px auto 10px auto;
}

#privacy .inner{
    width: 100%;
    display: block;
}

#privacy .inner ul{
    width: 100%;
    border: solid 5px #333333;
    background: #666666;
    border-radius: 5px;
    padding: 20px;
    margin: 0 auto 10px auto;
    display: block;
}


/*==================================
commerce
===================================*/
#commerce{
   width: 1200px;
    margin: 10px auto 0 auto;
    padding-bottom: 10px;
    padding-top: 30px;
}


#commerce .title{
	display: block;
    width: 100%;
	font-weight: bold;
	text-align: center;
	background: #FFFFFF;
	padding: 10px 0 10px 0;
	color: #000000;
	border-radius: 100px;
    margin: 0px auto 10px auto;
}

#commerce .inner{
    width: 100%;
    display: block;
}

#commerce ul{
    width: 100%;
   background: #FFFFFF;
    padding: 0;
    color: #222222;
    border: solid 1px #e1e1e1;
    display: flex;
}


#commerce ul li{
    padding: 5px 0 5px 10px;
}


#commerce ul .c_title{
    width: 30%;
    color: #000000;
    background: #f0f0f0;
}
#commerce ul li:nth-child(2){
    width: 70%;
    color: #222222;
    background: #FFFFFF;
}




}