@charset "utf-8";

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

base

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



html {
	background: #e0e0e0;
	
	
}	
	


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;
}


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


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


h2{
	font-size: 3rem;
	font-weight: 900rem;
	color:#fff;
	width: 100%;	
	text-align: center;
	padding: 7% 0 0;
}




.title_Disp{
	
	width: 45%;
	margin: 5% auto 3%;
	font-size: 1.3rem;
	letter-spacing: 0.2rem;
	text-align: left;
	font-weight: 900;
	
}



.kikaku_Disp

{
	width: 45%;
	margin: 3% auto;
	font-size: 1.1rem;
	text-align: left;
	letter-spacing: 0.1rem;
	
}



.kikaku_Disp img

{
	width: 80%;
	margin: 2% auto;
	font-size: 1.1rem;
	text-align: left;
	letter-spacing: 0.1rem;
	
}


.emphasis{
	font-size: 1.0rem;
}






.myself,.forher{
	width: 100%;
	text-align: center;
	background: #161659;
	padding-bottom: 5%;
	
	
  
}


.forhim,.forfriend{
	width: 100%;
	text-align: center;
	background: #c5ce37;
	padding-bottom: 5%;
	
	
  
}


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

.sub_logo img{
	width: 8%;
	position: absolute;
	top:40%;
	right:60%;
	z-index: 100;
	
	transform:rotate(-10deg);
	transform-origin:0 0;
	margin-bottom:4em;
	image-rendering: -webkit-optimize-contrast;
	
}



.suntitle_Disp{
	font-size: 1.2rem;
	font-weight: 900rem;
	color:#fff;
	width: 100%;
	text-align: center;
	padding: 0% 0 3%;
	letter-spacing: 0.1rem;
}



.xmas_item_box{
	
	display: flex;
	font-size: 0;
	width: 80%;
	margin: 3% auto;
}



.xmas_item{
	
	width: 33.3333%;
}



.xmas_item img{
	
	width: 80%;
	text-align: center;
}



.item_name{
	width: 80%;
	margin: 0 auto;
	font-size: 1.0rem;
	font-weight: 900rem;
	color:#fff;
	text-align: center;
	padding: 1% 0 3%;
	letter-spacing: 0.1rem;
	
}





.item_Disp{
	width: 75%;
	margin: 0 auto;
	font-size: .9rem;
	font-weight: 900rem;
	color:#fff;
	text-align: left;
	padding: 0% 0 3%;
	letter-spacing: 0.05rem;
	
}



.otoiawase{
	width: 75%;
	margin: 0 auto;
	font-size: .7rem;
	font-weight: 900rem;
	color:#fff;
	text-align: center;
	padding: 0% 0 3%;
	letter-spacing: 0.05rem;
	
}


.item_name2{
	width: 80%;
	margin: 0 auto;
	font-size: .85rem;
	font-weight: 900rem;
	color:#fff;
	text-align: center;
	padding: 1% 0 3%;
	letter-spacing: 0.1rem;
	line-height: 1.2rem;
	
}







.xmas_item_box2{
	
	display: flex;
	font-size: 0;
	width: 75%;
	margin: 3% auto;
	flex-wrap: wrap;
}

.xmas_item25{
	
	width: 25%;
	padding-top: 6%;
}



.xmas_item_item{
	
	width: 100%;
	padding-top: 10%;
}


.xmas_item_item img{
	width: 75%;
	text-align: center;
/*	border-radius: 200px;*/
}




.genre_box{
	
	width: 60%;
	margin: 0 auto;
	
	display: flex;
	font-size: 0;
	padding-bottom: 3%;
	margin: 3% auto;
	flex-wrap: wrap;
	
	
}


.genre_box_category{
	
	width: 25%;
	margin: 0 auto 2%;
	
}

.genre_box_category img{
	
	width: 90%;
	margin: 0 auto;
	
}


.category_name{
	
	width: 80%;
	margin: 0 auto;
	font-size: 1.1rem;
	font-weight: 900rem;
	text-align: center;
	letter-spacing: 0.1rem;
	line-height: 1.2rem;
	
	border: 3px solid #fff;
 	border-radius: 15px;
	padding: 5%;
	 
}

.category_name_s{
	
	width: 100%;
	margin: 0 auto;
	font-size: .6rem;
	font-weight: 900rem;
	text-align: center;
	letter-spacing: 0.1rem;
	line-height: 1.2rem;
	
}

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






