@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Charmonman&family=Jost:wght@500&display=swap');

$font1:'Charmonman', cursive;
$font2:'Jost', sans-serif;
$red:#e5004f;
$red2:#cc0014;
$pink:#ff8c9a;
$purple:#af80ba;
$orange:#ff820d;
$blue:#0a85ff;
$green:#0cad3f;
$yellow:#fbb900;
$brown:#a3560f;
$gold:#ab9641;
$gray:#999791;
$black:#000;
$white:#cfceca;


$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{
	opacity:0.7;
	-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-color: #fff;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, $red), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, $red),
            color-stop(.75, $red), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
}

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


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

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

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

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

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

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

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

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

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


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

body{
	margin: 0;
	padding: 0;
	background: url("../img/05color_bg.gif");
	/*background:#e5d0b3;*/
	
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-align: center;
	
}
li{list-style: none;}

.red p,span a{color: $red !important;}
.pink p,span a{color: $pink;}
.purple p,span a{color:$purple;}
.orange p,span a{color:$orange;}
.blue p,span a{color:$blue;}
.green p,span a{color:$green;}
.yellow p,span a{color:$yellow;}
.brown p,span a{color:$brown;}
.gold p,span a{color:$gold;}
.gray p,span a{color:$gray;}
.black p,span a{color:$black;}
.white p,span a{color:$white;}

.red {color: $red;}
.pink {color: $pink;}
.purple {color:$purple;}
.orange {color:$orange;}
.blue {color:$blue;}
.green {color:$green;}
.yellow {color:$yellow;}
.brown {color:$brown;}
.gold {color:$gold;}
.gray {color:$gray;}
.black {color:$black;}
.white {color:$white;}


/*-------------PC用-------------*/
@media screen and (min-width:641px) {
	
	header{margin: 0 auto;}
	
	
	.wrapper{width: 1200px;
		background: #fff;
	margin: 0 auto;}
	
	.read{background: #fff;
	padding: 50px 0;
	box-shadow:0px 0px 6px 3px #fcd8f0;}

	
	h1{
		margin: 0 auto;
		color: #ff4e62;
		font-size: 16px;
	display: inline-block;}

	nav{@include flex;
		width: 1100px;
		justify-content: space-between;
		flex-wrap: wrap;
		p{font-size: 1.5rem;
			margin: -5px 0 0;
			font-family: $font2;
			}
		span{
				font-size: 11px;}
		li{margin: 25px 0 0;}}
		
	section{margin: 50px auto;
	padding: 30px 0;
	box-shadow:0px 0px 6px 3px #d6d6d6;}
	
	h2{p{font-size: 12px;
		margin-bottom: -5px;}
		margin: 20px auto;
		font-size: 3rem;
		letter-spacing: 0.1em;
	font-family: $font2;
		width: 1100px;
	}
	
	.red_line{border-bottom: 1px solid $red;}
	.pink_line{border-bottom: 1px solid $pink;}
	.purple_line{border-bottom: 1px solid $purple;}
	.orange_line{border-bottom: 1px solid $orange;}
	.blue_line{border-bottom: 1px solid $blue;}
	.green_line{border-bottom: 1px solid $green;}
	.yellow_line{border-bottom: 1px solid $yellow;}
	.brown_line{border-bottom: 1px solid $brown;}
	.gold_line{border-bottom: 1px solid $gold;}
	.gray_line{border-bottom: 1px solid $gray;}
	.black_line{border-bottom: 1px solid $black;}
	.white_line{border-bottom: 1px solid $white;}
	
	#red{position: relative;
	margin: 100px auto;
	color: $red;
	}
	#red:after{@include giji;
		@include stripe_red;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#red:before{@include giji;
		@include stripe_red;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#pink{position: relative;
	margin: 100px auto;
	color: $pink;
	}
	#pink:after{@include giji;
		@include stripe_pink;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
		
	}
	#pink:before{@include giji;
		@include stripe_pink;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#purple{position: relative;
	margin: 100px auto;
	color: $purple;
	}
	#purple:after{@include giji;
		@include stripe_purple;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
		
	}
	#purple:before{@include giji;
		@include stripe_purple;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#orange{position: relative;
	margin: 100px auto;
	color: $orange;
	}
	#orange:after{@include giji;
		@include stripe_orange;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
		
	}
	#orange:before{@include giji;
		@include stripe_orange;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#blue{position: relative;
	margin: 100px auto;
	color: $blue;
	}
	#blue:after{@include giji;
		@include stripe_blue;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
		
	}
	#blue:before{@include giji;
		@include stripe_blue;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#green{position: relative;
	margin: 100px auto;
	color: $green;
	}
	#green:after{@include giji;
		@include stripe_green;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#green:before{@include giji;
		@include stripe_green;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#yellow{position: relative;
	margin: 100px auto;
	color: $yellow;
	}
	#yellow:after{@include giji;
		@include stripe_yellow;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#yellow:before{@include giji;
		@include stripe_yellow;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#brown{position: relative;
	margin: 100px auto;
	color: $brown;
	}
	#brown:after{@include giji;
		@include stripe_brown;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#brown:before{@include giji;
		@include stripe_brown;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#gold{position: relative;
	margin: 100px auto;
	color: $gold;
	}
	#gold:after{@include giji;
		@include stripe_gold;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#gold:before{@include giji;
		@include stripe_gold;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	
	#gray{position: relative;
	margin: 100px auto;
	color: $gray;
	}
	#gray:after{@include giji;
		@include stripe_gray;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#gray:before{@include giji;
		@include stripe_gray;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#black{position: relative;
	margin: 100px auto;
	color: $black;
	}
	#black:after{@include giji;
		@include stripe_black;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#black:before{@include giji;
		@include stripe_black;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#white{position: relative;
	margin: 100px auto;
	color: $white;
	}
	#white:after{@include giji;
		@include stripe_white;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#white:before{@include giji;
		@include stripe_white;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	h3{
		font-size: 14px;
		color:#656565;
		letter-spacing: 0.2em;
		line-height: 1.3;
	}
	
	/*----ボタン----*/
