*{margin: 0;paddng: 0;}
body{
background-color: #fff;
color: #6f6f6f;
font-size: 1.0em;
line-height: 1.6;
height:auto;
margin: 0;
padding: 0;
width:100%;
}
img{border: none;}
.TA_kakugo_gf_02_R{
font-family: "ta-kakugo-gf-02", sans-serif;
font-weight: 400;
font-style: normal;
}
.TA_kakugo_gf_03_R{
font-family: "ta-kakugo-gf-03", sans-serif;
font-weight: 400;
font-style: normal;
}
a:link,a:visited{
color: #f30660;
text-decoration:none;
}
a:hover{
color: #f30660;
}
.btn_sns img{
margin: 20px auto;
width: 80px;
}
#main{
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#ffebfa));
background: -moz-linear-gradient(top, #fefefe, #ffebfa);
margin: 0 auto 10px;
text-align:center;
width:100%;
}
#main h1 {
display: flex;
align-items: center;
justify-content: center;
color: #f6538f;
font-family: "ta-kakugo-gf-02", sans-serif;
font-weight: 400;
font-size: min(3.0em, 5.0vw);
margin: 2% 0 0;
min-height: 100px;
gap: 5px;
}
#main h1::before {
content: "";
background: url(../img/ttl_bfe.webp) no-repeat center / contain;
flex-shrink: 0;
height: 100px;
width: 120px;
}
#main h1::after {
content: "";
background: url(../img/ttl_aft.webp) no-repeat center / contain;
flex-shrink: 0;
height: 100px;
width: 80px;
}
/* パンくずリスト  -------------------------------- */
nav#pan_box {
color: #666;
font-size: 0.8em;
margin: 0px 0 0 0 !important;
padding: 3px 0 3px 10px;
/*position: absolute;*/
width: 100%;
}
nav#pan_box ol {
color: #484848;
display: flex;
font-size: min(1.0em, 3.0vw);
list-style: none;
line-height: 1.5;
margin: 0 auto;
padding: 0;
max-width: 1260px;
width: 98%;
white-space: nowrap;
}
nav#pan_box ol li + li::before {
content: ">";
margin: 0 0.5em;
}
nav#pan_box a {
color: #ff5695;
text-decoration: none;
}
nav#pan_box a:hover {
text-decoration: underline;
}
/*=========◆プレゼント名表示◆========*/
.pre {
background: -webkit-gradient(linear, left top, left bottom, from(#ff5695), to(#f20056));
background: -moz-linear-gradient(top,#ff5695,#f20056);
border-top: solid 1px #040000;
border-left: solid 1px #040000;
border-right: solid 1px #040000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
margin-top: 30px;
padding: 0 0 3px;
}
.pre::after{
border-top: 2px dashed #fff;
content: "";
display: block;
margin: 0 auto;
}
.pre p.name{
color:#fff;
font-size: 1.2em;
font-weight: bold;
margin: 10px 24px;
text-align:left;
}
.pre p.line{
border-top: 2px dashed #fff;
margin: 0 auto;
}

/*=========◆ プレゼント情報表示　◆========*/
.preArea{
background-color:#F7F7F7;
border-bottom: solid 1px #040000;
border-left: solid 1px #040000;
border-right: solid 1px #040000;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
overflow: hidden;
padding: 20px;
}
.preArea p{
color: black;
margin: 0 auto;
}
.preArea p.bangumi{
color:#eB8000;
font-size: 1.2em;
font-weight: bold;
line-height: 1.2;
margin-bottom: 18px;
text-align:right;
}
.preArea h3{
float: left;
margin: 0 3%;
width: 25%;
}
.preArea h3 img{
height: auto;
width: 100%;
}
.preArea h3 div .pre_pic{
width: 100%;
}
.preArea div.memo{
color:#666;
float: left;
overflow: hidden;
text-align:left;
width: 65%;
word-break: break-all;
}
.preArea p.oubo{
color:#666;
clear: both;
float: left;
margin: 28px 0 0 5%;
text-align:left;
width: 70%;
}
.preArea span.oubo_data{
color: #f30660;
display: block;
}

.preArea .oubo_bottom{
float: right;
margin: 10px 5% 0 0;
text-align: right;
width: 20%;
}
.preArea .oubo_bottom a {
background: white;
border: #c00 solid 2px;
color: #c00;
display: block;
font-size: min(1.2em, 4.0vw);
font-weight: bold;
padding: 6% 0;
text-align: center;
}
.preArea .oubo_bottom a:hover {
opacity: 0.6;
}
.preArea table{
clear: both;
width: 100%;
}
.preArea h3.noImg{
align-items: center;
background-size: auto auto;
background-color: rgba(229, 229, 229, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(214, 214, 214, 1) 10px, rgba(214, 214, 214, 1) 20px );
display: flex;
height: 200px;
justify-content: center;
user-select: none;
}
.preArea h3.noImg span{
color: #666;
text-align: center;
}
/* 画像ポップアップ（CSSのみ）  */
.pre_pic {
cursor: zoom-in;
width: 150px;
}
/* チェックボックスは非表示 */
.popup-checkbox {
display: none;
}
/* ポップアップの基本 (非表示) */
.popup {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: .3s;
z-index: 9999;
}
/* 拡大画像 */
.popup-img {
max-width: 90%;
max-height: 90%;
border-radius: 4px;
box-shadow: 0 0 20px #000;
}
/* 背景クリックで閉じる（label） */
.popup-bg {
position: absolute;
inset: 0;
cursor: zoom-out;
}
/* ▼チェックされたら表示 */
.popup-checkbox:checked + .popup {
opacity: 1;
pointer-events: auto;
}
/*------- ページ関連 --------*/
#page {
border-bottom: 5px solid #d8d8d8;
clear: both;
margin: 0 auto;
padding: 0 0 2%;
}
#page p{
margin: 26px auto;
text-align: center;
}
#page .link {
align-items: center;
box-sizing: border-box;
display: flex;
margin: 0 auto;
justify-content: space-between;
padding: 0 10px;
max-width: 500px;
width: 90%;
}
#page .link div{
width: 50%;
}
#page .link a {
background: white;
border: solid 2px #aaa;
box-sizing: border-box;
border-radius: 5px;
color: #fc4488;
display: block;
margin: 0 auto;
padding: 5%;
text-align: center;
width: 90%;
}
#page #nextBtn a:before {
content:"\025c0";
margin: 0 5px 0 0;
}
#page #prevBtn a:after{
content: "\025b6";
margin: 0 0 0 5px;
}
/*-------フッター---------*/
#sns_button {
margin: 0 auto;
text-align: center;
/*
display: flex;
gap: 8px;*/
}
#sns_button .btn_sns{
margin: 0 2px;
}
#sns_button .btn_x img,.btn_twitter img,.btn_facebook img,.btn_line img{
height: 40px;
width: 40px;
}
/* プレゼントが無いとき */
.none {
background: #fff;
border: solid 1px #aaa;
font-size: min(1.2em, 4.0vw);
margin: 5% auto;
padding: 5% 2%;
max-width: 900px;
text-align: center;
width: 80%;
}


