@charset "UTF-8";
/* CSS Information ===========
File name:style.css
Description: Photogenic campaign
Date: 2019.3
Contents: *this page only
=============================== */
/* public ====================*/
#photogenic a:link,
#photogenic a:visited,
#photogenic a:hover,
#photogenic a:active{color:#006633;}
#photogenic p {line-height: 1.8rem;}
#photogenic small {font-size: 0.6em; color: #333}
.flex{display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex;}
.flex--horizon--end{-webkit-justify-content:flex-end; -ms-flex-pack:end; justify-content:flex-end;}
.flex--horizon--ctr{-webkit-justify-content:center; -ms-flex-pack:center; justify-content:center;}
.flex--vertical--end{-webkit-align-items:flex-end; -ms-align-items:flex-end; align-items:flex-end;}
.flex--vertical--ctr{-webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
.flex--wrap{-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.flex--direction--reverse{-ms-flex-direction:row-reverse; -webkit-flex-direction:row-reverse; flex-direction:row-reverse;}
/* Micro Clearfix [ IE9 Hack ] */
@media screen and (min-width: 0\0) and (min-resolution: .001dpcm){.cf--ie9:before, .cf--ie9:after{content:"";display:table;}}/*IE9*/
@media screen and (min-width: 0\0) and (min-resolution: .001dpcm){.cf--ie9:after{clear:both;}}/*IE9*/
@media screen and (min-width: 0\0) and (min-resolution: .001dpcm){.cf--ie9{zoom:1;}}/*IE9*/

/* visual
-------------------- */
.visual {
	background: url(../img/mainv_m.jpg)  30% bottom no-repeat ;
	background-size: cover;
	padding:2rem 0;
}
.visual__inner {
	width: 96%;
	max-width: 1024px;
	margin: 0 auto;	
	padding: 0;
	text-align: center;
}
.visual h2 {
	text-align: center;
}
.visual h2 img {
	max-width: 817px;
}
/* main
-------------------- */
.main__box {
	width: 100%;
	padding: 0;
}
.main__box article {
	width: 94%;
	max-width: 1024px;
	margin: 0 auto;	
	text-align: center;
}
.main__box h3 {
	width: 90%;
	max-width: 400px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	background-color: #220d09;
	border-radius: 20px;
	padding: 10px 0;
	margin: 0 auto 2.5rem;	
}
.main__box--whet img{max-width: 755px;}
.main__box span {
	display: block;
	margin: 0 2px;
}

/* whet */
#whet h4 {
	font-size: 2rem;
	line-height: 1.4;
	color: #5bbabd;
	margin-bottom: 1rem;
    text-shadow:2px 2px 3px #ffffff;
}
#whet p{font-size:1.2rem;line-height: 2rem}
#whet p span.pink{color:#d93177;margin:1rem 0;}

/* prize */
#prize {
	background-color: #fcf9ec;
    padding: 3rem 0;
}
#prize h4 {
	width: 60%;
	max-width: 300px;
	margin: 0 auto 2rem;
	padding: 0.5rem 1rem;	
	font-size: 1.4rem;
	color: #220d09;
	text-align: center;
	background-color: #fff;
	border: 1px solid #220d09;
}
#prize p strong {
	font-size: 3rem;
	color: #d93177;	
}
#prize p span {
	display: block;
}
#prize small {
	font-size: 1.2rem;
	color: #d93177;	
}
#prize img {
	max-width: 500px;
	margin: 0 auto 20px;
}
#prize .sp {
		display: none;
}

#prize p span.hukusyo img{width:8%!important;}
#prize .introduction { margin-bottom: 2rem;}
#prize .introduction span { display: inline-block!important;}

#prize .syouhin {
	color: #d93177;
	font-weight: bold;
	font-size: 1.8rem;
}


/* thanks */
#thanks {
	margin: 3rem auto;
}
#thanks p {
	font-size: 1rem;
	font-weight: bold;
}
#thanks strong {
	font-size: 1.6rem;
	line-height: 1.6;
	color: #d93177;
}
#thanks span {
	display: inline-block;
	margin: 0 2px;
}
#thanks .flow__winning {
	margin-top: 1rem;
	font-weight: normal;
}
#thanks .flow__winning strong {
	font-size: 1.2rem;
	position:relative;
	margin-right: 1rem;
}
#thanks .flow__winning strong:before {
	position:absolute;
	left: -2rem;
	content:"";
	display:inline-block;
	width:28px;
	height:24px;
	background:url(../img/icon_crown_pink.png) no-repeat;
	background-size:contain;	
}