.button {
	margin:50px 0 30px;
	font-family: $font1;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
	padding: 10px 20px;
	font-size: 1.5rem;
		.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;
}

.b_red {
  background-color:$red;
  border: 2px solid $red;
  color: #fff !important;
}
.b_red:hover {
  background-color: #fff;
  border-color: $red;
  color: $red !important;
}
	
	.b_pink {
  background-color:$pink;
  border: 2px solid $pink;
  color: #fff !important;
}
.b_pink:hover {
  background-color: #fff;
  border-color: $pink;
  color: $pink !important;
}
	
.b_purple {
  background-color:$purple;
  border: 2px solid $purple;
  color: #fff !important;
}
.b_purple:hover {
  background-color: #fff;
  border-color: $purple;
  color: $purple !important;
}
	
.b_orange {
  background-color:$orange;
  border: 2px solid $orange;
  color: #fff !important;
}
.b_orange:hover {
  background-color: #fff;
  border-color: $orange;
  color: $orange !important;
}
	
.b_blue {
  background-color:$blue;
  border: 2px solid $blue;
  color: #fff !important;
}
.b_blue:hover {
  background-color: #fff;
  border-color: $blue;
  color: $blue !important;
}
	
.b_green {
  background-color:$green;
  border: 2px solid $green;
  color: #fff !important;
}
.b_green:hover {
  background-color: #fff;
  border-color: $green;
  color: $green !important;
}
	
.b_yellow {
  background-color:$yellow;
  border: 2px solid $yellow;
  color: #fff !important;
}
.b_yellow:hover {
  background-color: #fff;
  border-color: $yellow;
  color: $yellow !important;
}
	
.b_brown {
  background-color:$brown;
  border: 2px solid $brown;
  color: #fff !important;
}
.b_brown:hover {
  background-color: #fff;
  border-color: $brown;
  color: $brown !important;
}
	
