@charset "utf-8";

 @import url("https://use.typekit.net/ixj7dpo.css");

$font1: 'mr-eaves-sans', sans-serif;
$font2: 'goodlife-brush', sans-serif;
$font3:'goodlife-serif', sans-serif;

$red:#e5004f;
$red2:#cc0014;
$pink:#e5004f;

$green1:#22ac38;

$bg_pink:#ffeeef;
$bg_pink2:#fdede2;

/*-------------MIX　IN-------------*/
@mixin giji{
	position: absolute;
	content: "";
}
@mixin flex{
	display: inline-flex;
	display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
	box-sizing: border-box;
}

@mixin stripe_red{
	-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-color: #fce2e2;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, #ff5858), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #ff5858),
            color-stop(.75, #ff5858), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, #ff5858 25%, transparent 25%,
          transparent 50%, #ff5858 50%, #ff5858 75%,
          transparent 75%, transparent);
}

body{
	margin: 0;
	padding: 0;
	letter-spacing: 0.1em;
	line-height: 1.2;
	
}
li{list-style: none;}
.bg{background:#FFE8E8;}
/*-------------PC用-------------*/
@media screen and (min-width:641px) {
	
.wrapper{
    position: relative;
		overflow: hidden;
		text-align: center;
		width: 850px;
		margin: 0 auto 0;
		padding: 0;
    background: #fff;
	}
	
  
/*---------header---------*/	
    header{
        margin: 0 auto;
        position: relative;
        width: 100%;
        text-align: center;
        
        img{width: 850px;}  
    }
   
/*---------read---------*/	    
    .read{
        margin: 40px 0 20px;
        line-height: 1.5;
        font-size: 14px;
    }
    .red{color:$red;
    font-weight: 600;}
    
    .camp{
        margin: 20px 0;
    }
    .end{margin-top: 30px;}
    h1{
        margin: 50px 0 0;
        background: #5C5C5C;
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
        padding: 10px 20px;
        color: #fff;
    } 
    .w450{width: 450px;}
    .w100{width: 100%;}
    
 h2{width: 100%;
     margin-top: 50px;
     font-family: $font1;
    text-align: center;
    display: block;
     font-size: 3rem;
     color: #FB3E41;
        p{margin-top: 0px; font-size: 14px;color: #5E5B5B;}}
    
    .brst{
        @include flex;
        flex-wrap: wrap;
        margin: 20px 0 50px;
        width: 800px;
        justify-content: space-between;
        li{width: 160px;}
    }
 .button {position: relative;
	
	font-family: $font3;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
	padding: 4px 40px 1px 20px;
	font-size: 2rem;
		.small{font-size: 12px;}
}
    .arrow{position: absolute;
        content:"";
        font-size: 1.8rem;
    top:8px;
        right:5px;
    }
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}   
.button {
    margin: 30px 0 0;
    padding: 10px 40px;
    font-size: 1rem;
  background-color:$green1;
  border: 2px solid $green1;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: $green1;
  color: $green1 !important;
}
		
}

/*-------------SP用-------------*/
@media screen and (max-width:640px) {
	
wrapper{
    position: relative;
		overflow: hidden;
		text-align: center;
		width: 100%;
		margin: 0 auto 0;
		padding: 0;
    background: #fff;
	}
	
  
/*---------header---------*/	
    header{
        margin: 0 auto;
        position: relative;
        width: 100%;
        text-align: center;
        
        img{width: 100%;}  
    }
   
/*---------read---------*/	    
    .read{
        width: 100%;
        margin-top: 40px;
        line-height: 1.5;
        font-size: 14px;
        text-align: center;
    }
    .red{color:$red;
    font-weight: 600;}
    
    .camp{
        margin: 40px 0;
        img{width: 100%;}
    }
     .end{margin-top: 30px;
         text-align: center;
    }
    h2{width: 100%;
     margin-top: 50px;
     font-family: $font1;
        text-align: center;
        display: block;
     font-size: 2.5rem;
     color: #FB3E41;
        p{margin-top: 0px; font-size: 14px;color: #5E5B5B;}}
    
    h1{
        text-align: center;
        margin: 0;
        background: #5C5C5C;
        display: inline-block;
        font-size: 16px;
        font-weight: 400;
        padding: 5px 20px;
        color: #fff;
        box-sizing: border-box;
    } 
    .w450{width: 100%;}
    .w100{width: 100%;}
    
    
     .brst{
        @include flex;
        flex-wrap: wrap;
        margin: 20px 1% 30px;
        width: 98%;
        justify-content: center;
        li{width: 32%;}
    }
    
.button {position: relative;
font-family: $font3;
  display: inline-block !important;
  text-align: center;
  text-decoration: none;
  outline: none;
	padding: 4px 40px 1px 20px;
	font-size: 2rem;
    .small{font-size: 12px;}
}
    
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}   
.button {
    margin: 30px 18% 30px;
    padding: 10px 40px;
    font-size: 1rem;
  background-color:$green1;
  border: 2px solid $green1;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: $green1;
  color: $green1 !important;
} 
}