@charset "utf-8";
/* CSS Document */

/*ブラウザクリア*/
ul {
display: block;
list-style-type: disc;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}

p {
display: block;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

h2 {
display: block;
font-size: 0em;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}

body {
display: block;
margin: 0px;
}
/*ブラウザクリア*/

#lp-container{
width:100%;
background: #00506c;
text-align: center;
margin: 0 auto;
font-size:16px;
overflow: hidden;
font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
}

#lp-container a:hover{
opacity: .4;
transition : 1s;
}

#lp-container .main_wrap{
position:relative;
}
#lp-container .main_wrap .logo{
width: 33%;
position: absolute;
left: 3%;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
z-index: 11;
}
#lp-container .main_imgBox{
display: block;
}

#lp-container .main_imgBox img{
width: 100%;
}

#lp-container ._inner{
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
font-size:1em;
padding-top: 60px;
padding-bottom: 100px;
overflow: hidden;
}

#lp-container .main_logo{
width: 100%;
margin: 0px auto;
}


#lp-container .p1{
font-size: 2.3em;
margin: 1em auto;
font-weight: bold;
}
#lp-container .p2{
font-size: 1em;
padding: 30px 0;
font-weight: bold;
line-height: 2.3;
}
#lp-container .p3{
font-size: 1.8em;
margin: 30px auto 0;
font-weight: bold;
}
#lp-container .p4{
font-size: 2.3em;
margin: 0px auto;
font-weight: bold;
}
#lp-container .p5{
font-size: 1em;
padding: 30px 0;
font-weight: normal;
line-height: 2.0;
}
#lp-container .p6{
font-size: 1em;
font-weight: normal;
line-height: 2.0;
font-weight: bold;
}
#lp-container .p7{
font-size: 1em;
font-weight: normal;
line-height: 2.0;
}


#lp-container .flex{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 100px auto;
align-items: flex-start;
}
#lp-container .flex img{
width: 50%;
}
#lp-container .flex .text_area{
width: 45%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
#lp-container .flex .text_area .in{
width: 100%;
text-align: justify;
}
#lp-container .flex .text_area p.ttl{
width: 100%;
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 2rem;
}
#lp-container .flex .text_area p.text{
font-weight: bold;
line-height: 2.5;
}

#lp-container .video_box{
max-width: 100%;
}

#lp-container .video_box .video{
position: relative;
width:100%; 
height:0;
padding-top: 56.25%;
}

#lp-container .video_box .video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


#lp-container .flex_sec{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 150px auto;
}

#lp-container .flex_sec .in_box{
width: 50%;
}

#lp-container .flex_sec .in_box img{
width: 100%;
}

#lp-container .flex_sec .in_box_le{
width: 44%;
text-align: left;
} 
#lp-container .flex_sec .in_box_le .name{
font-size: 1.8rem;
font-weight: bold;
margin:10px 0 40px;
}

#lp-container .flex_sec .in_box_le .item_no{
font-size: .9rem;
font-weight: bold;
margin-bottom: 10px;
}
#lp-container .flex_sec .in_box_le .size{
font-size: .9rem;
font-weight: bold;
margin-bottom: 10px;
}
#lp-container .flex_sec .in_box_le .price{
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 10px;
}
#lp-container .flex_sec .in_box_le .price span.tax{
font-size: .9rem;
margin-bottom: 10px;
}
#lp-container .flex_sec .in_box_le .shop{
font-size: .9rem;
font-weight: bold;
}

#lp-container .buy_btn{
width: 80%;
text-align: center;
float: left;
background: #fff;
color: #000;
font-weight: bold;
text-decoration: none;
font-size: .9rem;
padding: 15px 0;
display: block;
margin: 40px auto 0;
}




#lp-container a.btnA{
font-weight: bold;
width: 70%;
display: block;
margin: 60px auto;
color: #000;
background: #fff;
color: #000;
padding: 25px 0;
text-decoration: none;
font-size: 1rem;
}


