@charset "UTF-8";

@font-face {
	font-family: "OpenSans-ExtraBold";
	src:url('../../fonts/OpenSans-ExtraBold.ttf');
}

html{
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

body{
	overflow: auto; 
	margin:0 auto;
	max-width: 100%;
	height: 100%;
}
main .wrap{
	margin:0 auto;
	width:100%;
}
img{
    max-width: 100%;
    height: auto;
}
b{
	font-weight:bold;
}

@media only screen and (min-width: 768px) {/* PC用 */
body{
	background:#fff;
}

}





/*********************************
**********************************
メインエリア
**********************************
*********************************/

#mainArea{
	margin:125px 0 0px 0;
	padding:0px 0 0px 0;
	width:100%;
	background: #fff;
}

@media only screen and (min-width: 768px) {/* PC用 */
#mainArea {
	margin:75px 0 -80px 0;
	padding:0px 0 50px 0;
}
}



/*********************************
タイトル部分
*********************************/
.titleArea{
	background: #facf32;
	background: linear-gradient(#edcf26, #fade41, #faa914);
}

.titleZone{
	padding:30px 10% 0;
	width:100%;
}

.titleZone p{
	padding:10px 7%;
	margin:20px auto 10px;
	background:#000;
	font-size:16px;
	line-height:1.6em;
	color:#fff;
	font-weight:bold;
	width:100%;
	max-width:500px;
	border-radius:10px;
}
.titleZone p span{
	font-size:24px;
	color:#fade41;
	margin:0 0.5em;
}

@media only screen and (max-width: 767px) {/* スマホ用 */
.titleZone .titleVispo{
	background:url(../images/campaignBgTopVispo.svg) center center no-repeat;
	width:100%;
	height: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 25%;
	background-size: cover;
}
.titleZone .titleImage{
	background:url(../images/campaignBgTopRogo.svg) center center no-repeat;
	filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.6));
	width:100%;
	height: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 45%;
	background-size: cover;
}
.titleZone .titleTakokichi{
	background:url(../images/campaignBgTakokichi.svg) center center no-repeat;
	filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.6));
	width:40%;
	height: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 66.666%;
	background-size: cover;
	margin:0 auto;
	z-index:1;
	position:relative;
}
}



.dateZone{
	padding:30px 0 70px;
	margin:-50px 0 0;
	width:100%;
	text-align:center;
	background:url(../images/borderCampaign.svg) top center repeat-x,
				url(../images/borderCampaign.svg) bottom 40px center repeat-x;
}
.dateZone .wrap{
	padding:6px 20px;
	color:#000;
	font-weight:bold;
	border:6px solid #000;
	border-radius:20px;
	background:#fff;
	width:60%;
	max-width:350px;
	margin:0 auto;
}
.dateZone h4{
	font-size:13px;
	margin:0 0 4px;
}
.dateZone h3{
	font-size:24px;
}
.dateZone h3 b{
	font-size:36px;
}

@media only screen and (min-width: 768px) {/* PC用 */
.titleZone{
	padding:10px 0 0;
	width:100%;
	max-width:800px;
	margin:0 auto;

}
.titleZone .titleVispo{
	background:url(../images/campaignBgTopVispo.svg) left 70px center no-repeat;
	width:700px;
	height:100px;
	margin:0 ;
    background-size: contain;
}
.titleZone .titleImage{
	background:url(../images/campaignBgTopRogo.svg) center center no-repeat;
	filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.6));
	width:700px;
	height:260px;
	margin:0 auto;
    background-size: contain;
}

.titleZone .titleTakokichi{
	background:url(../images/campaignBgTakokichi.svg) center bottom no-repeat;
	background-size: contain;
	filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.6));
	width:200px;
	height:190px;
	margin:0 auto;
	z-index:1;
	position:relative;
}
.dateZone{
	padding:30px 0 100px;
	margin:-50px 0 0;
	width:100%;
	text-align:center;
	background:url(../images/borderCampaign.svg) top center repeat-x,
				url(../images/borderCampaign.svg) bottom 70px center repeat-x;
}
}

@media only screen and (min-width: 900px) {/* PC用 */
.titleZone{
	padding:10px 0 0;
	width:100%;
	max-width:840px;
	margin:0 auto;

}
.titleZone .titleVispo{
	background:url(../images/campaignBgTopVispo.svg) left 0 center no-repeat;
}
.titleZone .titleImage{
	background:url(../images/campaignBgTopRogo.svg) center center no-repeat;
	filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.6));
	width:830px;
	height:280px;
	margin:-60px auto 0;
    background-size: contain;
}
}
/*********************************
*************** END *************/








