@charset "utf-8";
/* CSS Document */

#gift{
    counter-reset: number;
	padding-top:0px;
	background-color:#fff;
}

#gift img{
    max-width: 100%;
}

#gift a{
	text-decoration:underline;
}

#gift a:hover{
	text-decoration:none;
}


#gift .index{
	width:90%;
	max-width:1000px;
	font-size:24px;
	font-weight:bold;
	margin:0 auto 20px;
}

#gift .index p{
	font-size:18px;
	font-weight:normal;
}

#gift .gift_nav{
	max-width:1000px;
	margin:0 auto 80px;
}

#gift .gift_nav li{
	width:25%;
	display:inline-block;
	margin:10px;
	border:1px solid #000;
}

#gift .gift_nav li a{
	padding:20px 0;
	display:block;
}


#gift .wrap{
	width:90%;
	max-width:1000px;
	margin:0 auto 40px;
}

#gift .wrap img{
	margin:10px auto;
}



#gift .wrap .ttl{
	border-bottom:2px solid #000;
	margin:20px auto;
	font-size:40px;
  	counter-increment:number;
}

#gift .wrap .ttl span{
	font-size:18px;
	vertical-align:middle;
}

#gift .wrap .ttl:before{
	content:"0" counter(number);
	font-size:60px;
	margin-right:10px;
	vertical-align:middle;
}


#gift #cart ul,#gift #about ul{
	margin-top:10px;
}

#gift #cart li,#gift #about li{
    max-width: 650px;
	font-size:12px;
	margin:5px auto;
}


#gift #cart img,#gift #about img{
	width:100%;
}




@media screen and (max-width : 768px){
#gift{
	font-size:16px;
	text-align:left;
}

#gift .index{
	font-size:20px;
}

#gift .index br{
	display:none;
}

#gift .index p{
	font-size:16px;
}

#gift ul.gift_nav{
	text-align:center;
}

#gift ul.gift_nav li{
	width:80%;
	max-width:420px;
	margin-bottom:20px;
}

/*#gift ul.gift_nav li a{
	padding:12px 30px;
}*/

#gift .wrap .ttl{
	font-size:24px;
	font-weight:bold;
	text-align:center;
}

#gift .wrap .ttl span{
	font-size:14px;
	vertical-align:middle;
}

#gift .wrap .ttl:before{
	font-size:28px;
	margin-right:5px;
}

#gift .wrap img{
	width:100%;
}

}





#gift .wrap #price{
	margin:15px auto;
	text-align:center;
}

#gift .wrap #price span{
	font-size:60px;
}

#gift .wrap #free{
	width:90%;
	max-width:500px;
	border:1px solid #ccc;
	padding:20px;
	margin:20px auto;
	text-align:center;
}

#gift .wrap #free img,
#gift .wrap #free p{
	vertical-align:middle;
	display:inline-block;
}

@media screen and (max-width : 768px){
#gift .wrap #price span{
	font-size:36px;
}
}













/*
デザイン
---------------------------------------------------------------------------------*/
#gift #design #left{
	max-width:684px;
	margin:10px auto;
}

#gift #design #choice{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 700px;
    margin: 40px auto 0;
}

#gift #design dl{
	text-align:left;
    margin: auto;
}

#gift #design dt{
	font-size:34px;
}

#gift #design dd{
	margin-bottom:15px;
}

@media screen and (max-width : 768px){
#gift #design #choice{
    margin-top: 10px;
}
#gift #design img{
	width:100%;
	display:block;
}

#gift #design dl{
	margin-top:10px;
}

#gift #design dt{
	font-size:23px;
}

#gift #design dd{
	font-size:16px;
}

}

@media screen and (max-width : 768px){
#gift #design dt{
	font-size:20px;
}
#gift #design dd{
	font-size:11px;
}

}








/*
カード
---------------------------------------------------------------------------------*/
#gift #card{
}

#gift #card ul{
	width:100%;
	max-width:1000px;
	margin:10px auto;
	text-align:left;
	counter-reset: number;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#gift #card li{
	width:23%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-bottom: 15px;
  	counter-increment:number;
}

