@charset "utf-8";
/* supporters css */

.images_wrap img{
	width:100%;
	height: auto;
}

#supporters_wrap img{ max-width:100%; }

/* 下層ページのメニュー */
#supporters_wrap #lpage-menu_wrap { margin-bottom: 0; }
#supporters_wrap #lpage-menu { justify-content: center; }
#supporters #lpage-menu li:first-of-type { margin-right: 8rem; }


/*=========================================
		FIRST-AREA
=========================================*/
#first-area{
	text-align: center;
	padding-top: 3rem;
}
#first-area .message02_inner {
	background: url(../img/supporters/bg-supporters01.jpg) no-repeat center / cover;    
	height: 0;
    position: relative;
    z-index: 1;
}
#first-area .message02 h2,
#first-area .message02 h3 {
	color:#231916;
}
#first-area .message02 h3 {
	font-family: inherit;
	font-size:4vw;
	font-weight:700;
	padding-top: 3vw;
	padding-bottom: 5vw;
	color: #231815;
	text-shadow: 0.1rem 0.1rem 1rem #FFF, -0.1rem -0.1rem 1rem #FFF,
	-0.1rem 0.1rem 1rem #FFF, 0.1rem -0.1rem 1rem #FFF,
	0px 0.1rem 1rem #FFF,  0 -0.1rem 1rem #FFF,
	-0.1rem 0 1rem #FFF, 0.1rem 0 1rem #FFF;
}
#first-area .message02 .txt-bottom {
	line-height: 2;
    font-weight: bold;
    color: #231815;
    text-shadow: 0.1rem 0.1rem 1rem #FFF, -0.1rem -0.1rem 1rem #FFF, -0.1rem 0.1rem 1rem #FFF, 0.1rem -0.1rem 1rem #FFF, 0px 0.1rem 1rem #FFF, 0 -0.1rem 1rem #FFF, -0.1rem 0 1rem #FFF, 0.1rem 0 1rem #FFF;
    background: #70964e;
    position: relative;
    z-index: 1;
}
#first-area .message02_inner:before {
    content: "";
    display: block;
    width: 100%;
    background: linear-gradient(180deg, rgba(3, 172, 198, 0) 0%, rgb(3 172 198 / 0%) 20%, hsl(188deg 100% 39% / 0%) 40%, hsl(188 106% 40% / 1) 60%, rgb(167 217 228 / 0%));
    position: absolute;
    height: 17rem;
    top: -10rem;
    left: 0;
    z-index: -1;
}
#first-area .txt-bottom:before {
    content: "";
    display: block;
    width: 100%;
    background: linear-gradient(180deg, rgba(112, 150, 78, 0.25), rgba(112, 150, 78, 1));
    position: absolute;
    left: 0;
	z-index: -1;
}

/*=========================================
		SUPPORT-LINK-AREA
=========================================*/
section.support-link-area{
	background:#fff;
	padding:7rem 0;
}
section.support-link-area .box {
	border:5px solid #231916;
	padding:2.5rem;
	text-align:center;
	width:70%;
	margin: 0 auto;
}
section.support-link-area .box h3,
section.support-link-area .box p {
	font-family:inherit;
	font-size:2rem;
	font-weight: bold;
	color: #231815;
}
section.support-link-area .box > a{
	background: #231916;
	width: 30%;
	padding: 1rem 3rem;
	color: #fff;
	display: inline-block;
	font-size: 2rem;
	margin-top: 1rem;
}

section.support-link-area:nth-last-child(1){
	padding-top:10rem;
}


/*=========================================
		SECOND-AREA
=========================================*/
#second-area{
	background:#fff;
	padding:7rem;
	border-top:0.1rem solid #231916;
	border-bottom:0.1rem solid #231916;
}
#second-area .message02_inner{
	max-width:1600px;
	margin:0 auto;
}

#second-area .images_wrap{
	display: flex;
	gap: 1rem;
}
#second-area .images_wrap .image_box{
	width:33%;
	text-align:center;
}
#second-area .images_wrap img{
	width:100%;
	height: auto;
}