/*********************************
キャンペーンの説明部分
*********************************/
.campaignZone{
	padding:40px 0 120px;
	background:url(../images/bgCommentVispo.svg) bottom right no-repeat,
				#c91877;
	border-top:15px solid #fff;
	border-bottom:15px solid #fff;
}

.campaignZone .campaignBallon{
	margin:0 auto;
	width:92%;
	max-width:900px;
	padding:40px 7%;
	background:#fff;
	border-radius: 20px;
}
.camWaku{
	width:100%;
	padding:120px 10% 100px;
	background:url(../images/otokuImg1.svg) top 20px center no-repeat,
				url(../images/otokuImgIcon1.svg) bottom 15px center no-repeat,
				#facf32;
	margin:0 0 0px;
}
.camWaku:nth-of-type(3){
	background:url(../images/otokuImg2.svg) top 20px center no-repeat,
				url(../images/otokuImgIcon2.svg) bottom 15px center no-repeat,
				#d62f15;
}
.camWaku:nth-of-type(1) h2{
	text-align:center;
	font-size:32px;
	font-weight:bold;
	color:#000;
}
.camWaku:nth-of-type(1) h3{
	text-align:center;
	padding:6px 0;
	margin:6px 0;
	font-size:17px;
	font-weight:bold;
	color:#000;
	background:#fff;
}
.camWaku:nth-of-type(3) h2{
	text-align:center;
	padding:20px 0;
	font-size:30px;
	font-weight:bold;
	color:#000;
	background:#fff;
	position: relative;
	display: block;
}
.camWaku:nth-of-type(3) h2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  border: 16px solid transparent;
  border-top: 16px solid #fff;
}
.camWaku:nth-of-type(3) h3{
	text-align:center;
	font-size:60px;
	font-weight:bold;
	color:#000;
	margin:30px 0 6px;
}

.camWaku p{
	font-size:14px;
	line-height:1.3em;
	color:#111;
}
.textWrap h4{
	font-size:18px;
	font-weight:bold;
	color:#8f0d53;
	margin:60px 0 12px;
}
.textWrap p{
	font-size:13px;
	line-height:1.8em;
	color:#333;
}
.imgPLUS{
	text-align:center;
	margin:-24px 0 ;
	position:relative;
	z-index:3;
}
@media only screen and (min-width: 768px) {/* PC用 */
.camWrap{
	display:flex;
	flex-wrap:wrap;
	position:relative;
}
.camWaku{
	width:48%;
	margin-right:2%;
}
.camWaku:nth-of-type(2){
	margin-right:0;
}
.camWaku:nth-of-type(3) h3 span{
	font-size:30px;
}
.imgPLUS{
	position:absolute;
	z-index:3;
	top:calc(50% - 42px);
	left:calc(50% - 42px);
	margin:0 ;
}
.textWrap h4{
	font-size:24px;
	margin:70px 0 20px;
}
.textWrap p{
	font-size:14px;
}
}

@media only screen and (min-width: 1000px) {/* PC用 */
.campaignZone{
	padding:60px 0 60px;
	background:#c91877;
}
}
/*********************************
*************** END *************/





/*********************************
参考例の部分
*********************************/
.exampleZone{
	padding:30px 0;
	background:#eee;
}
.exampleWrap{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	max-width:950px;
	margin:0 auto;
}
.exampleZone h5 {
	margin:10px auto 70px;
	width:80%;
	max-width:560px;
	color:#444;
	font-size:13px;
	line-height:1.8em;
	text-align:left;
}
.exampleZone article{
	width:90%;
	margin:40px auto 60px;
	padding-bottom:120px;
	border-bottom:2px solid #fff;
	background:url(../images/exampleBgChara1.svg) bottom right no-repeat;
}
.exampleZone article:nth-of-type(2){
	background:url(../images/exampleBgChara2.svg) bottom right no-repeat;
}
.exampleZone article:nth-of-type(3){
	background:url(../images/exampleBgChara3.svg) bottom right no-repeat;
	border-bottom:none;
}
.exampleZone article .subject,
.exampleZone article .range{
	display:flex;
	align-items: center;
}
.exampleZone article .subject{
	background:#f7ce28;
	position: relative;
}
.exampleZone article .subject:before,
.exampleZone article .range:before,
.exampleZone article .example:before{
  content: "";
  position: absolute;
  top: -35px;
  left:calc(50% - 25px);
  display: inline-block;/*忘れずに！*/
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-size: contain;
  vertical-align: middle;
}
.exampleZone article .subject:before {
  background:url(../images/exampleIconTop.svg) center center no-repeat;
}
.exampleZone article:nth-of-type(2) .subject:before {
  background:url(../images/exampleIconTop2.svg) center center no-repeat;
}
.exampleZone article:nth-of-type(3) .subject:before {
  background:url(../images/exampleIconTop3.svg) center center no-repeat;
}
.exampleZone article .subject:before {
  background:url(../images/exampleIconTop.svg) center center no-repeat;
}
.exampleZone article .range:before {
  background:url(../images/exampleIconPLUS.svg) center center no-repeat;
}
.exampleZone article .example:before {
  background:url(../images/exampleIconEQUAL.svg) center center no-repeat;
}
.exampleZone article .range{
	background:#d62f15;
	position: relative;
	margin:22px 0;
}
.exampleZone article .subject h4,
.exampleZone article .range h4{
	background:#111;
	color:#fff;
	padding:30px 0;
	font-size:13px;
	font-weight:bold;
	width:100px;
	text-align:center;
}
.exampleZone article .subject p,
.exampleZone article .range p{
	color:#111;
	font-size:15px;
	line-height:1.3em;
	width:calc(100% - 100px);
	padding:0 15px;	
}
.exampleZone article .example{
	padding:25px 8%;
	background:#fff;
	position: relative;
	color:#111;
	font-size:13px;
}
.exampleZone article .example h4{
	font-size:16px;
	margin:22px 0;
}
.exampleZone article .example h4 span{
	color:#fff;
	background: #111;
	padding:3px 15px;
	margin-right:6px;
	font-size:16px;
}
.exampleZone article .example h3{
	font-size:14px;
	margin:30px 0 10px;
}
.exampleZone article .example h3 span{
	font-size:26px;
	font-weight:bold;
}

