@charset "utf-8";

@import url("https://use.typekit.net/osb5eam.css");
$font1:baskerville-urw, serif;
$font2:mrs-eaves, serif;
$red:#AF0003;


/*-------------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;
	background: #a39d49;
	/*background:#e5d0b3;*/
	letter-spacing: 1.2px;
	line-height: 1.2;
	text-align: center;
}

.txtx{text-decoration: line-through;}

.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}
/*-------------PC用-------------*/
@media screen and (min-width:641px) {
	
.wrapper{
		overflow: hidden;
		text-align: center;
		width: 1200px;
		margin: 0 auto;
		padding: 10px 0;
		background: #fff;
	}

	
/*---------header---------*/	
	header{
	position: relative;
	padding: 10px 0;
		width: 1200px;
		height: 416px;
		background: url("../img/2020_02wallet_header.jpg") no-repeat;
	}
	h1{@include giji;
	width: 385px;
	height: 385px;
	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	margin: auto;
	}
	header:after{
		@include giji;
		width: 100%;
		top:-10px;
		left:0;
        right: 0;
        border: 3px solid #a49c47;
	}
    	header:before{
		@include giji;
		width: 100%;
		bottom:10px;
		left:0;
        right: 0;
        border: 3px solid #a49c47;
	}
	
h2{
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 2rem;
color:#e4007f;
letter-spacing: 0.1em;
padding: 0;
margin: 30px 0 10px;
p{font-size: 14px;
color: #737373;}
}

#wallet{background: #fadcdd;
margin: 5px 0 0;
padding: 15px 0 15px;
h3{
padding: 0;
margin: 5px auto 20px;
position: relative;
font-family: $font1;
font-weight: 400;
color: #e4007f;
font-size: 2.5rem;
letter-spacing: 0.1em;
z-index: 5;
span{background: #fadcdd;
padding: 0 5px;
}
}
h3:after{
position: absolute;
content: "";
top:28px;
left:35%;
width: 30%;
border-top:1px solid #e4007f;
z-index: -1;}
}

#wallet_men{background: #e6f6fb;
margin: 5px 0 0;
padding: 15px 0 15px;
h3{
padding: 0;
margin: 5px auto 20px;
position: relative;
font-family: $font1;
font-weight: 400;
color: #006CD1;
font-size: 2.5rem;
letter-spacing: 0.1em;
z-index: 5;
span{background: #e6f6fb;
padding: 0 5px;
}
}
h3:after{
position: absolute;
content: "";
top:28px;
left:35%;
width: 30%;
border-top:1px solid #006CD1;
z-index: -1;}
}

	

  h4 {
    margin: 50px 0 10px;
    color:#BF0508;
    position: relative;
	width: 100%;
	display: block;
    font-size: 2.5rem;
    font-family: $font1;
    font-weight: normal;
	letter-spacing: 0.1em;
    z-index: 1; }
    h4 span {
      background: #fff;
      padding: 0 15px; }
    h4 p {
	margin-bottom: 5px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 14px;
      color: #838383;
	  z-index: 55555;}

  h4:after {
    position: absolute;
    content: "";
    height: 10px;
    width: 100%;
    -webkit-background-size: 8px 8px;
    -moz-background-size: 8px 8px;
    background-size: 8px 8px;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #ddd), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #ddd), color-stop(0.75, #ddd), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    left: 0;
    top: 30px;
    z-index: -1; }


