@charset "utf-8";

/***************************************

base

***************************************/



html {
	background: #f3f3f2;
	
	
}	
	


a {
	text-decoration: none;
	color: #333;
	outline: none;
}

a:hover {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	opacity: 0.5;
	filter: alpha(opacity=50);
	webkit-transition: 0.6s;
	transition: 0.6s;
}






/***************************************

トグル

***************************************/	

	.visible, .invisible {
                opacity: 0.0;
                transition: opacity 0.5s ease;
            }
            .visible {
                opacity: 1.0;
            }
            
            .visible.translateY,.invisible.translateY {
                transform: translateY(100px);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateY {
                transform: translateY(0);
            }
            .visible.translateToLeft,.invisible.translateToLeft {
                transform: translateX(100px);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateToLeft {
                transform: translateX(0);
            }
            .visible.translateToRight,.invisible.translateToRight {
                transform: translateX(-100px);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateToRight {
                transform: translateX(0);
            }
            .visible.translateScaleUp,.invisible.translateScaleUp {
                transform: scale(.5);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateScaleUp {
                transform: scale(1);
            }
            .visible.translateScaleDown,.invisible.translateScaleDown {
                transform: scale(1.4);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateScaleDown {
                transform: scale(1);
            }
            .visible.translateRotate,.invisible.translateRotate {
                transform: rotate(360deg);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateRotate {
                transform: rotate(0deg);
            }






/***********************************

コンテンツ

/********************************-*/




.contents{
	
	width: 100%;
	margin: 0 auto;
	background: #f1f1f1;
	
	/*font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;	*/
	
}

section{
	width: 100%;	
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	margin: 10% auto;
}


h1{
	width: 100%;
	
	text-align: center;
	padding: 7% 0 3%;
}


h1 img{
	width: 60%;
	margin: auto;
}






.title_Disp{
	
	width: 40%;	
font-size: 1.2rem;
line-height: 2.8rem;
letter-spacing: 0.3rem;	
text-align: left;
margin: 5% auto 10%;
font-weight: 700;
	
}




.point_Disp{
	
background: #f4f7a8;
padding: 1% 0;	
	
width: 90%;	
margin: 0 auto;
	
color:#222;	
font-weight: 700;	


}





div.brand_box{
	width: 75%;
	margin: 3% auto 0;
	
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	
	flex-wrap: wrap;
}




.tag{
	font-size: .9rem;
	font-weight: 900;
	letter-spacing: 0.2rem;
	padding: 0 0 0 1%;
	
	
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;	
	
}



h2{
	font-size: 3.5rem;
	font-weight: 900;
	letter-spacing: 0.2rem;
	line-height: 3.5rem;
	padding-top: 1%;
	
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;	
}


h3{
	font-size: 1.0rem;
	font-weight: 900;
	letter-spacing: 0.2rem;
	padding: 0 0 0 1%;
	
	
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;	
	
}





.brand_disp{
	width: 80%;
	margin: 5% 0;
	font-size: 1.3rem;
	line-height: 3.5rem;
	
	
	
}


.brand_disp_back{
	
	background-color: #fff;	
	padding: 1.5% 0;
	font-weight: 800;
	
	
}	
	



div.brand_box_1_left{
	width: 55%;
	text-align: center;
	
}

div.brand_box_1_left img{
	width: 90%;
	
}


div.brand_box_1_right{
	width: 45%;
	
}


div.brand_box_2_equal33{
	width: 33.3333%;
	text-align: center;
	
	
}

div.brand_box_2_equal33 img{
	width: 90%;
	
}








div.item_box{
	width: 100%;
	margin-top: 8%;
	
	
	font-size: .8rem;
	font-weight: 300;
	letter-spacing: 0.2rem;
	padding-top: 2%;
	text-align: center;
	
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	
	
  -webkit-flex-wrap: wrap;          /* Safari etc. */ /* 折り返す（左から右）*/
  -ms-flex-wrap    : wrap;          /* IE10        */
  flex-wrap        : wrap;
}




div.item_box_equal25{
	
	width:25%;
	text-align: center;
	position: relative;
	margin-bottom: 2%;
	
	
	
}

div.item_box_equal25 img{
	width: 98%;
	
}


p.new{
	
	position: absolute;
	width: 75px;/*幅*/
	height: 75px;/*高さ*/
	line-height: 75px;
	border-radius: 50%;/*角丸*/
	background: #73C4C0;
	color:#fff;
	top:6%;
	left:6%;
	
	
	display: inline-block;
	text-align: center;
	align-content: center;
	letter-spacing: 0.05rem;
	
}





.pconly{
	display: block;
}
.sponly{
	display: none;
}









@media (max-width:1023px) {
	
	
.pconly{
	display: none;
}
.sponly{
	display: block;
}	
	
	
h1{
	width: 100%;
	text-align: center;
	padding: 5% 0 3%;
}


h1 img{
	width: 100%;
	margin: auto;
}	
	
	
	
.title_Disp{
	
	width: 91%;
	margin: 5% auto 3%;
	font-size: 1.1rem;
	letter-spacing: 0.05rem;
	text-align: left;
	font-weight: 900;
	line-height: 2rem;
	
}	
	
	
	



.point_Disp{
	
background: #f4f7a8;
padding: 1% 0;	
	
width: 90%;	
margin: 0 auto;
	
color:#222;	
font-weight: 700;	


}





div.brand_box{
	width: 100%;
	margin: 3% auto 0;
	
	display: block;
	
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	
	flex-wrap: wrap;
}




.tag{
	font-size: .9rem;
	font-weight: 900;
	letter-spacing: 0.2rem;
	padding: 0 0 0 1%;
	
	
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;	
	
}



h2{
	font-size: 3.0rem;
	font-weight: 900;
	letter-spacing: 0.2rem;
	line-height: 3.5rem;
	padding-top: 1%;
	
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;	
}


h3{
	font-size: 1.0rem;
	font-weight: 900;
	letter-spacing: 0.2rem;
	padding: 0 0 0 1%;
	
	
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;	
	
}





.brand_disp{
	width: 98%;
	margin: 5% 0;
	font-size: 1.1rem;
	line-height: 2.5rem;
	
	
	
}


.brand_disp_back{
	
	background-color: #fff;	
	padding: 1.5% 0;
	font-weight: 800;
	
	
}	
	



div.brand_box_1_left{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	
}

div.brand_box_1_left img{
	width: 95%;
	
}


div.brand_box_1_right{
	width: 90%;
	margin: 0 auto;
	
}


div.brand_box_2_equal33{
	width: 50%;
	text-align: center;
	
	
}

div.brand_box_2_equal33 img{
	width: 90%;
	
}








div.item_box{
	width: 100%;
	margin-top: 8%;
	
	
	font-size: .8rem;
	font-weight: 300;
	letter-spacing: 0.2rem;
	padding-top: 2%;
	text-align: center;
	
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	
	
  -webkit-flex-wrap: wrap;          /* Safari etc. */ /* 折り返す（左から右）*/
  -ms-flex-wrap    : wrap;          /* IE10        */
  flex-wrap        : wrap;
}




div.item_box_equal25{
	
	width:33.333%;
	text-align: center;
	position: relative;
	margin-bottom: 2%;
	
	
	
}

div.item_box_equal25 img{
	width: 98%;
	
}


p.new{
	
	position: absolute;
	width:50px;/*幅*/
	height: 20px;/*高さ*/
	line-height: 40px;
	border-radius: 0;
	background: #73C4C0;
	color:#fff;
	top:5%;
	left:3%;
	
	
	display: inline-block;
	text-align: center;
	align-content: center;
	letter-spacing: 0.05rem;
	line-height: 1.0rem;
	
	font-size:0.6rem;
	
}
	
	
}





/************
ふきだし
************/

.balloon1 {
  position: relative;
  
  margin: 1.5em 0;  
  width: 60%;
  font-size: 1.5rem;
  background: #fff;
  margin: 8% auto 5%;
  padding: 7px 10px;
  font-weight: 900;	
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
}

.balloon1 p.genre_txt {
  margin: 0;
  padding: 0;
text-align: center;
	letter-spacing: 0.1rem;
}



@media (max-width:1023px) {
	
.balloon1 {
  position: relative;
  
  margin: 1.5em 0;  
  width: 90%;
  font-size: 1.2rem;
  background: #fff;
  margin: 8% auto 5%;
  padding: 7px 10px;
  font-weight: 900;	
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
}

.balloon1 p.genre_txt {
  margin: 0;
  padding: 0;
text-align: center;
	letter-spacing: 0.1rem;
}	
	
}






/***************************************

ボタン

***************************************/


.button03 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 5%;
  padding: 1.5rem 2rem;
  width: 300px;
  color: #666;
  font-size: 1.8rem;
  font-weight: 700;
  border: 2px solid #666;
  width: 28%;
}


.button04 a {
  margin: 8% auto 5%;
}

.button03 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #666;
  border-right: 3px solid #666;
  transform: rotate(45deg);
 
}

.button03 a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #666;
}

.button03 a:hover::after {
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}



@media screen  and (max-width:1200px){/*1200以下でレスポンシブ表示へ*/
	
	
	
.button03 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5% auto 8%;
  padding: 2rem 0.5rem;
  width: 300px;
  color: #666;
  font-size: 1.2rem;
  font-weight: 700;
  border: 2px solid #666;
  width: 85%;
}
	
.button04 a {
  margin: 13% auto 5%;
}	
	
}


/*******************************

スマホ

********************************/



@media (max-width:1023px) {
    
	
	




/****
ボタン
****/

.btn{
  position: relative;
  overflow: hidden;
    
  text-decoration: none;
  display: inline-block;
    border: 1px solid #555;
    padding: 1.5% 12%;
    text-align: center;
    outline: none;
    transition: ease .2s;
}


.btn span {
  position: relative;
  z-index: 3;
  color:#333;
}

.btn:hover span{
  color:#fff;
}


.bgskew::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  background:#333;
  width:120%;
  height: 100%;
  transform: skewX(-25deg);
}


.bgskew:hover::before {
  animation: skewanime .5s forwards;
}

@keyframes skewanime {
  100% {
    left:-10%;
  }
}