#second-area .message01{
	padding:3rem 0;
	color:#231916;
	width: 80%;
	margin: 0 auto;
}
#second-area .message01 h3{
	font-weight:bold;
	font-family:inherit;
	text-align:center;
	margin-bottom:1rem;
}
#second-area .message01 p{
	text-indent:1em;
	line-height:2;
	font-weight: bold;
}
#second-area .message01 p.representative{
	margin-top:1em;
	margin-bottom:1rem;
}

/*=========================================
		THIRD-AREA
=========================================*/
#third-area{
	background:#fff;
	color:#231916;
	padding:3rem;
	padding-bottom:0;
	text-align:center;
}
#third-area h3{
	font-family:inherit;
	font-weight:bold;
	margin-bottom:1rem;
}
#third-area .about_supporters{
	padding-bottom: 2.5rem;
	border-bottom: 0.1rem solid #000;
}
#third-area .about_supporters p{
	font-weight:bold;
	margin-bottom:2rem;
}
#third-area .limited_goods h2{
	margin-top: 8rem;
	font-size: 3rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 5rem;
}
#third-area .limited_goods .images_wrap {
    width: 100%;
}
#third-area .limited_goods dt{
	font-weight: bold;
}
#third-area .limited_goods dt p{
	font-size: 2rem;
}
#third-area .limited_goods .col-2_wrap {
	display: flex;
}
#third-area .limited_goods .col-2_wrap li {
    width: calc(50% - 2rem);
}
#third-area .limited_goods .col-2_wrap li:first-of-type {
	margin-right: 4rem;
}
#third-area .supporters_course {
	display: flex;		
	margin: 0 auto;
	flex-wrap: wrap;
}
#third-area .supporters_course .course_box{
	border: 3px solid;
}
#third-area .supporters_course .course_box > h4{
	color:#fff;
	font-weight:bold;
	font-size:2.7rem;
	line-height:1.2;
	padding:1.5rem 0;
}
#third-area .supporters_course .course_box > h4 span.type_name{
	font-size:110%;
	padding-right: 0.3rem;
}

#third-area dl.course_price > dt,
#third-area dl.course_tokuten > dt{
	font-size: 2.3rem;
}
#third-area dl.course_price{
	font-weight:bold;
	margin: 1rem 0;
}
#third-area dl.course_price > dd{
	font-size:2.3rem;
	line-height: 1;
	border-bottom: 1.7rem solid #000;
	padding-bottom: 1rem;
}
#third-area dl.course_price > dd .price_value{
	font-size:5rem;
	vertical-align: -2%;
	padding-right: 0.3rem;
}
#third-area dl.course_tokuten{
	padding:1.5rem;
}
#third-area dl.course_tokuten > dt{
	font-weight:bold;
	margin-bottom:1rem;
}

#third-area .supporters_course .course_box{
	width:100%;
}
#third-area .supporters_course .course_box ul.goods_icon{
	display: flex;
	grid-gap: 2rem;
	justify-content: center;
	margin-bottom: 15%;
	align-items: flex-start;
	width: 100%;
	flex-wrap: wrap;
}
#third-area .supporters_course .course_box ul.goods_icon li {
	display: flex;
    flex-direction: column;
	width:calc(100% / 3 - 2rem);
}
#third-area .supporters_course .course_box ul.goods_icon li img{
	max-width:100%;
	border: 1px solid #000;
}
#third-area .supporters_course .course_box p.small_attention{
	font-size:1.2rem;
	margin-top:0.5rem;
}


#third-area .supporters_course .course01 > h4{
	background-color:#179bb4;
}
#third-area .supporters_course .course01 dl.course_price > dd{
	border-bottom-color:#179bb4;
}

#third-area .supporters_course .course02{
	border-color:#a98a4b;
}
#third-area .supporters_course .course02 > h4 {
	background-color:#a98a4b;
}
#third-area .supporters_course .course02 dl.course_price > dd{
	border-bottom-color:#a98a4b;
}

