@charset "UTF-8";

html,body{
width:100%;
height:100%;
background:url("../images/bg_paper.png") repeat center top;
background-size: 500px 300px;
}

/*----------------------------------------------------------------------------------------------------------------------laoding----------*/

#loader {
display:none;
position:fixed;
top:50%;
left:50%;
z-index:1030;
margin-left:-16px;
margin-top:-16px;
width:32px;
height:32px;
}

#loader img{
width:100%;
height:auto;
}

#fade {
width:100%;
height:100%;
display:none;
background-color:#fff;
position: absolute;
top:0;
left:0;
z-index:1020;
}


/*----------------------------------------------------------------------------------------------------------------------header----------*/

header{
position:relative;
width:100%;
height:100%;
}

header h1{
position:absolute;
top:45px;
left:60px;
width:144px;
height:39px;
z-index:100;
}

header h1 img, header h2 img,
.btn_online img, .insta img{
width:100%;
height:auto;
}

header h2{
position:absolute;
top:50%;
left:50%;
z-index:100;
width:16%;
height:auto;
margin-top:-10%;
margin-left:-7.5%;

/*margin-top:-150px;
margin-left:-120px;
width:240px;
height:278px;*/
}

.btn_online{
position:fixed;
top:50%;
right:0;
z-index:100;
margin-top:-150px;
width:65px;
height:300px;
}

.insta{
position:absolute;
top:55px;
right:60px;
z-index:100;
width:26px;
height:26px;	
}

header h1 a, header div a{ 
opacity: 1;
transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

header h1 a:hover, header div a:hover{ opacity:0.7; }

header small{
position:absolute;
top:50%;
left:1.5%;
font-size:10px;
letter-spacing:0.1em;
writing-mode: vertical-rl;
margin-top:-150px;
z-index:100;
}

.scroll{
position:absolute;
left:50%;
bottom:180px;
z-index:100;
writing-mode: vertical-lr;
font-size:10px;
letter-spacing:0.2em;
writing-mode: vertical-lr;
}

.page_scroll::before {
content: "";	
background-color:rgba(255,255,255,1);
display: block;
height: 150px;
position: absolute;
bottom: -180px;
left: 9px;
width: 1px;
}

.page_scroll::after {
content: "";
background-color:rgba(0,0,0,0.4);
display: block;
height: 0px;
position: absolute;
bottom: -180px;
left: 9px;
width: 1px;
transition: height 1s ease;
}

.line_anim_start .page_scroll::after {
transform:translate3d(0px, 0px, 0px) scaleY(0);
transform-origin:top left;
height: 150px
}
  
.line_anim_end .page_scroll::after { height: 0px; }

#main_v{ 
position:relative;
width:100%;
height:100%;
color:#fff;
z-index:0;
}

.bx-wrapper, .bx-viewport, .slider, .slider ul{ height:100%; }

.slider li{
position:absolute;	
width:100%;
height:100%;
top:0;
left:0;
}

.slider li:nth-child(1){ background:url("../images/main01.jpg") no-repeat center center; background-size:cover; }
.slider li:nth-child(2){ background:url("../images/main02.jpg") no-repeat center center; background-size:cover; }
.slider li:nth-child(3){ background:url("../images/main03.jpg") no-repeat center center; background-size:cover; }
.slider li:nth-child(4){ background:url("../images/main04.jpg") no-repeat center center; background-size:cover; }

.bx-has-pager{ display:block; }

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

header h1{
top:30px;
left:30px;
width:144px;
height:39px;
}

header h2{
position:absolute;
top:50%;
left:50%;
margin-top:-26%;/*-120px*/
margin-left:-19%;/*-90px*/
width:42%;/*180px*/
height:auto;/*208px*/
}

.btn_online{
margin-top:-140px;
width:55px;
height:254px;
}

.insta{
position:absolute;
top:35px;
right:30px;
width:24px;
height:24px;	
}

.page_scroll::before { height: 100px; }

.line_anim_start .page_scroll::after { height: 100px; }

.slider li:nth-child(3){ background-position: 40% center; }
	
}


/*----------------------------------------------------------------------------------------------------------------------共通----------*/

section h2{
font-weight:bold;
line-height:1.6;
font-feature-settings: "palt";
letter-spacing:0.1em;
}