/* flow */
#flow ul {
	display: table;
	width: 100%;
	margin: 4rem auto 1.5rem;
	border-collapse: separate;
	border-spacing: 10px 0; /* 左右 上下 */
}
#flow li {
	display: table-cell;
	width: calc(100%/3);
	font-size: 0.85rem;
	padding: 0rem 1rem;
	position: relative;
}
#flow li p {
	margin: 0.5rem auto;
	line-height: 1.6rem;	
}
#flow li:before {
	position: absolute;
	top:-15%;
	left: 38%;
	font-size: 1.6rem;
	font-weight: bold;
	color: #220d09;
}
/* 
#flow li:nth-child(1):before {
	content: "Step1";
}
#flow li:nth-child(2):before {
	content: "Step2";
}
#flow li:nth-child(3):before {
	content: "Step3";
}
*/
#flow .btn--instagram a:before {
	font-family: FontAwesome;
	content: "\f16d";
	margin-right: 5px;
}
#flow .btn--instagram {
	margin: 1.5rem auto 0.5rem;
}
#flow .btn--instagram a {
	width: 90%;
	display: block;
	max-width: 300px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	background-color: #d93177;
	border-radius: 20px;
	padding: 10px 0;
	margin: 0 auto;	
}
#flow .btn--instagram a:link {
	text-decoration: none;
}
#flow .btn--instagram a:hover {
	background-color: #006633;
}
/* outline */
#outline {
	/*background-color: #fcf9ec;*/
	padding:3rem 0;
}
#outline .note {
	text-align: left;
}
#outline table {
	border-collapse: separate;
	border-spacing: 0 1rem; /* 左右 上下 */
}
#outline table th {
	width: 25%;
	padding: 1rem 0;
	font-size: 0.95rem;
	text-align: center;
	vertical-align: top;
	border-right: 1px solid #dcdcdc;
}
#outline table td {
	font-size: 0.85rem;
	padding-left: 2rem;
	line-height: 1.5;
}
#outline table td p {
	margin-bottom: 1.5rem; 
}
#outline table td p br {
    display:block;
}
#outline table td ul {
	margin: -1rem 0 1.5rem;
}
#outline table td ol {
	margin: -1rem 0 0.5rem;
}
#outline table td li {
	margin-top: 6px;
}
#outline .note {
	font-size: 0.85rem;
	line-height: 1.5;	
}
#outline .note li {
	margin-bottom: 2rem;
}
#outline .note li ul,
#outline .note li ol {
	margin: 1rem 0;
}
#outline .note li li {
	margin-bottom: 0.6rem;
}

/*br{display: none;}*/
.next__txt {
	text-align: center;
	font-weight: bold;
	font-size: 1rem;
}
/* Responsive =====================*/
@media (max-width:1024px){

}
@media (max-width:768px){
/* visual */
	.visual {
		background: url(../img/mainv_m.jpg) no-repeat 30%;
		background-size: cover;
		padding:1rem 0;

    }
    #whet.main__box {
    padding: 1rem 0 0 0;
}

    .visual h2 img {
    width: 480px;
}
    .main__box--whet img{width:480px; }

	.visual__inner {width: 94%; padding: 0;}	
/* main__box */
	.main__box{padding: 3rem 0;}
	.main__box h3{margin: 0 auto 1.5rem;}
/* whet */
	#whet ul{margin: 1.5rem auto;}	
	#whet p br{display:none;}	
/* prize */
	#prize h4 {font-size: 1.2rem;}