#third-area .supporters_course .course03{
	border-color:#9fa0a0;
}
#third-area .supporters_course .course03 > h4 {
	background-color:#9fa0a0;
}
#third-area .supporters_course .course03 dl.course_price > dd{
	border-bottom-color:#9fa0a0;
}

#third-area .supporters_course .course04{
	border-color:#804f22;
}
#third-area .supporters_course .course04 > h4 {
	background-color:#804f22;
}
#third-area .supporters_course .course04 dl.course_price > dd{
	border-bottom-color:#804f22;
}

#third-area .supporters_course .course05{
	border-color:#172a4f;
}
#third-area .supporters_course .course05 > h4 {
	background-color:#172a4f;
}
#third-area .supporters_course .course05 dl.course_price > dd{
	border-bottom-color:#172a4f;
}

#third-area .supporters_course .course06 > h4{
	background-color:#f39800;
}
#third-area .supporters_course .course06 dl.course_price > dd{
	border-bottom-color:#f39800;
}

@media screen and (min-width:1300px) {	
	/*=========================================
			FIRST-AREA
	=========================================*/
	#first-area .message02 h2{
		font-size:4.5vw;
	}
	#first-area .message02 h3{
		font-size:3.2vw;
	}
	#first-area .message02 .txt-bottom{
		font-size:1.2vw;
	}
}


@media screen and (min-width: 768px) {
	/*=========================================
			FIRST-AREA
	=========================================*/
	#first-area .message02_inner {
		padding-bottom: 66.685%;
	}
	#first-area .message02 .txt-bottom {
		padding: 0 2rem 6rem;
		margin-top: -9rem;
	}
	#first-area .txt-bottom:before {
		top: -5rem;
		height: 5rem;		
	}

	/*=========================================
			SECOND-AREA
	=========================================*/
	#second-area .images_wrap .image_box{
		width:calc(50% - 0.1rem);
	}
	
	/*=========================================
			THIRD-AREA
	=========================================*/
	#third-area .limited_goods {
		width: 100%;
		max-width: 134rem;
		margin: 0 auto;
		padding: 0 3rem;
		text-align: center;
	}
	#third-area .limited_goods h2{
		font-size: 5rem;
	}
	#third-area .limited_goods03 {
		max-width: 100rem;
		margin: 0 auto;
		padding: 0 8rem;
	}
	#third-area .limited_goods04 {
		max-width: 46.4rem;
		margin: 0 auto;
	}
	#third-area .limited_goods05 {
		max-width: 38rem;
		margin: 0 auto;
	}
	#third-area .limited_goods dl {
		margin-bottom:10rem;
	}
	#third-area .limited_goods dt {
		font-size: 2.4rem;
		margin-bottom: 4rem;
	}
	#third-area .limited_goods .col-2_wrap {
		margin-bottom: 12rem;
	}
	#third-area .supporters_course {
		width: 80%;
		grid-gap: 3rem;
		justify-content: space-around;
	}
	#third-area .supporters_course .course_box{
		width:calc((100% / 2) - 2rem);
	}
	#third-area .supporters_course .course_box ul.goods_icon span {
		font-size: 1.5rem;
		line-height: 1.2;
		margin-top: 0.4rem;
	}
	#third-area .supporters_course .course_box ul.goods_icon{
	}
}