#gift #card li img{
	width:100%;
	border:1px solid #888;
	padding:5px;
	box-sizing: border-box;
	margin:0;
}

#gift #card li:after{
	content:"カード"counter(number);
	font-size:12px;
}

#gift #card p{
	font-size:18px;
	font-weight:bold;
	margin:30px 0 10px;
	border-top:1px dotted #ccc;
	padding-top:30px;
}

#gift #card p:first-child{
	border:none;
}


#mother{
	background:#EBCBDE;
}

#father{
	background:#E5F2F2;
}

#grandma{
	background:#FAFAE3;
}

#grandpa{
	background:#E5F2E5;
}







@media screen and (max-width : 768px){

#gift #card li{
	width:31%;
	margin:0 5px 15px 0 ;
}

#gift #card li img{
	padding:2px;
}


#gift #card p{
	font-size:16px;
	margin:15px 0 10px;
	padding-top:15px;
}


}




#gift #cart .pink a{
	color:#ff2576;
}

#gift #cart .pink a:hover{
	color:#ff2576;
}

#gift #cart img#about2{
	background:#fff;
	border:1px solid #ccc;
	padding:30px 20px;
	margin-top:30px;
	width:850px;
}



#gift #att{
	width:90%;
	max-width:1000px;
	margin:20px auto 40px;
	border:1px solid #D04073;
}

#gift #att p{
	font-size:30px;
	color:#fff;
	background:#D04073;
	line-height:2;
	margin-bottom:20px;
}

#gift #att dl{
	margin:30px 50px;
	text-align:left;
	font-size:14px;
}

#gift #att dt{
	font-size:18px;
	font-weight:bold;
	margin-top:15px;
}

@media screen and (max-width : 768px){
/*#gift #cart img{
	width:90%;
	padding:30px 5%;
}*/

#gift #att p{
	font-size:24px;
	text-align:center;
}

#gift #att dl{
	margin:30px 25px;
}

#gift #att dt{
	font-size:16px;
}

#gift #cart img#about2{
	background:#fff;
	border:1px solid #ccc;
	padding:10px;
	margin-top:30px;
	width:90%;
}



}




/* -------- simpleFAQ styles --------- */

#accordion {
	max-width:1000px;
	margin:30px auto 30px;
  line-height:1.3;
  text-align:left;
  border-bottom:1px dotted #252220;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#accordion a{
	text-decoration:underline;
}

#accordion a:hover{
	text-decoration:none;
}

#accordion dt {
  font-size:18px;
  cursor: pointer;
  font-weight:bold;
  line-height:2.0;
  position:relative;
  padding:15px 30px 15px 3px;
  border-top:1px dotted #252220;
}

#accordion dt:after {
	content:"＋";
	font-size:24px;
	right:10px;
	position:absolute;
	top:7px;
}


#accordion dd{
	display:none;
	font-size:14px;
	line-height:2.0;
	margin:0 0 55px 8px;
	padding-top:5px;
	}
#accordion dt.active:after{
	content:"－";
}
/*#accordion dt.over {
	background-color: #CCC;
}*/





@media screen and (max-width : 568px){

#accordion dt {
  font-size:15px;
}

#accordion dt:after {
	font-size:18px;
}


#accordion dd{
	font-size:13px;
	}
	
}





/*
対象アイテム
---------------------------------------------------------------------------------*/
#gift #item p a{
	color:#0000FF;
	text-decoration:underline;
}

#gift #item p a:hover{
	text-decoration:none;
}



#gift #item ul{
	margin-top:10px;
}

#gift #item #list:nth-of-type(1){
	text-align:left;
}


#gift #item li{
	width:/*15*/18%;
	display:inline-block;
	vertical-align:top;
	font-size:12px;
	margin:5px;
}


#gift #item li img{
	width:100%;
}



@media screen and (max-width : 768px){
#gift #item li{
	width:30%;
	margin:2px 2px 5px;
	line-height:1.3;
}
}