.b_gold {
  background-color:$gold;
  border: 2px solid $gold;
  color: #fff !important;
}
.b_gold:hover {
  background-color: #fff;
  border-color: $gold;
  color: $gold !important;
}

.b_gray {
  background-color:$gray;
  border: 2px solid $gray;
  color: #fff !important;
}
.b_gray:hover {
  background-color: #fff;
  border-color: $gray;
  color: $gray !important;
}

.b_black {
  background-color:$black;
  border: 2px solid $black;
  color: #fff !important;
}
.b_black:hover {
  background-color: #fff;
  border-color: $black;
  color: $black !important;
}
	
.b_white {
  background-color:$white;
  border: 2px solid $white;
  color: #fff !important;
}
.b_white:hover {
  background-color: #fff;
  border-color: $white;
  color: $white !important;
}
}

/*-------------SP用-------------*/
@media screen and (max-width:640px) {
	
	header{margin: 0 auto;}
	
	
	.wrapper{width: 95%;
		background: #fff;
	margin: 0 auto;}
	
	.read{background: #fff;
	padding: 30px 0;
	box-shadow:0px 0px 6px 3px #fcd8f0;}

	
	h1{
		margin: 0 auto;
		color: #ff4e62;
		font-size: 16px;
		display: inline-block;}

	nav{@include flex;
		width: 95%;
		justify-content: space-between;
		flex-wrap: wrap;
		p{font-size: 1.5rem;
			margin: -5px 0 0;
			font-family: $font2;
			}
		span{
				font-size: 11px;}
		li{margin: 25px 0 0;
		width: 32%;}}
		
	section{margin: 50px auto;
	padding: 30px 0;
	box-shadow:0px 0px 6px 3px #d6d6d6;}
	
	h2{p{font-size: 12px;
		margin-bottom: -5px;}
		margin: 20px auto;
		font-size: 3rem;
		letter-spacing: 0.1em;
	font-family: $font2;
		width: 90%;
	}
	
	.red_line{border-bottom: 1px solid $red;}
	.pink_line{border-bottom: 1px solid $pink;}
	.purple_line{border-bottom: 1px solid $purple;}
	.orange_line{border-bottom: 1px solid $orange;}
	.blue_line{border-bottom: 1px solid $blue;}
	.green_line{border-bottom: 1px solid $green;}
	.yellow_line{border-bottom: 1px solid $yellow;}
	.brown_line{border-bottom: 1px solid $brown;}
	.gold_line{border-bottom: 1px solid $gold;}
	.gray_line{border-bottom: 1px solid $gray;}
	.black_line{border-bottom: 1px solid $black;}
	.white_line{border-bottom: 1px solid $white;}
	
	#red{position: relative;
	margin: 100px auto;
	color: $red;
	}
	#red:after{@include giji;
		@include stripe_red;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#red:before{@include giji;
		@include stripe_red;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#pink{position: relative;
	margin: 100px auto;
	color: $pink;
	}
	#pink:after{@include giji;
		@include stripe_pink;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
		
	}
	#pink:before{@include giji;
		@include stripe_pink;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#purple{position: relative;
	margin: 100px auto;
	color: $purple;
	}
	#purple:after{@include giji;
		@include stripe_purple;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
		
	}
	#purple:before{@include giji;
		@include stripe_purple;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#orange{position: relative;
	margin: 100px auto;
	color: $orange;
	}
	#orange:after{@include giji;
		@include stripe_orange;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
		
	}
	#orange:before{@include giji;
		@include stripe_orange;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#blue{position: relative;
	margin: 100px auto;
	color: $blue;
	}
	#blue:after{@include giji;
		@include stripe_blue;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
		
	}
	#blue:before{@include giji;
		@include stripe_blue;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#green{position: relative;
	margin: 100px auto;
	color: $green;
	}
	#green:after{@include giji;
		@include stripe_green;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#green:before{@include giji;
		@include stripe_green;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#yellow{position: relative;
	margin: 100px auto;
	color: $yellow;
	}
	#yellow:after{@include giji;
		@include stripe_yellow;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#yellow:before{@include giji;
		@include stripe_yellow;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#brown{position: relative;
	margin: 100px auto;
	color: $brown;
	}
	#brown:after{@include giji;
		@include stripe_brown;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#brown:before{@include giji;
		@include stripe_brown;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#gold{position: relative;
	margin: 100px auto;
	color: $gold;
	}
	#gold:after{@include giji;
		@include stripe_gold;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#gold:before{@include giji;
		@include stripe_gold;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	
	#gray{position: relative;
	margin: 100px auto;
	color: $gray;
	}
	#gray:after{@include giji;
		@include stripe_gray;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#gray:before{@include giji;
		@include stripe_gray;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#black{position: relative;
			margin: 100px auto;
			color: $black;
	}
	#black:after{@include giji;
		@include stripe_black;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#black:before{@include giji;
		@include stripe_black;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	#white{position: relative;
	margin: 100px auto;
	color: $white;
	}
	#white:after{@include giji;
		@include stripe_white;
		top:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	#white:before{@include giji;
		@include stripe_white;
		bottom:0;
		left:0;
		width: 100%;
		height: 10px;
	}
	
	h3{
		font-size: 14px;
		color:#656565;
		letter-spacing: 0.2em;
		line-height: 1.3;
	}
	
	/*----ボタン----*/