@media screen and (max-width: 767px) {
	/*=========================================
			FIRST-AREA
	=========================================*/
	#first-area .message01{ 
		background:#fff;
		padding: 1rem;
		text-align: left;
	}
	#first-area .message01 h2{
		width: 85%;
		max-width: 50rem;
		margin-top: 1rem;
		max-height:calc((1600 / 134) * 0.6vw);
	}
	#first-area .message01 p{
		font-size:inherit;
		line-height:1.7;
	}
	#first-area .message02{
		height:auto;
		background-size:contain;		
		margin-top: 8rem;
	}
	#first-area .message02_inner {
		padding-bottom: 82.685%;
	}
	#first-area .message02 .txt-bottom {
		padding: 0 2rem 2rem;
		margin-top: -2rem;
	}
	#first-area .message02:before{
		height: 20rem;
		top: 0;
	}
	#first-area .txt-bottom:before {
		top: -2rem;
		height: 2rem;
	}
	#first-area .message02:after{
		background: linear-gradient(180deg, rgb(240 166 138 / 0%), 5%, hsl(17 74% 69% / 1) 12%, hsl(12 70% 69% / 1) 100%);
		height: 75vw;
	}
	#first-area .message02 h2{
		font-size: 9vw;
		line-height: 1.1;
		padding: 0 2%;
	}
	#first-area .message02 h3{
		font-size: 4.5vw;
		line-height: 1.5;
		width: 100%;
		position: absolute;
        top: -8rem;
        padding: 0 1rem;
	}
	#first-area .message02 .txt-bottom{
        line-height: 1.6;
        text-align: left;
	}
	#first-area .message02 .txt-bottom p{
		margin: 0 auto;
	}

	/*=========================================
			SUPPORT-LINK-AREA
	=========================================*/
	section.support-link-area{
		padding: 3rem 0;
	}
	section.support-link-area .box{
		width:calc( 100% - 4rem );
	}
	section.support-link-area .box h3,
	section.support-link-area .box p{
		font-size: inherit;
	}
	section.support-link-area .box p{
		text-align:left;
	}
	section.support-link-area .box > a{
		width:100%;
	}

	/*=========================================
			SECOND-AREA
	=========================================*/
	#second-area{
		padding:3rem 0;
	}
	#second-area .images_wrap{
		gap:1rem;
		flex-wrap: wrap;
		justify-content: center;
	}
	#second-area .images_wrap .image_box{
		width:calc(50% - (5rem / 2))
	}
	#second-area .images_wrap .image_box:nth-of-type(1){
		width:calc(100% - 4rem);
	}
	#second-area .message01{
		padding:2rem;
		width:100%;
	}
	#second-area .message01 h3{
		margin-bottom:1rem;
	}

	/*=========================================
			THIRD-AREA
	=========================================*/
	#third-area{
		padding: 3rem 2rem 0;
	}
	#third-area h3{
		font-size: 2.5rem;
		line-height: 1.5;
		margin-bottom:1rem;
	}
	#third-area .about_supporters p{
		text-align:left;
		margin-bottom: 0.5rem;
	}

	#third-area .supporters_course .course_box > h4{
		font-size: 4.7vw;
	}
	#third-area dl.course_price{
		margin:0;
	}
	#third-area dl.course_price > dd .price_value{
		font-size: 4rem;
	}

	#third-area dl.course_tokuten > dt{
		margin-bottom:0;
	}
	#third-area .limited_goods03 {
		padding: 0 3.6rem;
	}
	#third-area .limited_goods05 {
		padding: 0 1.5rem;
		margin: 0 auto;
	}
	#third-area .limited_goods dl {
		margin-top:3rem;
		margin-bottom:3rem;	
	}
	#third-area .limited_goods > dl:first-of-type {
		margin-top: 3rem;
	}
	#third-area .limited_goods dt {
		font-size: 1.8rem;
		margin-bottom: 1.4rem;
	}
	#third-area .limited_goods .col-2_wrap {
		margin-bottom: 8rem;
	}
	#third-area .supporters_course {
		grid-gap: 2rem;
	}
	#third-area .supporters_course .course_box ul.goods_icon {
		display: flex;
		margin: 1rem 0 2.5rem;
		flex-wrap: wrap;
		grid-gap: 1rem;
		justify-content: center;
	}
}



@media screen and (max-width: 480px) {
	/*=========================================
			FIRST-AREA
	=========================================*/
	#first-area .message01 h2{
		width:100%;
	}
	#first-area .message02 h3{
		font-size: 6vw;
	}
}