/* flow */
	#flow ul {
		display: block;
		margin: 3rem auto -0.5rem;
		border-collapse: none;
	}
	#flow li {
		display: block;
		width: 100%;
		position: relative;
		margin: 2.8rem 0 2rem;
		padding: 0 10px 10px;
	}
	#flow li:before {
		position: relative;
		top:-2rem;
		left: inherit;
	}
	#flow li p {
		margin: 0 auto 0.5rem;
	}	
	#thanks { margin: 0 auto;}
	#thanks .flow__winning:before {
		margin-bottom: 1rem;
	}
	#thanks .flow__winning strong {
		margin: 0 0 0.5rem 0;
		display: block;
	}
	#thanks .flow__winning strong:before {
		position:relative;
		left: -0.3rem;
		top: 5px;
	}
	#outline table {
		width: 98%;
		margin: 0 auto;
		border-collapse: none;
		border-spacing: 0;	
	}
	#outline table th {
		display: block;
		width: 100%;
		width: auto\9;
		padding: 5px;
		text-align: left;
		border-right: none;
		background-color: #dcdcdc;
	}
	#outline table td {
		display: block;
		width: 100%;
		padding: 5px 5px 10px;
	}
	#outline table td p {
		margin: 0 0 1rem; 
	}
	#outline table td strong {
		margin-top: 1rem;
	}	
	#outline table td ul {
		margin: -8px 0 1rem;
	}
	#outline table td ol {
		margin: 0 0 0.8rem;
	}
}
@media (max-width:640px){
     .visual {
    background: url(../img/mainv_m.jpg) top 20% cover no-repeat;
}
    #whet.main__box {
    padding: 1rem 0 0 0;
}
    .visual__inner {
    padding: 0;
}
    .visual h2 img {
    width: 360px;
}
    .main__box--whet img{width:360px; }
}
@media (max-width:549px){
	#prize .sp {
		display: block;
	}
    .visual {
    background: url(../img/mainv_m.jpg) top 20% cover no-repeat;
}
    #whet.main__box {
    padding: 1rem 0 0 0;
}
    .visual__inner {
    padding: 0;
}
    .visual h2{padding-top:0%;}
     .visual h2 img {
    width: 360px;
}
    br{display:block;}
    .main__box--whet img{width:360px; }
#prize p span.hukusyo img{width:18%!important;}
p.keisai img{width:75%!important;}
.main__box--whet img {
    width: 320px;
}
}

@media (max-width:360px){
         .visual {padding-top:2em;}
        .visual h2 img {
    width: 19rem;
}
   #whet.main__box{padding-top:0px; }
    .main__box--whet img{width:280px;margin-top:0px; }

#prize {
    background-color: #fcf9ec;
    padding: 1rem 0;
}
p.keisai img{width:75%!important;}
#prize p span.hukusyo img{width:25%!important;}
}


.zigzag{
background-color: #fcf9ec;
  height: 14px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  position: relative;
}
.zigzag::after{
  content: "";
  position: absolute;
  background: linear-gradient(45deg, #5bbabd 50%, transparent 52%),
      linear-gradient(315deg, #5bbabd 50%, transparent 52%);
  background-size: 30px 30px;
  height: 14px;
  width: 100%;
  bottom: 0;
}

.zigzag_btm{
background-color: #5bbabd;
  height: 14px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  position: relative;
}
.zigzag_btm::after{
  content: "";
  position: absolute;
  background: linear-gradient(45deg, #fcf9ec 50%, transparent 52%),
      linear-gradient(315deg, #fcf9ec 50%, transparent 52%);
  background-size: 30px 30px;
  height: 14px;
  width: 100%;
  top: 0;
    
}

#flow{background-color: #5bbabd;    padding: 3rem 0;}
footer{background-color: #5bbabd;}

#next__btn{width:100%; margin-bottom:20px; text-align: center;}
#next__btn a{text-decoration:none; display:inline-block; padding:12px 30px 10px; border:solid 1px #cb3370; color:#cb3370; border-radius:40px;}
#next__btn a:link{color:#cb3370;}
#next__btn a:visited{color:#cb3370;}
#next__btn a:hover{background:#cb3370; color:#fff!important;}
.hukusyo_prize{display:table;width:40%;margin:2rem auto 0 auto;}
.hukusyo_prize span.hukusyo{display:block;}
.hukusyo_prize li.w10{width:16%;}
.hukusyo_prize li{text-align:left;display:table-cell;vertical-align:middle;}
@media (max-width: 768px){.hukusyo_prize{display:table;width:60%;}}
@media (max-width: 549px){.hukusyo_prize{display:table;width:80%;}}