
.txt-c {text-align: center;}
.txt-r {text-align: right;}
.txt-l {text-align: left;}
.b { font-weight: 900; }
.fnt-s { font-size: 80%;}
.fnt-m { font-size: 100%;}
.fnt-l { font-size: 128%;}

ul.check { position: relative; margin: 3rem 0; border-top: solid 2px #C3D60B; border-bottom: solid 2px #C3D60B; padding: 0.5em 1em 0.5em 2.3em; position: relative; font-weight: 900;}
ul.check:before { padding: 0.5rem 1rem; position: absolute; top: -32px; left: 15px; content: 'まとめ'; background: #C3D60B; color: #FFF; border-top-left-radius: 5px; border-top-right-radius: 5px;}
ul.check li { line-height: 1.5; padding: 0.5em 0; list-style-type: none!important;}
ul.check li:before { font-family: "FontAwesome"; content: "\f00c"; position: absolute; left : 1em; color: #65A03C;}
ul.example { margin-bottom: 2rem; padding: 0.5em 1em 0.5em 2.3em; position: relative; font-weight: 900;}
ul.example li { line-height: 1.5; padding: 0.5em 0; list-style-type: none!important;}
ul.example li:before { font-family: "FontAwesome"; content: "\f06c"; position: absolute; left : 1em; color: #C3D60B;}
.contents h4 { margin: 1rem 0 2rem; text-align: center; font-size: 20px; color: #65A03C; line-height: 2;}
.contents h4 span { display: block; font-size: 16px;}
.comment { padding: 2rem 1rem 1rem;}
.comment i { margin-right: 0.5rem; font-size: 2rem; color: #fff001;}
.comment .customer { font-size: 0.9rem; color: #999; text-align: right;}
.comment .customer span { color: #C3D60B; margin-right: 0.5rem; font-weight: 900;}
img[src$="hr_dot.png"] { width: 145px!important;}

.contents .inquiry { margin: 2rem 0; padding: 1rem; border: 2px dashed #DDDDDD; border-radius: 5px;}
.contents .inquiry a { color: #65A03C;}
.contents .inquiry i { margin-right: 0.5rem;}

* { transition: all .3s ease-in-out;}

.file.wrapper { max-width: 100%!important;}
.mission-challenge-banner { margin-bottom: 0!important;}
.mission-challenge-banner img { max-width: 100%;}

.to-canpaign { margin-bottom: 2em!important;}
.to-canpaign a { display: block; width: 480px; margin: auto; padding: 0.2em 0; color: #29c7ef; border-bottom: 3px dashed #29c7ef; text-align: center; font-size: 2em; font-weight: 900; font-family: "メイリオ", "Meiryo", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro";}
.to-canpaign a:hover { border-bottom: 3px dashed #FFFFFF;}

.contents { margin-bottom: 2em; padding: 2em 10px; border-top: 3px solid #29c7ef; font-family: "メイリオ", "Meiryo", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro";}
.contents.last { border-bottom: 3px solid #29c7ef;}
.contents * { box-sizing: border-box;}
.contents h2,.contents h3 { margin: 1rem 0 2rem; font-weight: 900;}
.contents img { vertical-align: middle; height: 100%;}
.contents p { margin-bottom: 1em; line-height: 1.6em;}
.contents .info { display: flex; margin-bottom: 2em;}
.contents .info dl { width: 100%; padding: 1em;}
.contents .info dt { width: 7em; padding:0.5em 0 1em; float: left; clear: left;}
.contents .info dd { width: calc(100% - 7em); margin: 0 0 0.5em 0; padding: 0.5em 0 1em; float: left; border-bottom: 1px solid #EFEFEF;}
.contents .info dd:last-child { border: none;}
.contents .info dd ul { list-style-position: inside;}
.contents .info dd ul li {margin-bottom: 1rem;}
.contents .info dd p { line-height: 1em; margin-bottom: 0;}
.contents .point { max-width: 100%; display: flex; flex-wrap: wrap;}
.contents .point dl { width: 19%; margin: 0.5%; font-size: 80%; line-height: 1.3em; letter-spacing: 0.1em; border: 3px solid #fff001; overflow: hidden;}
.contents .point dd { height: 100%; padding: 0.5em; margin-bottom: 1.5rem; background: #EFEFEF; border-bottom: 1px solid #EFEFEF;}
.contents a.btn { display: block; color: #29c7ef; padding: 10px; font-weight: 700; border: 4px solid #29c7ef; border-radius: 30px; position: relative; width: 100%; max-width: 640px; letter-spacing: 0.3em; text-align: center;}
.contents a.btn:after { content: ''; display: block; border-top: 4px solid #29c7ef; border-right: 4px solid #29c7ef; width: 14px; height: 14px; transform: rotate(45deg); position: absolute; right: 17px; top: 27%; z-index: 9999;}
.contents a.btn:hover { background: rgba(41,199,239,0.5); color: #FFFFFF;}
.contents a.btn:hover:after { border-top: 4px solid #FFFFFF; border-right: 4px solid #FFFFFF; right: 14px;}
.contents .mission-challenge { margin: 1.5em 0;}
.contents .mission-challenge a.btn { margin: auto; }
.contents .mission-challenge a.btn:after { top: 30%;}


.header_5years {
	background: #FFF000;
}
.header_5years img {
	display: block;
	margin: auto;
}
.challenge_title {
	position: relative;
	padding: 1em;
	margin-bottom: 3rem!important;
	color: #65A03C;
	line-height: 1.7rem;
	text-align: center;
	background: #FFF000;
	transform: rotate(-1deg) skew(-1deg);
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2), 0.7em 0 0 0 #FFEE58, -0.7em 0 0 0 #FFEE58;
}

.challenge_title_sub {
	display: inline-block;
	padding: 0.5em;
	background-color: rgba(255,255,255,0);
	border-left: 2px dotted rgba(0,0,0,0.1);
	border-right: 2px dotted rgba(0,0,0,0.1);
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.challenge_title_sub img{
	margin-right: 0.5rem;
}

.challenge_price {
	margin: 1.5rem 0 2rem;
	font-size: 1.2rem;
	line-height: 2rem;
}

.challenge_price dt {
	font-weight: 900;
}


.challenge_rule {
	position: relative;
	margin: 2rem 1rem 2rem;
	padding: 1rem 1rem 0;
	font-size: 1.2rem;
	line-height: 2rem;
	border: 5px solid #FFF000;
	border-radius: 10px;
}
.challenge_rule dt {
	font-weight: 900;
}
.challenge_rule dd {
	margin-bottom: 1rem;
}
.challenge_rule:before {
    content: '';
    height: 30px;
    width: 30px;
    display: block;
    background: #65A03C;
    box-shadow: 0 0 5px rgba(255,255,255,.3) inset;
    -box-shadow: 0 0 5px rgba(255,255,255,.3) inset;
    -webkit-box-shadow: 0 0 5px rgba(255,255,255,.3) inset;
    -moz-box-shadow: 0 0 5px rgba(255,255,255,.3) inset;
    position: absolute;
    top: -15px;
    left: -5px;
    transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
}

.challenge_rule:after {
    content: '';
    height: 26px;
    width: 18px;
    display: block;
    background: #C3D60B;
    box-shadow: 0 0 5px rgba(255,255,255,.3) inset;
    -box-shadow: 0 0 5px rgba(255,255,255,.3) inset;
    -webkit-box-shadow: 0 0 5px rgba(255,255,255,.3) inset;
    -moz-box-shadow: 0 0 5px rgba(255,255,255,.3) inset;
    position: absolute;
    top: 10px;
    left: -13px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-75deg);
}

.challenge_rule_photo {
	display: flex;
	margin-bottom: 2em;
	justify-content: space-between;
}
.challenge_rule_photo div.flex-child {
	width: 47.5%;
}
.challenge_rule_photo div.flex-child img {
	width: 100%;
	height: auto;
	box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}

.more {
    width: 80px;
    height: 40px;
    padding: 12px 0;
    display: block;
    border-radius: 50%;
    margin: -35px 0 0.5em -10px;
    color: #FFF000;
    background: #9ac937;
    font-size: 14px;
    line-height: 1em;
    text-align: center;
    transform: rotate(-15deg);
    position: relative;
    letter-spacing: 0;
}

.more:after {
    position: absolute;
    content: " ";
    height: 0;
    width: 0;
    top: 93%;
    left: 50%;
    border: 6px solid transparent;
    border-top: 10px solid #9ac937;
    margin-left: -6px;
}

.point {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.point .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.point p {
    margin: 0; 
    padding: 0;
}



@media only screen and (max-width: 1024px) {
	.contents img { width: 100%; height: 100%;}
	.contents .challenge_rule_photo { flex-direction: column;}
	.challenge_rule_photo div.flex-child { width: 100%;}
	.challenge_title_sub img { max-width: 60px;}
}

@media screen and (max-width: 619px){
	.to-canpaign a { width: 85%; font-size: 1.3em; }
	.contents img { width: 100%;}
	.contents .challenge_rule_photo { flex-direction: column;}
	.challenge_rule_photo div.flex-child { width: 100%;}
	.challenge_title_sub img { max-width: 60px;}
}