@media (max-width:1400px) {
	
	



h2{
	font-size: 2.5rem;
	font-weight: 900rem;
	color:#fff;
	width: 100%;	
	text-align: center;
	padding: 20% 0 0;
}






.sub_logo img{
	width: 10%;
	position: absolute;
	top:65%;
	right:70%;
	z-index: 100;
	
	transform:rotate(-10deg);
	transform-origin:0 0;
	margin-bottom:4em;
	image-rendering: -webkit-optimize-contrast;
	
}



	
}
@media (max-width:830px) {
	
	



h2{
	font-size: 2.5rem;
	font-weight: 900rem;
	color:#fff;
	width: 100%;	
	text-align: center;
	padding: 20% 0 0;
}






.sub_logo img{
	width: 20%;
	position: absolute;
	top:40%;
	right:70%;
	z-index: 100;
	
	transform:rotate(-10deg);
	transform-origin:0 0;
	margin-bottom:4em;
	image-rendering: -webkit-optimize-contrast;
	
}



	
}



@media (max-width:420px) {
	



h2{
	font-size: 2rem;
	font-weight: 900rem;
	color:#fff;
	width: 100%;	
	text-align: center;
	padding: 20% 0 0;
}



.sub_logo img{
	width: 25%;
	position: absolute;
	top:35%;
	right:70%;
	z-index: 100;
	
	transform:rotate(-10deg);
	transform-origin:0 0;
	margin-bottom:4em;
	image-rendering: -webkit-optimize-contrast;
	
}



	
}




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


h1 img{
	width: 60%;
	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: 1.9rem;
	
}	
	
	
	
	

.kikaku_Disp

{
	width: 91%;
	margin: 3% auto;
	font-size: 1.1rem;
	text-align: left;
	letter-spacing: 0.1rem;
	
}

	
.kikaku_Disp img

{
	width: 100%;
	margin: 2% auto;
	font-size: 1.1rem;
	text-align: left;
	letter-spacing: 0.1rem;
	
}	
	

.emphasis{
	font-size: 1.0rem;
}	
	

.suntitle_Disp{
	font-size: 1.0rem;
	font-weight: 900rem;
	color:#fff;
	width: 95%;
	text-align: center;
	padding: 0% 0 3%;
	letter-spacing: 0.1rem;
	line-height: 1.6rem;
	margin: 0 auto;
}



.xmas_item_box{
	
	display: flex;
	font-size: 0;
	width: 100%;
	margin: 3% auto;
	flex-wrap: wrap;
}



.xmas_item{
	
	width: 100%;
}



.xmas_item img{
	
	width: 90%;
	text-align: center;
}



.item_name{
	width: 95%;
	margin: 0 auto;
	font-size: 1.0rem;
	font-weight: 900rem;
	color:#fff;
	text-align: center;
	padding: 1% 0 3%;
	letter-spacing: 0.1rem;
	
}





.item_Disp{
	width: 90%;
	margin: 0 auto;
	font-size: .8rem;
	font-weight: 900rem;
	color:#fff;
	text-align: left;
	padding: 0% 0 3%;
	letter-spacing: 0.05rem;
	
}



.item_name2{
	width: 90%;
	margin: 0 auto;
	font-size: .85rem;
	font-weight: 900rem;
	color:#fff;
	text-align: center;
	padding: 3% 0 3%;
	letter-spacing: 0.1rem;
	line-height: 1.2rem;
	
}







.xmas_item_box2{
	
	display: flex;
	font-size: 0;
	width: 100%;
	margin: 3% auto;
	flex-wrap: wrap;
}

.xmas_item25{
	
	width: 100%;
	padding-top: 6%;
}



.xmas_item_item{
	
	width: 100%;
	padding-top: 3%;
}
	
.xmas_item_item li{
	
	width: 50%;
	float: left;
}	


.xmas_item_item img{
	width: 100%;
	text-align: center;
/*	border-radius: 200px;*/
}	
	
	
	
	
	
	
.genre_box{
	
	width: 90%;
	margin: 0 auto;
	
	display: flex;
	font-size: 0;
	padding-bottom: 3%;
	margin: 3% auto;
	flex-wrap: wrap;
	
	
}


.genre_box_category{
	
	width: 50%;
	margin: 0 auto 2%;
	
}

.genre_box_category img{
	
	width: 90%;
	margin: 0 auto;
	
}


.category_name{
	
	width: 80%;
	margin: 0 auto;
	font-size: 1.1rem;
	font-weight: 900rem;
	text-align: center;
	letter-spacing: 0.1rem;
	line-height: 1.2rem;
	
	border: 3px solid #fff;
 	border-radius: 15px;
	padding: 5%;
	 
}

.category_name_s{
	
	width: 100%;
	margin: 0 auto;
	font-size: .6rem;
	font-weight: 900rem;
	text-align: center;
	letter-spacing: 0.1rem;
	line-height: 1.2rem;
	
}	
	
	
	
}





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

.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;
}	
	
}


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

.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%;
  }
}



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

雪

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


.snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 10px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}


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

スマホ

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



@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%;
  }
}