@media only screen and (min-width: 768px) {/* PC用 */
.exampleZone h5 {
	font-size:14px;
}
.exampleZone article{
	width:47%;
	margin:0 2% 70px;
}
.exampleZone article:nth-of-type(2n){
	margin-left:0;
}
.exampleZone article .subject h4,
.exampleZone article .range h4{
	padding:35px 0;
	font-size:14px;
}
}
@media only screen and (min-width: 950px) {/* PC用 */
.exampleZone article{
	width:45.5%;
	margin:0 3% 70px;
}
.exampleZone article:nth-of-type(2n){
	margin-left:0;
}

}
/*********************************
*************** END *************/




































/*********************************
問い合わせ部分
*********************************/
.contactZone{
	padding:0px 0 0 0;	
	text-align:center;
	
}
.wrapContact{
	background: #4f5973;
	padding:0px 0 150px 0;	
	margin:0px 0 -60px;
	
}
.wrapKakushi{
	background: #4f5973;
	padding:60px 0 0;	
	position:relative;
	z-index:6;
}
.contactZone .wrapContact p {
	margin:0px auto 40px;
	width:80%;
	max-width:650px;
	color:#fff;
	font-size:13px;
	line-height:1.8em;
	text-align:left;
}
.contactZone .wrapContact h5{
	font-size:24px;
	padding: 5px 20px;
	background:#111;
	color:#fff;
	display:inline-block;
	margin:0px 0 20px;
	font-family: "OpenSans-ExtraBold";
}


.contactArea{	
	text-align: center;	
}
.contactArea .bottanCA{
	width:150px;
	margin:0 auto 50px;
	border:none;
	border-radius:7px;
	text-align: center;	
	background:#fff;
	transition: all 0.25s ease;
	background: url(../images/icon_blackboard.svg) top 20px center no-repeat,
				#fff;
}
.contactArea .bottanCA:hover{	
	background: url(../images/icon_blackboard.svg) top 20px center no-repeat,
				#ebeef7;
}
.contactArea .bottanCA a{
	display:block;
	padding:110px 5px 15px;
	font-size:13px;
	font-weight:bold;
	color:#36739c;
}

@media only screen and (min-width: 768px) {/* PC用 */

}

ul.contact{
	width:90%;
	max-width:800px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;/*横並び */
}
ul.contact li{
	width:31.5%;
	margin-right:2.75%;
	margin-bottom:2.75%;
	border:1px solid #fff;
	border-radius:7px;
	text-align: center;	
	transition: all 0.25s ease;
}
ul.contact li:hover{	
	background:#ebeef7;
}
ul.contact li:nth-child(1) a{
	background: url(../images/icon_document.svg) top 20px center no-repeat;
}
ul.contact li:nth-child(2) a{
	background: url(../images/icon_mail.svg) top 20px center no-repeat;
}
ul.contact li:nth-child(3) a{
	background: url(../images/icon_telephone.svg) top 20px center no-repeat;
}
ul.contact li:nth-child(3n){
	margin-right:0;
}
ul.contact li a{
	display:block;
	padding:110px 5px 15px;
	font-size:13px;
	color:#fff;
}

@media only screen and (min-width: 768px) {/* PC用 */
ul.contact li a{
	display:block;
	padding:120px 5px 25px;
	font-size:16px;	
}
}
/*********************************
*************** END *************/