.button {
	margin:50px 0 30px;
	font-family: $font1;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
	padding: 10px 20px;
	font-size: 1.5rem;
		.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;
}

.b_red {
  background-color:$red;
  border: 2px solid $red;
  color: #fff !important;
}
.b_red:hover {
  background-color: #fff;
  border-color: $red;
  color: $red !important;
}
	
	.b_pink {
  background-color:$pink;
  border: 2px solid $pink;
  color: #fff !important;
}
.b_pink:hover {
  background-color: #fff;
  border-color: $pink;
  color: $pink !important;
}
	
.b_purple {
  background-color:$purple;
  border: 2px solid $purple;
  color: #fff !important;
}
.b_purple:hover {
  background-color: #fff;
  border-color: $purple;
  color: $purple !important;
}
	
.b_orange {
  background-color:$orange;
  border: 2px solid $orange;
  color: #fff !important;
}
.b_orange:hover {
  background-color: #fff;
  border-color: $orange;
  color: $orange !important;
}
	
.b_blue {
  background-color:$blue;
  border: 2px solid $blue;
  color: #fff !important;
}
.b_blue:hover {
  background-color: #fff;
  border-color: $blue;
  color: $blue !important;
}
	
.b_green {
  background-color:$green;
  border: 2px solid $green;
  color: #fff !important;
}
.b_green:hover {
  background-color: #fff;
  border-color: $green;
  color: $green !important;
}
	
.b_yellow {
  background-color:$yellow;
  border: 2px solid $yellow;
  color: #fff !important;
}
.b_yellow:hover {
  background-color: #fff;
  border-color: $yellow;
  color: $yellow !important;
}
	
.b_brown {
  background-color:$brown;
  border: 2px solid $brown;
  color: #fff !important;
}
.b_brown:hover {
  background-color: #fff;
  border-color: $brown;
  color: $brown !important;
}
	
.b_gold {
  background-color:$gold;
  border: 2px solid $gold;
  color: #fff !important;
}
.b_gold:hover {
  background-color: #fff;
  border-color: $gold;
  color: $gold !important;
}

.b_gray {
  background-color:$gray;
  border: 2px solid $gray;
  color: #fff !important;
}
.b_gray:hover {
  background-color: #fff;
  border-color: $gray;
  color: $gray !important;
}

.b_black {
  background-color:$black;
  border: 2px solid $black;
  color: #fff !important;
}
.b_black:hover {
  background-color: #fff;
  border-color: $black;
  color: $black !important;
}
	
.b_white {
  background-color:$white;
  border: 2px solid $white;
  color: #fff !important;
}
.b_white:hover {
  background-color: #fff;
  border-color: $white;
  color: $white !important;
}
		
}