@charset "UTF-8";
/* CSS Document */

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {font-family: "Oswald", sans-serif;}

.bgWH {background-color: #FFF;}
.bgGR {background-color: #5FB22B;}
.bgGRY {background-color: #EEEEEE;}
.txtWH {color: #FFF;}
.txtGR {color: #5FB22B;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratio1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratio2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratio3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratio4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

.logo {width: 536px;}

footer dt {margin-right: 20px;}
@media screen and (max-width: 896px) {
	footer .spbr {display: none;}
}
@media screen and (max-width: 568px) {
	footer .spbr {display: block;}
	footer dt,footer dd {width: 100%; margin-right: 0; text-align: center;}
}

.container {width: 100%; max-width: 1212px; padding-left: 0; padding-right: 0;}
.container,.containers {margin-left: auto; margin-right: auto;}
.col1,.col2,.col3,.col4,.col5,.col6 {margin-left: 20px; margin-right: 20px;}
.col1 {width: calc(16.6666% - 40px);}
.col2 {width: calc(33.3333% - 40px);}
.col3 {width: calc(50% - 40px);}
.col4 {width: calc(66.6666% - 40px);}
.col5 {width: calc(83.3333% - 40px);}
.col6 {width: calc(100% - 40px);}
.w100 {width: 100%;}
@media screen and (max-width: 896px) {
  .col1,.col2,.col3,.col4,.col5,.col6 {margin-left: 15px; margin-right: 15px;}
  .col1 {width: calc(16.6666% - 30px);}
  .col2 {width: calc(33.3333% - 30px);}
  .col3 {width: calc(50% - 30px);}
  .col4 {width: calc(66.6666% - 30px);}
  .col5 {width: calc(83.3333% - 30px);}
  .col6 {width: calc(100% - 30px);}
}
@media screen and (max-width: 568px) {
  .col1 {width: calc(33.3333% - 30px);}
  .col2,.col3,.col4,.col5,.col6 {width: calc(100% - 30px);}
}

ul.asterisk {margin-left: 1em;}
ul.asterisk li {list-style-type: none; text-indent: -1em;}
ul.asterisk li:before {display: inline; content: "※";}

.ttl {position: relative; display: inline-block; padding: 0 140px;}
.ttl::before,.ttl::after {position: absolute; content: ''; width: 120px; height: 4px; background: #222; border-radius: 2px; top: 50%; transform: translateY(-50%);}
.ttl::before {left: 0;}
.ttl::after {right: 0;}
.ttl.txtWH::before,.ttl.txtWH::after {background: #FFF;}
@media screen and (max-width:568px) {
	.ttl {padding: 0 70px;}
	.ttl::before,.ttl::after {width: 60px; height: 2px;}
}

.logo {width: 125px; margin: 60px 130px 30px 80px;}
#top01 .mainImg {width: calc(100% - 335px); height: 100vh;}
.comment {position: absolute; max-width: 582px; width: calc(100% - 80px); left: 80px; bottom: 8vh; z-index: 1;}
.comment .inlb {margin-bottom: 10px; padding-right: 20px; line-height: 1.4;}
.comment .inlb:nth-of-type(2) {padding-right: 0; margin-bottom: 5px;}
.small {font-size: 75%;}
.comment p {margin-top: 30px; padding: 20px;}

#top02 {background: url("../img/02-04.svg") no-repeat center bottom; background-size: 100% auto; padding-bottom: 30px;}
#top02 span.rlt {padding-left: 35px;}
#top02 span.rlt::before,#top02 span.rlt::after {position: absolute; content: ''; width: 30px; height: 50px;}
#top02 span.rlt::before {border-top: 2px solid #5FB22B; border-left: 2px solid #5FB22B; top: 0; left: 0;}
#top02 span.rlt::after {border-bottom: 2px solid #5FB22B; border-right: 2px solid #5FB22B; bottom: 0; right: 0;}
#top02 .inner {max-width: 1452px; width: 100%; margin: 0 auto;}
#top02 .mainImg {width: 32.4%; margin-right: 30px; margin-top: 68px;}
#top02 .txt {width: calc(67.6% - 30px);}
.date {margin-left: 40px;}
.date dt,.date dd {display: flex; align-items: center; justify-content: center;}
.date dt {width: 310px; padding: 40px 0; border-left: 10px solid #437B1F;}
.date dd {width: calc(100% - 310px); padding: 40px 20px;}
.campInfo {margin-top: -23px; align-items: flex-start;}
.campInfo dt {width: 29.3%; position: relative;}
.campInfo dt::before,.campInfo dt::after {position: absolute; content: ''; height: 8px; border-radius: 4px; background: #5FB22B; z-index: -1;}
.campInfo dt::before {width: 100px; transform: rotate(45deg); bottom: -5px; right: 33px;}
.campInfo dt::after {width: 100px; bottom: -38px; right: -47px;}
.campInfo dd {width: 77.5%; margin-left: -6.8%; margin-top: 90px; position: relative; z-index: 2;}

.targetItems {margin-top: -90px; position: relative; z-index: 3;}
.itemList,.itemClose {max-width: 768px; width: calc(100% - 80px); padding: 21px 20px 24px; margin: 0 auto; text-align: center; border: 2px solid #5FB22B; color: #5FB22B; border-radius: 50px; background: #FFF; position: relative; z-index: 1; cursor: pointer;}
.itemClose {background: #5FB22B; color: #FFF; position: absolute; bottom: -50px; left: 0; right: 0;}
.itemList:hover {background: #5FB22B; color: #FFF;}
.itemClose:hover {background: #FFF; color: #5FB22B;}
.itemList span,.itemClose span {padding-right: 40px; position: relative;}
.itemList span::before,.itemList span::after,.itemClose span::before {position: absolute; content: ''; background: #5FB22B; top: 50%; transform: translateY(-50%);}
.itemList:hover span::before,.itemList:hover span::after {background: #FFF;}
.itemClose span::before {background: #FFF;}
.itemClose:hover span::before {background: #5FB22B;}
.itemList span::before,.itemClose span::before {width: 30px; height: 2px; right: 0;}
.itemList span::after {width: 2px; height: 30px; right: 14px;}
.itemList.close span::after {content: none;}
.col6.close .itemList.close span::after {content: '';}
.item {display: none; padding: 100px 35px 70px; border: 2px solid #5FB22B; border-radius: 20px; background: #FFF; box-shadow: 0 0 5px rgba(0,0,0,.6); position: relative; margin-bottom: 50px;}
#top03 .item {margin-bottom: 80px;}
.item.open {display: block; margin-top: -50px;}
.item li {width: calc(20% - 30px); margin: 0 15px 30px;}
.item li p {border-top: 5px solid #222222; padding-top: 10px;}
#top03 .itemList,#top03 .itemClose {border-color: #FFF;}

.step li {margin: 0 15px 20px; text-align: left;}
.step li dt {width: 80px; border-radius: 8px; margin-right: 30px; line-height: 1; padding: 10px 0;}
.step li dt span {font-size: 50%; display: block;}
.step li .icon {width: 100px; margin-left: 20px;}
.btn {max-width: 768px; width: 100%; margin: 0 auto;}
.btn a {display: block; width: 100%; padding: 21px 20px 24px; background: #222222; border: 2px solid #222; color: #FFF; border-radius: 50px;}
.btn a:hover {background: #FFF; color: #222;}
.btn a span {padding-right: 40px; background: url("../img/03-02.svg") no-repeat right center;}
.btn a:hover span {padding-right: 40px; background: url("../img/03-03.svg") no-repeat right center;}

.txtBox {padding: 35px 40px 15px; border-radius: 10px;}
.txtBox dt {font-weight: 700; margin-bottom: 5px;}
.txtBox dd {margin-bottom: 20px;}
.txtBox dd span {display: block; width: calc(100% - 45px);}
.txtBox dd span.txt700 {width: 45px;}

@media screen and (max-width: 1300px) {
	.date {margin-left: 0;}
	.date dt {width: 210px; padding: 40px 20px;}
	.date dd {width: calc(100% - 210px);}
}
@media screen and (max-width: 1024px) {
	.logo {margin: 60px 60px 30px 60px;}
	#top01 .mainImg {width: calc(100% - 245px);}
	.comment {left: 60px;}
	#top02 .mainImg {width: 37.4%; margin-top: 0;}
	#top02 .txt {width: calc(62.6% - 30px);}
	.date dt,.date dd {padding: 20px 20px;}
	.campInfo dt::before,.campInfo dt::after {height: 5px; border-radius: 4px;}
	.campInfo dt::before {right: -7px;}
	.campInfo dt::after {content: none;}
	.campInfo dd {width: 83.5%; margin-left: -12.8%; margin-top: 70px;}
	.item {padding: 100px 15px 70px;}
}
@media screen and (max-height: 640px) {
	.logo {margin: 30px 60px 30px 60px;}
	.comment {bottom: 5vh;}
}
@media screen and (max-width: 896px) {
	.logo {width: 100px; margin: 30px;}
	#top01 .mainImg {width: calc(100% - 160px);}
	.comment {left: 20px;}
	#top01 h1 {width: 280px; font-size: 40px;}
	#top02 h2 {font-size: 40px;}
	#top02 span.rlt {padding: 5px 0 5px 25px;}
	#top02 span.rlt::before,#top02 span.rlt::after {position: absolute; content: ''; width: 20px; height: 30px;}
	.date dt,.date dd {width: 100%; text-align: left; justify-content: flex-start;}
	.date dt {padding: 10px 20px;}
	.date dd {font-size: 20px;}
	.campInfo {margin-top: -15px;}
	.campInfo dt {width: 150px;}
	.campInfo dd {width: calc(100% - 60px); margin-left: -90px; margin-top: 100px;}
	.item {padding: 60px 10px 50px;}
	.item.open {margin-top: -43px;}
	.item li {width: calc(25% - 20px); margin: 0 10px 20px;}
	.itemClose {bottom: -43px;}
	.step li .pcbr {display: block;}
	.step li dt {width: 56px; margin-right: 15px;}
	.step li .icon {width: 88px; margin-left: 10px;}
	.txtBox {padding: 20px;}
}
@media screen and (max-width: 735px) {
	.step li .pcbr {display: none;}
	.step li {margin: 0 0 20px; width: 100%; align-items: flex-end;}
	.step li dd {width: calc(100% - 71px);}
	.step li:last-child .txt {width: calc(100% - 75px);}
	.step li .icon {width: 65px;}
}
@media screen and (max-width: 725px) {
	#top02 .inner {flex-direction: column-reverse; padding-bottom: 100px;}
	#top02 .mainImg {width: 35%; margin-left: auto; position: absolute; z-index: 3; bottom: 0; right: 0; margin-right: 10px;}
	#top02 .txt {width: 100%;}
	.campInfo {flex-direction: row-reverse; margin-top: -100px;}
	.campInfo dt {width: 200px; margin-left: -50px;}
	.campInfo dt::before {transform: rotate(-45deg); right: 0; left: -10px;}
	.campInfo dd {width: calc(100% - 170px); margin-right: auto; margin-top: 110px; margin-left: inherit; position: relative; z-index: 3;}
}
@media screen and (max-width: 600px) {
	#top02 h2 {font-size: 30px;}
}
@media screen and (max-width:568px) {
	.logo {width: 60px; margin: 15px auto;}
	#top01 .mainImg {width: 100%; height: calc(100vh - 68px); padding-bottom: 120px;}
	.comment {left: 0; width: 100%; bottom: 0;}
	.comment p {margin-top: 10px;}
	#top01 h1 {width: 280px; font-size: 34px; margin-left: 20px;}
	.comment .inlb {margin-bottom: 5px; padding-right: 0;}
	#top02 .mainImg {margin-right: 0;}
	.campInfo {margin-top: -50px;}
	.campInfo dt {width: 150px; margin-left: -65px; z-index: 4;}
	.campInfo dt::before {content: none;}
	.campInfo dd {width: calc(100% - 85px); margin-top: 70px;}
	.targetItems {margin-top: -40px;}
	.itemList,.itemClose {width: calc(100% - 40px); padding: 11px 20px 14px;}
	.itemList span,.itemClose span {padding-right: 30px; position: relative;}
	.itemList span::before,.itemClose span::before {width: 20px;}
	.itemList span::after {height: 20px; right: 9px;}
	.item {border-radius: 10px;}
	.item.open {margin-top: -33px;}
	.item li {width: calc(100%/3 - 10px); margin: 0 5px 20px;}
	.item li p {padding-top: 0; font-size: 14px; border-top: 3px solid #222;}
	.itemClose {bottom: -33px;}
	.item {padding: 50px 10px 30px;}
	.btn a {padding: 11px 10px 14px;}
	.btn a span {padding-right: 30px; background-size: 20px;}
	.btn a:hover span {padding-right: 30px; background-size: 20px;}
}
@media screen and (max-width: 450px) {
	#top02 h2 {font-size: 6.2vw;}
	#top02 span.rlt {padding: 5px 5px 5px 20px;}
}