/***************
slick-option
***************/
#lp-container button{
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#lp-container .slick-slide{
outline:none;
}
#lp-container .slick-slide:not(.slick-current) {
opacity: .5;
}
#lp-container .slick-slide img{
margin: 0 auto;
display: block;
width: 100%;
}
#lp-container .slick-initialized{
opacity: 1
}
#lp-container .slide-arrow{
position: absolute;
top: 50%;
margin-top: -15px;
}
#lp-container .prev-arrow{
width: 30px;
height: 30px;
margin-top: -5px;
border-top: solid 2px #000;
border-right: solid 2px #000;
transform: rotate(225deg);
position: absolute;
top: 45%;
left: 17px;
z-index: 5;
}
#lp-container .next-arrow{
width: 30px;
height: 30px;
margin-top: -5px;
border-top: solid 2px #000;
border-right: solid 2px #000;
transform: rotate(45deg);
position: absolute;
top: 45%;
right:17px;
z-index: 5;
}
#lp-container .slick-dotted.slick-slider {
margin: 0 auto;
width: auto !important;
}
#lp-container .slick-dots {
position: absolute;
bottom: 5px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%; 
}
#lp-container .slick-dots li {
position: relative;
display: inline-block;
height: 15px; 
width: 15px;
margin: 0 0px;
padding: 0;
cursor: pointer; 
}
#lp-container .slick-dots li button {
border: 0;
background:transparent; 
display: block; 
height: 15px; 
width: 15px; 
outline: none;
line-height: 0px; 
font-size: 0px; 
color: transparent;
padding: 5px;
cursor: pointer; 
}
#lp-container .slick-dots li button:hover, .slick-dots li button:focus {
outline: none;
}
#lp-container .slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1;
}
#lp-container .slick-dots li button:before {
position: absolute;
top: 0;
left: 0; 
content: "•";
width: 15px;
height: 15px;
font-family: inherit;
font-size: 15px;
line-height: 8px;
text-align: center;
color: #ccc;
opacity: 1;
-webkit-font-smoothing:antialiased;
-moz-osx-fontsmoothing:grayscale;
}
#lp-container .slick-dots li
.slick-active button:before {
color: black; 
opacity: 0.75;
}
#lp-container .slick-dots li button:before{
font-family: inherit;
font-size: 15px;
line-height: 8px;
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
content: '●';
text-align: center;
opacity: 1;
color: #ccc;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#lp-container .slick-dots li.slick-active button:before
{
content: '○';
opacity: 1;
color:#ccc;
}
/***************
slick-option
***************/

/******************
fade
******************/
.sa {opacity: 0;transition: all 2s ease;width: 100%;}
.sa.show {opacity: 1;transform: none;}
.sa--lr {transform: translate(-200px, 0);}
.sa--rl {transform: translate(200px, 0);}
.sa--up {transform: translate(0, 100px);}
.sa--down {transform: translate(0, -100px);}
.sa--scaleUp {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL {transform: rotate(180deg);}
.sa--rotateR {transform: rotate(-180deg);}
/******************
fade
******************/

#lp-container .order1{
order: 1;
}
#lp-container .order2{
order: 2;
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


@media screen and (max-width:640px){

#lp-container{
width:100%;
}

#lp-container a:hover{
opacity: .4;
transition : 1s;
}

#lp-container .main_imgBox{
display: block;
}

#lp-container .main_imgBox img{
width: 100%;
}

#lp-container ._inner{
width: 90%;
text-align: center;
margin: 0 auto;
font-size:1em;
padding-top: 30px;
padding-bottom: 100px;
}

#lp-container .main_logo{
width: 100%;
margin: 0px auto;
}


#lp-container .p1{
font-size: 1.4rem;
margin: 30px auto 10px;
font-weight: bold;
}
#lp-container .p2{
font-size: .9rem;
padding: 30px 0;
text-align: justify;
}
#lp-container .p3{
font-size: 1.3em;
margin: 30px auto 0;
font-weight: bold;
}
#lp-container .p4{
font-size: 1.8em;
margin: 0px auto;
font-weight: bold;
}
#lp-container .p5{
font-size: 1em;
padding: 30px 0;
line-height: 1.6;
}
#lp-container .p6{
font-size: .9rem;
font-weight: normal;
line-height: 2.0;
font-weight: bold;
}
#lp-container .p7{
font-size: .9em;
font-weight: normal;
line-height: 2.0;
}

#lp-container .flex{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 100px auto;
}
#lp-container .flex img{
width: 100%;
}
#lp-container .flex .text_area{
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
#lp-container .flex .text_area .in{
width: 100%;
text-align: justify;
}
#lp-container .flex .text_area p.ttl{
width: 100%;
font-size: 1.6rem;
font-weight: bold;
margin-top: 1rem;
margin-bottom: 2rem;
text-align: center;
}
#lp-container .flex .text_area p.text{
font-size: .9rem;
line-height: 2;
}

#lp-container .flex_sec{
display: block;
margin: 100px auto;
}
#lp-container .flex_sec .in_box{
width: 100%;
}

#lp-container .flex_sec .in_box_le{
width: 100%;
margin: 0 auto 50px;
text-align: center;
}
#lp-container .flex_sec .in_box_le .name{
font-size: 1.5rem;
font-weight: bold;
margin:10px 0 20px;
}
#lp-container .flex_sec .in_box_le .size{
font-size: .9rem;
font-weight: bold;
}
#lp-container .flex_sec .in_box_le .price{
font-size: 1.1rem;
font-weight: bold;
}
#lp-container .flex_sec .in_box_le .price span.tax{
font-size: .9rem;
}

#lp-container a.buy_btn{
width: 180px;
background: #fff;
color: #000;
font-weight: bold;
text-decoration: none;
font-size: .9rem;
padding: 15px 0;
display: block;
margin: 20px auto;
float: none;
}



#lp-container a.btnA{
width: 100%;
display: block;
margin: 60px auto;
border: solid 1px #000;
color: #000;
background: #fff;
color: #000;
padding: 25px 0;
text-decoration: none;
font-size: .9rem;
}

#lp-container a.btnB{
width: 90%;
display: block;
margin: 20px auto;
border: solid 1px #000;
color: #000;
padding: 20px 0;
text-decoration: none;
font-size: .9rem;
}

#lp-container .order1{
order: 2;
}
#lp-container .order2{
order: 1;
}


}