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


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

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: 100%;
    background: url("../../image/lp/header_bg.jpg");
    margin: 0 auto;
	overflow: hidden;
    background-size:cover;
    padding-bottom: 50px;
    background-repeat: no-repeat;
    background-position: center center;
}
header ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 10px;
}

header ul li{
    color: #FFFFFF;
}

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

header ul li button{
  border-width: 0px;
  border-color: rgb(5, 0, 1);
  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: 100px;
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 0 5px 0;
    color: #FFFFFF;
}

    #anime01 {
        width: 100%;
        margin: 50px auto 0  auto;
        animation-duration: 0.5s; /* アニメーションの時間 */
  animation-delay: 0.5s; /* アニメーション開始時間 */
  /* animation-iteration-count: infinite; アニメーションの繰り返し回数 */
    }
   #anime01 img{
        width: 95%;
       display: block;
       margin: 0 auto;
    }
/*モーダル*/
/* 開くボタン */
.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: 100%;
}
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: 150px;
    color: #FFFFFF;
}


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

.entry{
    width: 100%;
    height: auto;
    background: url("../../image/lp/entry_bg.jpg");
    margin: 10px auto 0 auto;
    background-size: cover;
	padding: 0 0 10px 0;
}

.entry .title{
    width: 90%;
   padding-top: 10px;
    margin: 0 auto;
}
.entry .title img{
    width: 100%;
}

.entry .title02{
    width: 80%;
   padding-top: 10px;
    margin: 0 auto;
}
.entry .title02 img{
    width: 100%;
}

.entry ul li .entry_ad{
   width: 90%;
    display: block;
    background: #FFFFFF;
    border: solid 2px #e1e1e1;
    padding: 15px 0 15px 0;
    border-radius: 3px;
    margin: 5px auto 5px auto;
    text-indent: 5px;
}

.entry ul li button{
   width: 80%;
    display: block;
    margin: 10px auto 0 auto;
}
.entry ul li button img{
   width: 100%;
}

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

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

.entry .sns{
   width: 100%;
    margin: 10px auto 0 auto;
}

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

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

.entry .sns li a img{
   width: 100%;
}

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

.lp_img{
    width: 100%;
    margin: 0px auto 0 auto;
}

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

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

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

.performance .title{
    width: 60%;
    margin: 0px auto 10px auto;
}

.performance .title img{
    width: 100%;
}

.performance .slider .inner{
    width: 100%;
    display: block;
    color: #222222;
    border: solid #f2cd35 2px;
}

.performance .slider .inner dl dl{

}

.performance .slider .inner dl dt{
    background: #222222;
    color: #FFFFFF;
    padding: 5px;
    position: relative;
    font-size: 12px;
}

.performance .slider .inner dl dt span{
    position: absolute;
    top: -5px;
    right: -15px;
    width: 90px;
}
.performance .slider .inner dl dt span img{
    width: 100%;
}

 .performance .slider .inner dl dd{
    background: #FFFFFF;
    color: #222222;
    padding: 5px;
     font-size: 12px;
}

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

 .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: 3px 0 3px 5px;
     border-radius: 3px;
     margin-right: 5px;
}

 .performance .slider .inner dl dd ul li:nth-child(2){
    padding: 3px 0 0 0;
     font-size: 12px;
}

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

/*=================================
スライダーのための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: 100%;
    margin: 10px auto 0 auto;
    background: url("../../image/lp/entry_bg.jpg");
    padding-bottom: 10px;
    padding-top: 10px;
}

.review .title{
    width: 60%;
    margin: 0px auto 10px auto;
}

.review .title img{
    width: 100%;
}

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

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

.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: 5px;
}

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

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

footer ul{
    width: 100%;
    background: #666666;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 10px 0 10px;
}

footer ul li a{
    display: block;
    text-align: center;
    padding: 5px;
    color: #FFFFFF;
}

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

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

#privacy{
    width: calc(100% - 10px);
    margin: 10px auto 0 auto;
    padding: 0 5px 0 5px
}

#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 3px #333333;
    background: #666666;
    border-radius: 5px;
    padding: 10px;
    margin: 0 auto 5px auto;
    display: block;
}


/*==================================
commerce
===================================*/
#commerce{
   width: calc(100% - 10px);
    margin: 10px auto 0 auto;
    padding: 0 5px 0 5px
}


#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;
}



}