@charset "utf-8";


/* ==========================================================================
   base
   ========================================================================== */


#main {
	font-size: 86%;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align: center;
	margin: 0px auto;
	width:100%;
	background-color: #d02d26;
	background-image: radial-gradient(circle, #d2422e 2.5px, transparent 2.5px);
	background-position: 0 0;
	background-size: 8px 8px;
}


/* ==========================================================================
   layout
   ========================================================================== */

/* 【CO･OP共済ニュース】 */
.topTxt {
	color: #FFF;
	text-align:right;
	margin-top: 0;
	margin-right:3%;
	margin-bottom:3%;
	}


/*===== イイコトたくさん！！　CO・OP共済 =====*/
.sec-1st{
	margin: 0px auto;
	position: relative;
	max-width:1000px;
	width: 100%;
}

.sec_1_bg{
	width: 100%;
	max-width:1000px;
}


/*===== マイページ登録で =====*/
.sec-2nd{
	margin: 0px auto;
	position: relative;
	max-width:1000px;
	width: 100%;
}

.sec02-bg01{
	position: relative;
	width: 100%;
	margin: 0px auto;
	max-width:1000px;
	/* (画像の高さ / 画像の横幅) × 100 */
	/* 2874/1500*100 */
	padding-top: calc(69/1587*100%);
	background: url(../img/sec02-bg_01.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
.sec02-bg02{
	position: relative;
	width: 100%;
	margin: 0px auto;
	max-width:1000px;
	padding-top: calc(871/1587*100%);
	background: url(../img/sec02-bg_02.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
.sec02-bg03{
	position: relative;
	width: 100%;
	margin: 0px auto;
	max-width:1000px;
	padding-top: calc(721/1587*100%);
	background: url(../img/sec02-bg_03.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.sec02-bg04{
	position: relative;
	width: 100%;
	margin: 0px auto;
	max-width:1000px;
	padding-top: calc(731/1587*100%);
	background: url(../img/sec02-bg_04.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.sec02-bg05{
	position: relative;
	width: 100%;
	margin: 0px auto;
	max-width:1000px;
	padding-top: calc(484/1587*100%);
	background: url(../img/sec02-bg_05.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}


.sec-2nd img{
	position: absolute;
}


.sec_2-01bg img{
	width: 62%;
	top: -10%;
	left: 21%;
}

.sec_2-01 img{
	width: 50%;
	top: -2%;
	left: 26%;
}

/* 24時間 */
.sec_2-02 img{
	width: 50%;
	top: 20%;
	left: 45%;
}

/* ！！ */
.sec_2-05 img{
	width: 20%;
	top: 30%;
	left: 30%;
}

/* ちょっとした */
.sec_2-03 img{
	width: 50%;
	top: 0%;
	left: 5%;
}
/* WOW */
.sec_2-07 img{
	width: 20%;
	top: 0%;
	left: 40%;
}

/* 診断書 */
.sec_2-04 img{
	width: 50%;
	top: 0%;
	left: 40%;
}
/* YEAH */
.sec_2-06 img{
	width: 20%;
	top: 0%;
	left: 35%;
}

.sec_2-08 img{
	width: 80%;
	bottom: 0;
	left: 5%;
}


/*===== さらに今なら！ =====*/
.sec-3rd{
	margin: 0px auto;
	position: relative;
	max-width:1000px;
	width: 100%;
}

.sec03-bg01 {
	margin: 0px auto;
	position: relative;
	max-width:1000px;
	width: 100%;
	padding-top: calc(534/1587*100%);
	background: url(../img/sec03-bg_01.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.sec03-bg02 {
	margin: 0px auto;
	position: relative;
	max-width:1000px;
	width: 100%;
	padding-top: calc(497/1587*100%);
	background: url(../img/sec03-bg_02.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.sec03-bg03 {
	margin: 0px auto;
	position: relative;
	max-width:1000px;
	width: 100%;
	padding-top: calc(628/1587*100%);
	background: url(../img/sec03-bg_03.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.sec-3rd img{
	position: absolute;
}

/* さらに今なら */
.sec_3-01 img{
	width: 25%;
	top: 25%;
	left: 9.2%;
}

.sec_3-01 {
	/*animation: flash 1s linear infinite;*/
}

@keyframes flash {
	0%,100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}


/* マイページへの */
.sec_3-02 img{
	width: 55%;
	top: 10%;
	left: 32%;
}
/* プレゼント */
.sec_3-03 img{
	width: 60%;
	top: 40%;
	left: 28%;
}

/* 受付期間 */
.sec_3-04 img{
	width: 75%;
	top: 5%;
	left: 12%;
	
}
/* 期間中のマイページ新規登録で自動エントリー */
.sec_3-04-txt {
	position: absolute;
	width: 60%;
	top: -40%;
	left: 12%;
	/*font-size:150%;*/
	text-align:left;
	font-size:4vw;
	font-weight:bold;
	line-height:1.3em;
	color: #000;
/*	-webkit-text-stroke: 0.35px #FFF;*/
/*	text-stroke: 0.35px #FFF;*/
}

.red-txt{
	font-weight:bold;
	color: #EF4123;
}
/* ケーキセット */
.sec_3-05 img{
	width: 82%;
	top: 0%;
	left: 18%;
}


/*===== ボタン =====*/
.sec-4th{
	margin: 0px auto;
	margin-top: 50px;
	width:100%;
	max-width:1000px;
	display: flex;
}

.sec-4th img{
	width: 80%;
	margin-bottom: 30px;
}

/*クリック時のイベントを指定*/

.drpbtn:hover {
	filter: none;
	top: 7px;
}

.drpbtn:active {
	filter: none;
	top: 7px;
}
.drpbtn {
	position: relative;
	filter: drop-shadow(8px 8px 1.5px #000);
	
}

.info-txt {
	color:white;
	font-size:120%;
	margin:2% 30% 0 10%;
	text-align:left;
}

.info-txt-indnt {
	color:white;
	font-size:120%;
	margin:10px 10% 0 10%;
	text-align:left;
	text-indent: -1em;
	padding-left: 1em;
}

.txt08 {
	font-size:100%;
}

.info-txt-dantai {
	color:white;
	font-size:120%;
	font-weight:bold;
	margin:30px 10% 0 10%;
	text-align:left;
}
.dantai {
	color:white;
	font-size:120%;
	font-weight:bold;
	text-align:left;
}

.fadeIn {
	opacity : 0.1;
	transform : translate(0px, 100px);
	transition : all 0.7s;
	}
.fadeIn.on {
	opacity : 1;
	transform : translate(0px, 0px);
}





/*===============  スマホ   ===============*/
@media screen and (max-width:991px) {
	#main .pc { display: none !important; }
	#main .sp { display: block !important; }
	

	/** redman **/
	.sec_1_01 img{
		position: absolute;
		width: 30%;
		/*top: 50%;*/
		right: 5%;
		transform: translate(5%, -50%);
	}

	.dantai::before{
		content: "\A";
		white-space: pre-wrap;
	}
	
}

/*===============  PC   ===============*/
@media screen and (min-width:990px) {
	#main .pc { display: block !important; }
	#main .sp { display: none !important; }
	
	
	.sec_1_bg{
		position: relative;
		width: 100%;
		margin: 0px auto;
		max-width:1000px;
		/* (画像の高さ / 画像の横幅) × 100 */
		/* 2874/1500*100 */
		padding-top: calc(578/1587*100%);
		background: url(../img/sec01-bg_pc.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}
	.sec_1 img{
		position: absolute;
		width: 67%;
		top: -5%;
		left: 3%;
		z-index:10;
	}
	/** redman **/
	.sec_1_01 img{
		position: absolute;
		width: 28%;
		/*top: 20%;*/
		right: 10%;
		transform: translate(10%, -80%);
		z-index:2;
	}
	
.sec02-bg01{
	position: relative;
	width: 100%;
	margin: 0px auto;
	max-width:1000px;
	/* (画像の高さ / 画像の横幅) × 100 */
	/*padding-top: calc(69/1587*100%);*/
	padding-top: 43px;
	background: url(../img/sec02-bg_01.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
	
.sec02-bg02{
	position: relative;
	width: 100%;
	margin: 0px auto;
	max-width:1000px;
	/*padding-top: calc(871/1587*100%);*/
	padding-top: 450px;
	background: url(../img/sec02-bg_02.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
.sec02-bg03{
	position: relative;
	width: 100%;
	margin: 0px auto;
	max-width:1000px;
	/*padding-top: calc(721/1587*100%);*/
	padding-top: 270px;
	background: url(../img/sec02-bg_03.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.sec02-bg05{
	position: relative;
	width: 100%;
	margin: 0px auto;
	max-width:1000px;
	padding-top: 120px;
	background: url(../img/sec02-bg_05.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

	.sec_2-01bg img{
		width: 40%;
		top: -6%;
		left: 30%;
	}

	.sec_2-01 img{
		width: 30%;
		top: 0%;
		left: 35%;
	}

	/* 24時間 */
	.sec_2-02 img{
		width: 35%;
		top: 20%;
		left: 15%;
	}

	/* ！！ */
	.sec_2-05 img{
		width: 15%;
		top: 20%;
		left: 5%;
	}

	/* ちょっとした */
	.sec_2-03 img{
		width: 35%;
		top: 30%;
		left: 55%;
	}
	
	/* WOW */
	.sec_2-07 img{
		width: 15%;
		top: 25%;
		left: 75%;
	}

	/* 診断書 */
	.sec_2-04 img{
		width: 35%;
		top: -20%;
		left: 35%;
	}
	/* YEAH */
	.sec_2-06 img{
		width: 15%;
		top: -20%;
		left: 30%;
	}
	
	/* コーすけ */
	.sec_2-08 img{
		width: 50%;
		bottom: 0;
		left: 5%;
	}
	
	
	/* PCは高さが小さい画像に差し替え */
	.sec03-bg02 {
		margin: 0px auto;
		position: relative;
		max-width:1000px;
		width: 100%;
		padding-top: calc(217.5/1587*100%);
		background: url(../img/sec03-bg_02_pc.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	
	/* 受付期間 */
	.sec_3-04 img{
		width: 58%;
		top: -5%;
		left: 30%;
		
	}
	
	/* 期間中のマイページ新規登録で自動エントリー */
	.sec_3-04-txt {
		font-size:250%;
		top: -15%;
		left: 11%;
	}
	
	
	/*===== ボタン =====*/
	.sec-4th{
		margin: 0px auto;
		margin-top: 50px;
		width:100%;
		max-width:700px;
		display: flex;
	}
	
	.sec-4th img{
		width: 65%;
		margin-bottom: 30px;
	}
	
}