/* PCのみ  -------------------------------------------------- */
@media screen and (min-width:640px) {
	.pc_ad_head{
	text-align: center;
	}
	/*PChead 広告*/
	#div-gpt-ad-1573099338759-1{
	text-align: center;
	}
	/*=========◆プレゼント名表示◆========*/
	.pre_set{
	margin: 0 auto;
	max-width: 1200px;
	width: 80%;
	}

}
/* SP  -------------------------------------------------- */
@media screen and (max-width:640px) {
	body{
	font-size: 1.2em;
	-webkit-text-size-adjust: 100%;
	}
	.btn_sns img{
	margin: auto;
	height: auto;
	}
	#main h1 {
	font-size: clamp(1.6rem, 4.5vw, 3rem);
	gap: clamp(4px, 1vw, 8px);
	min-height: clamp(60px, 12vw, 100px);
	}
	#main h1::before {
	height: clamp(50px, 12vw, 100px);
	width: clamp(50px, 12vw, 120px);
	}
	#main h1::after {
	height: clamp(50px, 12vw, 100px);
	width: clamp(35px, 8vw, 80px);
	}
	/*=========◆プレゼント名表示◆========*/
	.pre {
	margin: 15px auto 0;
	width: 95%;
	}
	.pre p.name{
	font-size: 3.6vw;
	line-height: 1.5;
	margin: 10px 5%;
	}
	.pre p.name::after{
	border-top: 2px dashed #fff;
	content: "";
	}

	/*=========◆ プレゼント情報表示　◆========*/
	.preArea{
	margin: 0 auto 10px;
	overflow: unset;
	padding: 0 0 20px;
	width: 95%;
	}
	.preArea p.bangumi{
	font-size: 3.2vw;
	font-weight: unset;
	line-height: 1.8;
	margin: 0 auto;
	padding: 2% 0;
	width: 95%;
	}
	.preArea h3 div .pre_pic{
	max-height: 250px;
	text-align: center;
	width: unset;
	}
	.preArea h3 div .pre_pic img{
	max-height: 100%;
	}
	.preArea h3 img{
	margin: 0 auto;
	max-width: 95%;
	}
	.preArea h3.noImg{
	height: 35vw;
	margin: 0 auto;
	width: 90%;
	}
	.preArea div.memo{
	float: unset;
	font-size: 3.5vw;
	line-height: 1.5;
	margin: 2% auto;
	width: 90%;
	}
	.preArea p.oubo{
	font-size: 3.2vw;
	line-height: 1.5;
	margin: 5% auto 2%;
	width: 90%;
	}
	.preArea span.oubo_data{
	display: unset;
	margin: 2px 0 0;
	text-align:left;
	}
	.preArea .oubo_bottom{
	float: unset;
	margin: 5% auto 0;
	max-width: 400px;
	width: 50%;
	}
	.preArea .oubo_bottom a {
	padding: 6% 0 4%;
	}
	.preArea table{
	margin: 8px auto;
	width: 90%;
	}
	.preArea table td{
	box-sizing: border-box;
	}
	/* 画像ポップアップ（CSSのみ）  */
	.pre_pic {
	cursor: zoom-in;
	width: unset;
	}
	/*------- ページ関連 --------*/
	#page {
	font-size: 4vw;
	clear: unset;
	}
	#page .link {
	max-width: 520px;
	width: 100%;
	}
	#page .link a {
	background: white;
	border: solid 2px #aaa;
	box-sizing: border-box;
	border-radius: 5px;
	color: #fc4488;
	display: block;
	margin: 0 auto;
	padding: 5%;
	text-align: center;
	width: 90%;
	}

}