section h2 span{ color:#ff6600; }

.caution{ font-size:12px; }

.sp_br{ display:none; }

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

.sp_br{ display:inline; }

}

/*----------------------------------------------------------------------------------------------------------------------#message----------*/

#message{ 
margin:120px auto 0;
width:100%;
}

#message h2{ 
font-size:36px;
text-align:center;
}

#message .txt{ 
display:flex;
margin:30px auto 0;
width:83.3%;
}

#message .txt p{ width:50%; }

#message .txt p:first-child{ padding-right:1.5%; }
#message .txt p:last-child{ padding-left:1.5%; }

#message .caution{ 
width:83.3%;
margin:20px auto 0;
}

#message .photo{
margin-top:50px;
width:100%;
display: flex;
justify-content: space-between;
align-items: start;
}

#message p img{
width:100%;
height:auto;
}

#message .photo p:nth-child(1) {
width:58.3%;
margin-top:120px;
left:0;
}

#message .photo p:nth-child(2) {
width:25%;
margin-right:8.33%;
}

#message .komasan{
width:33.3%;
margin:-120px auto 0;
}


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

#message{ margin:70px auto 0; }

#message h2{ 
text-align:left;
margin-left:8.33%;
margin-right:8.33%;
font-size:24px;

}

#message .txt{ 
display:block;
margin:30px 8.33% 0;
letter-spacing:0.05em;
}

#message .txt p{ width:100%; }

#message .txt p:first-child{ padding-right:0; }
#message .txt p:last-child{ padding-left:0; margin-top:20px; }

#message .photo p:nth-child(1) {
width:66.6%;
margin-top:0px;
}

#message .komasan{
width:33.3%;
margin:-80px 8.33% 0 auto;
/*display:none;*/
}

}



/*----------------------------------------------------------------------------------------------------------------------#feature----------*/


#feature{ 
width:83.3%;
margin:180px auto 0;
}

#feature h2{ 
font-size:48px;
text-align:right;
}

#feature .read{ text-align:right; }

.box_feat{
margin-top:120px;
position:relative;
}

.feat_img{
width:50%;
position:absolute;
top:0;
left:0;
z-index:-1;
}

.feat_img img{
width:100%;
height:auto;
}

.box_feat .ico{
width:80px;
position:absolute;
top:-40px;
right:-40px;
}

.feat_txt{
width:55.84%;
padding-top:40px;
padding-left:4.16%;
padding-bottom:30px;
background:url("../images/bg_paper.png") repeat center top;
background-size: 500px 300px;
position:relative;
margin-top:80px;
margin-left:40%;
}

.feat_txt h3{
font-size:20px;
font-weight:bold;
font-feature-settings: "palt";
letter-spacing:0.1em;
padding-bottom:8px;
border-bottom:1px dotted #bbb;
}

.feat_txt h3 span{ color:#ff6600; }

.feat_txt p{ margin-top:20px; }

.feat_txt p span{ color:#ff6600; }

.feat_txt .hosoku{ font-size:13px;}

.box_feat .number{
color:#ff6600;
text-align:right;
padding-top:80px;
}

.box_feat .number::before{
content: "";	
background-color:rgba(255,102,0,1);
display: block;
width: 100px;
height: 1px;
position: absolute;
top:93px;
right:30px;
}

.btn_buy{
margin-top:120px;
width:100%;
text-align:center;
font-size:18px;
font-weight:bold;
}

.btn_buy a {
border:1px solid #333;
display:block; 
padding:46px 0 38px 0;
width:100%;
transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn_buy a:hover  {
border:1px solid #fff;	
/*background-color:#333;*/
background: linear-gradient(to right, #f8307a 33%, #fee433);
color:#fff;
}

@media screen and (max-width:767px){
	
#feature{ margin:70px auto 0; }

#feature h2{ 
font-size:24px;
text-align:right;
}

.box_feat{ margin-top:50px; }

.feat_img{
width:100%;
position:relative;
}

.box_feat .ico{
width:50px;
top:-25px;
right:-25px;
}

.feat_txt{
width:100%;
padding-top:40px;
padding-left:0;
margin-top:0;
margin-left:0;
padding-bottom:0;
}

.feat_txt h3{
font-size:18px;
padding-bottom:5px;
}

.feat_txt p{ margin-top:12px; }

.box_feat .number{
text-align:left;
padding-top:0;
padding-bottom:10px;
}

.box_feat .number::before{
position: absolute;
top:13px;
left:30px;
}

.btn_buy{ margin-top:50px; }

.btn_buy a { padding:30px 0 26px 0; }
	
}


/*----------------------------------------------------------------------------------------------------------------------#large_img----------*/


#large_img{
width:91.66%;
margin-top:150px;
}

#large_img img{
width:100%;
height:auto;
}

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

#large_img{ margin-top:70px; }	
	
}



