/*------------------------------------------------------------------------------
 * PC
------------------------------------------------------------------------------*/


@media screen and (min-width:860px) {

	main{
		padding-bottom: 120px;
	}

	/*---------------------------------------
	 * ヘッダー
	---------------------------------------*/

	.page-head{
		width: 100%;
		padding: 70px 0;
		text-align: center;
	}
	.page-head .sub-title{
		font-size: 16px;
		letter-spacing: 1px;
		font-weight: 200;
		color: #6da591;
		margin-bottom: 5px;
		line-height: 1;
	}
	.page-head .title{
		font-size: 30px;
		letter-spacing: .1em;
		margin-bottom: 5px;
	}

	/*---------------------------------------
	 * 概要
	---------------------------------------*/
	main .about {
		width: 90%;
		max-width: 1100px;
		margin: 0 auto 80px;
	}
	main .about figure {
		margin-bottom: 60px;
	}
	main .about h3,
	main .about .note p{
		text-align: center;
	}
	main .about h3{
		font-size: 25px;
		letter-spacing: .1em;
	}
	main .about .note{
		margin: 20px 0 50px;
	}

	/*================================
        Chapter
    ================================*/

	main .chapter {
		margin-bottom: 100px;
	}
	main .chapter:last-child {
		margin-bottom: 0;
	}
	main .chapter:nth-of-type(even) {
		background:#f9f9f9;
	}
	main .chapter .inner {
		display:flex;
		justify-content: space-between;
		align-items:center;
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
	}
	main .chapter .inner>figure{
		width: 50%;
	}
	main .chapter .inner>.details{
		width: calc(50% - 100px);
	}
	main .chapter .inner .slick-slide{
		padding-right:6px;
	}
	main .chapter .inner .slick-dots{
		text-align:left !important;
	}
	main .chapter .inner .slick-dots li{
		margin: 0 13px 0 0 !important;
	}
	main .chapter .inner h4{
		margin-bottom: 50px;
		color: #999;
	}
	main .chapter .inner h4 span{
		display: block;
		font-family: 'Quattrocento', serif !important;
		font-weight: normal;
		font-size: 30px;
		letter-spacing: .1em;
		color: #333;
	}
	main .chapter .inner .more a{
		display: block;
		background: #189a6f;
		max-width: 300px;
		margin-top: 2rem;
		padding: 1rem;
		text-align: center;
		font-size: 12px;
		color: #fff;
		position: relative;
	}
	main .chapter .inner .more a::before{
		content:"";
		display: block;
		border: 3px solid transparent;
		border-left: 3px solid #fff;
		position:absolute;
		left:15px;top:50%;
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		transform:translateY(-50%);
	}
	main .chapter:nth-of-type(even) .inner>figure{
		order:2;
	}

}

/*------------------------------------------------------------------------------
 * SP
------------------------------------------------------------------------------*/

@media screen and (max-width:859px) {

	main{
		padding-bottom: 60px;
		overflow: hidden;
	}

	/*---------------------------------------
	 * ヘッダー
	---------------------------------------*/

	.page-head{
		width: 100%;
		padding: 35px 0;
		text-align: center;
	}
	.page-head .sub-title{
		font-size: 15px;
		letter-spacing: 1px;
		font-weight: 200;
		color: #6da591;
		margin-bottom: 13px;
		line-height: 1;
	}
	.page-head .title{
		font-size: 20px;
		letter-spacing: .1em;
		margin-bottom: 5px;
	}

	/*---------------------------------------
	 * 概要
	---------------------------------------*/
	main .about {
		margin-bottom: 50px;
	}
	main .about figure {
		margin-bottom: 35px;
	}
	main .about h3,
	main .about .note p{
		padding-left: 5%;padding-right: 5%;
		line-height: 1.8;
	}
	main .about h3{
		margin-bottom: 20px;
		font-size: 20px;
	}

	/*================================
        Chapter
    ================================*/
	main .chapter{
		margin-bottom: 70px;
	}
	main .chapter:last-child{
		margin-bottom: 0;
	}
	main .chapter .inner>figure{
		margin-bottom: 30px;
	}
	.photolist{
		width:calc(100% + 6px);
		margin-left: -3px;
	}
	.slick-slide{
		padding: 0 3px;
	}
	main .chapter .inner .slick-dots{
		text-align:left !important;
		padding-left: calc(5% + 3px);
	}
	main .chapter .inner .slick-dots li{
		margin: 0 13px 0 0 !important;
	}
	main .chapter .inner h4{
		margin-bottom: 30px;
		padding: 0 5%;
		font-size: 12px;
		color: #999;
	}
	main .chapter .inner h4 span{
		display: block;
		font-family: 'Quattrocento', serif !important;
		font-weight: normal;
		font-size: 20px;
		letter-spacing: .1em;
		color: #333;
	}
	main .chapter .inner .more a{
		display: block;
		width: 90%;
		background: #189a6f;
		margin: 20px auto 0;
		padding: 15px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		position: relative;
	}
	main .chapter .inner .more a::before{
		content:"";
		display: block;
		border: 3px solid transparent;
		border-left: 3px solid #fff;
		position:absolute;
		left:15px;top:50%;
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		transform:translateY(-50%);
	}
	main .chapter .inner:nth-of-type(even) .details{
		-webkit-order:-2;
		order:-2;
	}

	footer{
		position: relative;
		margin-top: -1px;
		z-index: 500;
	}

}