h5 {position: relative;
    margin: 100px 0 10px;
    color:#BF0508;
    position: relative;
	width: 100%;
	display: block;
    font-size: 2.5rem;
    font-family: $font1;
    font-weight: normal;
	letter-spacing: 0.1em;
    z-index: 9; 
	p{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-size: 14px;
	color: #4D4D4D;}}
	
h5:after{
position: absolute;
content: "";
bottom: -5px;
left: 0;
width: 100%;
border-bottom: 2px solid #000;
border-top: 1px solid #000;
height: 1px;}

/*---------read---------*/

.read{position: relative;}

.read:after{
@include giji;
background: url("../img/2020_02wallet_read_bg.png")no-repeat;
width: 100%;
height: 360px;
top:-10px;
left:0;
}

.read_box{
background: #fffae8;
margin: 0 auto;
width: 800px;
padding: 15px 5px;
box-sizing: border-box;
font-size: 16px;
letter-spacing: 0.1em;
line-height: 1.5;
}

/*----縁起のいい日----*/
.tbl-bdr table{
width: 600px;
margin: 0 auto;
}

.tbl-bdr table,.tbl-bdr td,.tbl-bdr th {
    border-collapse: collapse;
    border:1px solid #9E9E9E;
	background: #fff;
	font-size: 14px;
    }
.tbl-bdr{
span{font-size: 1.5rem;}
td{width: 14%;
vertical-align: top;}
img{width: 64%;
margin-top: 1px;}
p{font-size: 16px;
font-weight: 600;}
.sun{background: #F8E0E1;}
.sat{background: #DCFCFF;}
}

.lucky{
@include flex;
justify-content: space-between;
width: 720px;
margin: 30px 0 20px;
align-items: flex-start;
li{width: 105px;
padding: 2px;
background: #fff;
border: 1px solid #B0B0B0;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
.day{
margin: -5px 0;
font-size: 2rem;
span{
font-size:16px;}
}
p{
font-size: 16px;}
}
li:nth-child(n+4){display: none;}
.luckyday{
@include flex;
width: 98%;
flex-wrap: wrap;

li{font-size: 14px;
width: 100%;
margin: 1px 0;
border: none;
font-weight: 600;}
.tai{background: #ffcacc;}
.tora{background: #fff100;}
.ichi{background: #d4cd7e;}
.hebi{background: #b3d465;}
}
}


/*----男女メニュー----*/
.tab{
margin: 60px auto 0;
@include flex;
width: 760px;
justify-content: space-between;
li{width: 345px;
text-align: center;
font-size: 2.3rem;
padding: 10px 0;
}

.tab_lady{
font-family: $font1;
font-weight: 600;
color: #eb6877;
background:#fff;
font-size: 2.3rem;
border-radius: 5px 5px 0 0; }
.tab_lady a{color: #eb6877;}
.tab_men{
font-family: $font1;
font-weight: 600;
color: #0075a9;
background:#fff;
font-size: 2.3rem;
border-radius: 5px 5px 0 0;}
.tab_lady a{color: #eb6877;
display: block;}
.tab_lady a:hover{opacity: 0.5;
}
.tab_men a{color: #0075a9;
display: block;}
.tab_men a:hover{opacity: 0.5;
}
.off{background:#d9d9d9;}
}


/*----ビッグメニュー----*/

#wallet{background: #fadcdd;
margin: 5px 0 0;
padding: 15px 0 15px;}

#wallet_men{background: #e6f6fb;
margin: 5px 0 0;
padding: 15px 0 15px;}

.wallet_menu{
@include flex;
width: 750px;
justify-content: space-between;
li{
position: relative;
width: 32%;}
.wallet_txt{
position: absolute;
content: "";
bottom:20px;
left:0;
right: 0;
font-family: $font1;
letter-spacing: 0.1em;
font-size: 1.5rem;
font-weight: 400px;
color: #a40000;
p{font-size: 14px;
color: #434343;}
}
.ar{margin-top: -10px;}
}
	
	
/*----ブランドメニュー----*/
.brand_menu{
@include flex;
justify-content: space-between;
width: 1060px;
flex-wrap: wrap;
li{
margin-top: 30px;
width:19%;}
}

	
/*----カラーメニュー----*/
.color_menu{
@include flex;
justify-content: space-between;
width: 1060px;
flex-wrap: wrap;
li{position: relative;
margin-top: 30px;
width:24%;}

.coloreng{
position: absolute;
content:"";
font-family: $font2;
font-weight: 400;
font-size: 2rem;
top: 135px;
left: 0;
right: 0;
color: #000;
letter-spacing: 0.1em;
}
p{
margin-top: 5px;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 1.5;
color: #4D4D4D;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.colorjpn{
position: absolute;
content:"";
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 400;
font-size: 1.5rem;
top: 20px;
left: 0;
right: 0;
}

.black{color: #000;}
.brown{color: #8b3700;}
.yellow{color: #f6b554;}
.beige{color: #a07746; font-size: 1.2rem;}
.red{color: #c10012;}
.pink{color: #ef0889;}
.navy{color: #24214b;}
.blue{color: #00a0e9;}
}

.color_menu_m{
@include flex;
justify-content: space-between;
width: 700px;
flex-wrap: wrap;
li{position: relative;
margin-top: 30px;
width:33%;}

.coloreng{
position: absolute;
content:"";
font-family: $font2;
font-weight: 400;
font-size: 2rem;
top: 135px;
left: 0;
right: 0;
color: #000;
letter-spacing: 0.1em;
}
p{
margin-top: 5px;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 1.5;
color: #4D4D4D;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.colorjpn{
position: absolute;
content:"";
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 400;
font-size: 1.5rem;
top: 20px;
left: 0;
right: 0;
}

.black{color: #000;}
.brown{color: #8b3700;}
.yellow{color: #f6b554;}
.beige{color: #a07746; font-size: 1.2rem;}
.beige2{color: #a07746;}
.red{color: #c10012;}
.pink{color: #ef0889;}
.navy{color: #24214b;}
.blue{color: #00a0e9;}
}

/*----形メニュー----*/
.shape_menu{
@include flex;
justify-content: center;
width: 950px;
margin-bottom: 20px;
flex-wrap: wrap;
li{position: relative;
margin: 30px 20px 0;
width:165px;
}
.shapetxt{
position: absolute;
content:"";
bottom: 23px;
left:7px;
right:0;
font-size: 16px;
font-weight: 400;
color: #000;
p{margin-top: 2px;
font-size: 12px;}
}
.shapetxt2{
position: absolute;
content:"";
bottom: 30px;
left:7px;
right:0;
font-size: 16px;
font-weight: 400;
color: #000;
p{margin-top: 2px;
font-size: 12px;}
}
}
.shape_menu_m{
@include flex;
justify-content: center;
width: 1060px;
margin-bottom: 60px;
flex-wrap: wrap;
li{position: relative;
margin: 30px 20px 0;
width:165px;
}
.shapetxt{
position: absolute;
content:"";
bottom: 23px;
left:7px;
right:0;
font-size: 16px;
font-weight: 400;
color: #000;
p{margin-top: 2px;
font-size: 12px;}
}
.shapetxt2{
position: absolute;
content:"";
bottom: 30px;
left:7px;
right:0;
font-size: 16px;
font-weight: 400;
color: #000;
p{margin-top: 2px;
font-size: 12px;}
}
}
	/*----ボタン----*/
.button {
margin:50px 0;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
display: inline-block;
text-align: center;
text-decoration: none;
outline: none;
padding: 10px 20px;
font-size: 16px;
.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 {
  background-color:#AF0003;
  border: 2px solid #AF0003;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: #AF0003;
  color: #AF0003 !important;
}
		
}

/*-------------SP用-------------*/
@media screen and (max-width:640px) {
	
.wrapper{
		overflow: hidden;
		text-align: center;
		width: 98%;
		margin: 0 auto;
		padding: 10px 0;
		background: #fff;
	}

	
/*---------header---------*/	
	header{
	position: relative;
	padding: 10px 0;
		width: 100%;
		height: 250px;
		background: url("../img/2020_02wallet_header_sp.jpg") no-repeat;
		background-size: contain;
	}
	h1{@include giji;
	width: 90%;
	height: auto;
	top: 5px;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	margin: auto;
	img{width: 75%;}
	}
	header:after{
		@include giji;
		width: 100%;
		top:-10px;
		left:0;
        right: 0;
        border: 3px solid #a49c47;
	}
    	header:before{
		@include giji;
		width: 100%;
		bottom:10px;
		left:0;
        right: 0;
        border: 3px solid #a49c47;
	}
	
h2{
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 2rem;
color:#e4007f;
letter-spacing: 0.1em;
padding: 0;
margin: 30px 0 10px;
p{font-size: 14px;
color: #737373;}
}

#wallet{background: #fadcdd;
margin: 5px 0 0;
padding: 15px 0 15px;
h3{
padding: 0;
margin: 5px auto 20px;
position: relative;
font-family: $font1;
font-weight: 400;
color: #e4007f;
font-size: 2rem;
letter-spacing: 0.1em;
z-index: 5;
span{background: #fadcdd;
padding: 0 5px;
}
}
h3:after{
position: absolute;
content: "";
top:28px;
left:35%;
width: 30%;
border-top:1px solid #e4007f;
z-index: -1;}
}

#wallet_men{background: #e6f6fb;
margin: 5px 0 0;
padding: 15px 0 15px;
h3{
padding: 0;
margin: 5px auto 20px;
position: relative;
font-family: $font1;
font-weight: 400;
color: #006CD1;
font-size: 2rem;
letter-spacing: 0.1em;
z-index: 5;
span{background: #e6f6fb;
padding: 0 5px;
}
}
h3:after{
position: absolute;
content: "";
top:28px;
left:35%;
width: 30%;
border-top:1px solid #006CD1;
z-index: -1;}
}


  h4 {
    margin: 50px 0 10px;
    color:#BF0508;
    position: relative;
	width: 100%;
	display: block;
    font-size: 2rem;
    font-family: $font1;
    font-weight: normal;
	letter-spacing: 0.1em;
    z-index: 1; }
    h4 span {
      background: #fff;
      padding: 0 15px; }
    h4 p {
	margin-bottom: 5px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 14px;
      color: #838383;
	  z-index: 55555;}

  h4:after {
    position: absolute;
    content: "";
    height: 10px;
    width: 100%;
    -webkit-background-size: 8px 8px;
    -moz-background-size: 8px 8px;
    background-size: 8px 8px;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #ddd), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #ddd), color-stop(0.75, #ddd), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 50%, #ddd 50%, #ddd 75%, transparent 75%, transparent);
    left: 0;
    top: 30px;
    z-index: -1; }


h5 {position: relative;
    margin: 70px 0 10px;
    color:#BF0508;
    position: relative;
	width: 100%;
	display: block;
    font-size: 2rem;
    font-family: $font1;
    font-weight: normal;
	letter-spacing: 0.1em;
    z-index: 9; 
	p{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-size: 14px;
	color: #4D4D4D;}}
	
h5:after{
position: absolute;
content: "";
bottom: -5px;
left: 0;
width: 100%;
border-bottom: 2px solid #000;
border-top: 1px solid #000;
height: 1px;}

/*---------read---------*/

.read{position: relative;
z-index: 5555;}

.read:after{
@include giji;
background: url("../img/2020_02wallet_read_bg.png")no-repeat;
background-size: contain;
width: 100%;
height: 360px;
top:-10px;
left:0;
z-index: -1;
}

.read_box{
position: static;
background: #fffae8;
margin: 0 auto;
width: 90%;
padding: 15px 5px;
box-sizing: border-box;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 1.5;
z-index: 55;
}

/*----縁起のいい日----*/
.tbl-bdr table{
width: 98%;
margin: 0 auto;
}

.tbl-bdr table,.tbl-bdr td,.tbl-bdr th {
    border-collapse: collapse;
    border:1px solid #9E9E9E;
	background: #fff;
	font-size: 12px;
    }
.tbl-bdr{
span{font-size: 1rem;}
td{width: 14%;
vertical-align: top;}
img{
margin-top: 1px;}
p{font-size: 12px;
font-weight: 600;}
.sun{background: #F8E0E1;}
.sat{background: #DCFCFF;}
}



.lucky{
@include flex;
justify-content: space-between;
width: 95%;
margin: 30px 0 20px;
align-items: flex-start;
flex-wrap: wrap;
li{width: 30%;
padding: 2px;
margin-top: 10px;
background: #fff;
border: 1px solid #B0B0B0;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
.day{
margin: -5px 0;
font-size: 2rem;
span{
font-size:12px;}
}
p{
font-size: 12px;}
}

.luckyday{
@include flex;
width: 98%;
flex-wrap: wrap;

li{font-size: 14px;
width: 100%;
margin: 1px 0;
border: none;
font-weight: 600;}
.tai{background: #ffcacc;}
.tora{background: #fff100;}
.ichi{background: #d4cd7e;}
.hebi{background: #b3d465;}
}
}


/*----男女メニュー----*/
.tab{
margin: 60px auto 0;
@include flex;
width: 90%;
justify-content: space-between;
li{width: 45%;
text-align: center;
font-size: 2.3rem;
padding: 10px 0;
}

.tab_lady{
font-family: $font1;
font-weight: 600;
color: #eb6877;
background:#fff;
font-size: 1.5rem;
border-radius: 5px 5px 0 0; }
.tab_men{
font-family: $font1;
font-weight: 600;
color: #0075a9;
background:#fff;
font-size: 1.5rem;
border-radius: 5px 5px 0 0;}
.tab_lady a{color: #eb6877;
display: block;}
.tab_lady a:hover{opacity: 0.5;
}
.tab_men a{color: #0075a9;
display: block;}
.tab_men a:hover{opacity: 0.5;
}
.off{background:#d9d9d9;}
}


/*----ビッグメニュー----*/

#wallet{background: #fadcdd;
margin: 5px 0 0;
padding: 15px 0 15px;}
.wallet_menu{
@include flex;
width: 95%;
justify-content:center;
flex-wrap: wrap;
li{
position: relative;
margin: 10px 5px;
width: 45%;}
.wallet_txt{
position: absolute;
content: "";
bottom:5px;
left:0;
right: 0;
font-family: $font1;
letter-spacing: 0.1em;
font-size: 1.5rem;
font-weight: 400px;
color: #a40000;
p{font-size: 14px;
color: #434343;}
}
.ar{margin-top: -10px;}
}
	
	
/*----ブランドメニュー----*/
.brand_menu{
@include flex;
justify-content: space-between;
width: 95%;
flex-wrap: wrap;
li{
margin-top: 20px;
width:33%;}
}

	
/*----カラーメニュー----*/
.color_menu{
@include flex;
justify-content: space-between;
width: 95%;
flex-wrap: wrap;
li{position: relative;
margin-top: 30px;
width:48%;}

.coloreng{
position: absolute;
content:"";
font-family: $font2;
font-weight: 400;
font-size: 2rem;
top: 135px;
left: 0;
right: 0;
color: #000;
letter-spacing: 0.1em;
}
p{
margin-top: 5px;
font-size: 12px;
letter-spacing: 0.1em;
line-height: 1.5;
color: #4D4D4D;
text-align: left;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.colorjpn{
position: absolute;
content:"";
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 400;
font-size: 1.5rem;
top: 20px;
left: 0;
right: 0;
}

.black{color: #000;}
.brown{color: #8b3700;}
.yellow{color: #f6b554;}
.beige{color: #a07746; font-size: 1.2rem;}
.red{color: #c10012;}
.pink{color: #ef0889;}
.navy{color: #24214b;}
.blue{color: #00a0e9;}
}
.color_menu_m{
@include flex;
justify-content: center;
width: 95%;
flex-wrap: wrap;
li{position: relative;
margin: 30px 5px 0;
width:46%;}

.coloreng{
position: absolute;
content:"";
font-family: $font2;
font-weight: 400;
font-size: 2rem;
top: 115px;
left: 0;
right: 0;
color: #000;
letter-spacing: 0.1em;
}
p{
margin-top: 5px;
font-size: 12px;
letter-spacing: 0.1em;
line-height: 1.5;
color: #4D4D4D;
text-align: left;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.colorjpn{
position: absolute;
content:"";
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 400;
font-size: 1.5rem;
top: 20px;
left: 0;
right: 0;
}

.black{color: #000;}
.brown{color: #8b3700;}
.yellow{color: #f6b554;}
.beige{color: #a07746; font-size: 1.2rem;}
.beige2{color: #a07746;}
.red{color: #c10012;}
.pink{color: #ef0889;}
.navy{color: #24214b;}
.blue{color: #00a0e9;}
}


/*----形メニュー----*/
.shape_menu{
@include flex;
justify-content: center;
width: 95%;
flex-wrap: wrap;
li{position: relative;
margin: 30px 5px 0;
width:30%;
}
.shapetxt{
position: absolute;
content:"";
bottom: -6px;
left:7px;
right:0;
font-size: 14px;
font-weight: 400;
color: #000;
p{margin-top: 2px;
font-size: 12px;}
}
.shapetxt2{
position: absolute;
content:"";
bottom: 12px;
left:7px;
right:0;
font-size: 14px;
font-weight: 400;
color: #000;
p{margin-top: 2px;
font-size: 12px;}
}
}
.shape_menu_m{
@include flex;
justify-content: center;
width: 98%;
flex-wrap: wrap;
li{position: relative;
margin: 30px 0 0;
width:32%;
}
.shapetxt{
position: absolute;
content:"";
bottom: -3px;
left:7px;
right:0;
font-size: 14px;
font-weight: 400;
color: #000;
p{margin-top: 2px;
font-size: 12px;}
}
.shapetxt2{
position: absolute;
content:"";
bottom: 24px;
left:7px;
right:0;
font-size: 14px;
font-weight: 400;
color: #000;
p{margin-top: 2px;
font-size: 12px;}
}
}

	/*----ボタン----*/
.button {
margin:50px 0;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
display: inline-block;
text-align: center;
text-decoration: none;
outline: none;
padding: 10px 20px;
font-size: 16px;
.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 {
  background-color:#AF0003;
  border: 2px solid #AF0003;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: #AF0003;
  color: #AF0003 !important;
}
		
}

/* ----------------------------------------------
 * Generated by Animista on 2021-1-29 16:1:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}