/*----------------------------------------------------------------------------------------------------------------------#method----------*/


#method{ 
width:83.3%;
margin:150px auto 0;
position:relative;
}

#method h2{ font-size:48px; }

#method .read{ 
position:absolute;
top:5px;
left:27.5%;
}

#method ul{
margin-left:10%;
display:flex;
flex-wrap: wrap;
}

#method li{ 
width:48.5%;
margin-top:40px;
position:relative;
}

#method li:nth-child(even){ margin-left:3%; }

#method li img{
display:block;
width:100%;
height:auto;
}

#method li img:nth-child(1){
width:30px;
height:auto;
position:absolute;
top:0;
left:0;
}

#method li p{ margin-top:20px; }


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

#method .read{ left:32.5%; }

}

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

#method{ margin:70px auto 0; }

#method h2{ font-size:24px; }

#method .read{ 
position:relative;
top:0;
left:0;
margin-top:20px;
}

#method ul{ margin-left:0; }

#method li{ 
width:100%;
margin-top:40px;
}

#method li:nth-child(even){ margin-left:0%; }

}


/*----------------------------------------------------------------------------------------------------------------------#about----------*/


#about{ 
width:83.3%;
margin:-120px auto 0;
}

#about h2{ 
font-size:48px;
color:#fff;
}

#about div {
display:flex;
flex-wrap: wrap;
margin-top:100px;
}

#about div p{ width:48.5%; }

#about div p:nth-child(even){ margin-left:3%; }


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

#about{ margin:-70px auto 0; }

#about h2{ font-size:24px; }

#about div { margin-top:50px; }

#about div p{ width:100%; }

#about div p:nth-child(even){ 
margin-left:0;
margin-top:20px;
}
	
}


/*----------------------------------------------------------------------------------------------------------------------#footer----------*/

footer{
margin-top:200px;
border-top:1px solid #ddd;
text-align:center;
padding-bottom:150px;
position:relative;
}

.back_top{
width:64px;
height:64px;
position:absolute;
top:-32px;
right:6.25%;
}

.back_top img{
width:100%;
height:auto;
}

.back_top a{
opacity: 1;
transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);	
}

.back_top a:hover{ opacity:0.7; }

footer h1 { margin-top:90px; }

footer h1 img{
width:130px;
height:auto;
}

#footer_cont p{ margin-top:40px; }

#footer_cont p:last-child{ margin-top:20px; }

footer p a{ text-decoration:underline; }

footer p a:hover{ text-decoration:none; }

.sp_br{ display:none;}

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

footer{
margin-top:100px;
padding-bottom:180px;
}

.back_top{
width:44px;
height:44px;	
top:380px;
right:50%;
margin-right:-22px;
}

footer h1 { margin-top:70px; }

footer h1 img{ width:100px; }

.sp_br{ display:inline;}

}



/*bgstretcherの動き*/

.slider li {
-webkit-transform: -webkit-scale(1.15);
-ms-transform: -ms-scale(1.15);
transform: scale(1.15);
}

.slider li  {
-webkit-animation: zoom 5s linear;
animation: zoom 10s linear;
}


@-webkit-keyframes zoom {
0% {
-webkit-transform: -webkit-scale(1);
-ms-transform: -ms-scale(1);
transform: scale(1);
}

100% {
-webkit-transform: -webkit-scale(1.14);
-ms-transform: -ms-scale(1.14);
transform: scale(1.14);
}
}


@keyframes zoom {
0% {
-webkit-transform: -webkit-scale(1);
-ms-transform: -ms-scale(1);
transform: scale(1);
}

100% {
-webkit-transform: -webkit-scale(1.14);
-ms-transform: -ms-scale(1.14);
transform: scale(1.14);
}
}

/*ここまで*/