@charset "UTF-8";
/*--------------------------------------------------------------
p
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	p {
		font-size: 14px;
		line-height: 24px;
	}
	
	h2 {
		font-size: 18px;
		font-weight: 600;
		text-align: center;
	}
	
	.blue {
		color: #4A64AA;
	}
}

/* Small than tablet */
@media (min-width: 768px) {

}


/* Larger than tablet */
@media (min-width: 992px) {	
	p {
		font-size: 15px;
	}
	
	h2 {
		font-size: 22px;
		font-weight: 600;
		text-align: center;
	}
}

/*--------------------------------------------------------------
.title_area(カテゴリーページ共通パーツです)
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.title_area {
		margin: 0;
		padding: 0;
		height: 205px;
		width: 100%;
		background: url("img/gojokai_sp.png") no-repeat;/*ページごとに変更する*/
		background-position: center;
		background-size: cover;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		position: relative;
	}
	
	.title_area h2 {
		margin-top: 25px;
		color: #fff;
		font-size: 20px;
		font-weight: 700;
		text-align: center;
	}
	
	.cat_title h2 span {
		padding: 0 0 5px;
		border-bottom: 1px solid #fff;
	}
	
	.box-area {
		width: 355px;
		height: 222px;
		padding: 10px;
		margin: 0 10px 25px;
		position: absolute;
		top: 112px;
		background: #fff;
		border-radius: 10px;
		font-size: 15px;
		font-weight: 600;
	}
	
	.box-area dl {
		padding: 5px 0;
		border-bottom: 1px solid #B5B5B5;
	}
	
	.box-area dl:last-child {
		border-bottom: none;
	}
	
	.box-area dl dt {
		margin-right: 10px;
	}
	
	.box-area dl dt,
	.box-area dl dd {
		display: inline-block;
		vertical-align: top;
	}
	
	.box-area dl {
		margin-right: 15px;
	}
	
	.box-area dl dd span {
		color: #DB6F6B;
	}

}

/* Small than tablet */
@media (min-width: 768px) {
	

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.title_area {
		height: 366px;
		background: url("img/gojokai_pc.png") no-repeat;
		background-position: center;
		background-size: cover;
	}
	
	.title_area h2 {
		margin-top: 90px;
		font-size: 25px;
	}
	
	.box-area {
		width: 800px;
		height: 295px;
		padding: 15px 50px 35px;
		margin-bottom: 25px;
		top: 191px;
		font-size: 18px;
		font-weight: 600;
	}
	
	.box-area dl {
		padding: 10px 0;
	}
	
	.box-area dl:last-child {
		border-bottom: 1px solid #B5B5B5;
	}
}

/*↑↑ここまで共通↑↑*/


/*--------------------------------------------------------------
↓↓ここからコンテンツ↓↓
--------------------------------------------------------------*/


/* mobile */
@media (min-width: 300px) {
	.content {
		width: 100%;
		background: #F8F8F8;
		margin: 0;
		padding: 15px 0 23px;
	}
	
	.content-wrap {
		margin: 0;
		padding: 0;
	}
	
	.cansel-note {
		margin: 152px 20px 30px;
	}
	
	.cansel-note p {
		font-size: 11px;
	}
	
	p.right {
		margin: 0;
		float: right;
	}


}

/* Small than tablet */
@media (min-width: 768px) {
	.cansel-note {
		width: 500px;
		margin:  152px auto 30px;
	}
}


/* Larger than tablet */
@media (min-width: 992px) {
	.content {
		margin: 0;
		padding: 145px 0 62px;
	}
	
	.cansel-note {
		width: 700px;
		margin: 0 auto 75px;
		font-size: 12px;
	}
	
	.cansel-note p {
		font-size: 12px;
	}
}

/*--------------------------------------------------------------
.reserve
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.reserve {
		width: 100%;
		margin: 0 auto 40px;
	}
	
	.reserve .blue {
		width: 326px;
		padding: 12px 19px;
		margin: 0 auto 18px;
		background: #4A64AA;
		text-align: center;
		font-weight: 600;
		color: #fff;
		border-radius: 30px;
		font-size: 16px;
	}
	
	.reserve h2 {
		margin-bottom: 20px;
	}
	
	.reserve .img-area {
		width: 100%;
		margin-bottom: 25px;
	}
	
	.reserve p {
		padding: 0 20px;
		float: right;
	}
}

/* Small than tablet */
@media (min-width: 768px) {

}


/* Larger than tablet */
@media (min-width: 992px) {
	.reserve {
		width: 900px;
		margin: 0 auto 45px;
	}
	
	.reserve .blue {
		width: 477px;
		padding: 9px 35px;
		margin: 0 auto 18px;
		font-size: 22px;
	}
	
	.reserve h2 {
		margin-bottom: 20px;
		font-size: 22px;
	}
	
	.reserve .img-area {
		width: 370px;
		margin-right: 40px;
		float: left;
	}
	
	.reserve p {
		width: 490px;
		float: right;
	}
	
}

/*--------------------------------------------------------------
.need
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.need {
		padding: 30px 16px;
		margin-bottom: 30px;
		background: #E4E9F0;
	}
	
	.need h2 {
		margin-bottom: 24px;
	}
	
	.need ul {
		max-width: 825px;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	
	.need ul li {
		width: calc(100%/3);
		font-size: 13px;
		font-weight: 600;
		text-align: center;
		float: left;
	}
	
	.need ul li:last-child {
		margin: 0;
	}
	
	.need ul li img {
		padding: 0 5px;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	.need p {
		width: 500px;
		margin: 0 auto;
	}
}


/* Larger than tablet */
@media (min-width: 992px) {	
	.need {
		padding: 60px 0 50px;
	}
	
	.need h2 {
		margin-bottom: 50px;
	}
	
	.need h2 .blue {
		font-size: 25px;
	}
	
	.need ul {
		width: 840px;
		margin: 0 auto 50px;
	}
	
	.need ul li {
		width: 227px;
		margin: 0 50px 0 0;
		padding: 0;
		font-size: 18px;
	}
	
	.need ul li img {
		padding: 0;
		margin-bottom: 20px;
	}
	
	.need p {
		width: 700px;
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------
.process
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.process {
		padding: 0 10px 40px;
	}
	
	.process h2 {
		margin-bottom: 25px;
	}
	
	.process-box {
		margin-bottom: 30px;
	}
	
	.process-box dl {
		margin-bottom: 10px;
	}
	
	
	.process-box dl dt.blue {
		width: 100%;
		height: 35px;
		padding: 0 0 0 20px;
		background: #4A64AA;
		font-weight: 600;
		color: #fff;
		font-size: 15px;
		display: flex;
		align-items: center;
	}
	
	.process-box dl dd {
		width: 100%;
		height: 50px;
		padding: 0 0 0 20px;
		background: #fff;
		font-weight: 600;
		display: flex;
		align-items: center;
		font-size: 16px;
	}
	
	.process p {
		padding: 0 10px;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	.process {
		width: 500px;
		margin: 0 auto;
	}
}


/* Larger than tablet */
@media (min-width: 992px) {	
	.process {
		width: 800px;
		padding: 0;
		margin: 0 auto 80px;
	}

	.process h2 {
		margin-bottom: 35px;
	}
	
	.process-box {
		margin-bottom: 40px;
	}
	
	.process-box dl dt.blue {
		width: 200px;
		height: 50px;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22px;
		float: left;
	}
	
	.process-box dl dd {
		width: 600px;
		height: 50px;
		padding-left: 40px;
		font-size: 20px;
	}
	
	.process p {
		padding: 0;
	}
}

/*--------------------------------------------------------------
.support
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.support {
		margin: 0 0 26px;
		padding: 0 20px;
	}
	
	.support h2 {
		margin-bottom: 25px;
	}
	
	.support h3 {
		margin-bottom: 15px;
		font-size: 16px;
		font-weight: 600;
	}
	
	.panel-list li{
		width: 335px;
		margin: 0 auto;
		background: #FFF;
		box-shadow: 0px 2px 0px #00000029;
	}
	
	.panel-list li a{
		width: 100%;
	}
	
	.panel-list li dl {
		padding: 20px;
		margin-bottom: 15px;
	}
	
	.panel-list li dl dt {
		width: 295px;
		height: auto;
		margin-bottom: 30px;
	}
	
	.panel-list li dl dt img {
		width: 100%;
		height: auto;
	}
	
	.panel-list li dl dd {
		width: 290px;
		margin: 0 auto 25px;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	.panel-list {
		width: 385px;
		margin: 0 auto;
	}
	
	.panel-list li {
		width: 385px;
		min-height: 403px;
		float: left;
	}
	
	.panel-list li:first-child {
		margin: 0 0 15px 0;
	}
	
	.panel-list li dl {
		padding: 20px;
		margin-bottom: 0;
	}
	
	.panel-list li dl dt {
		width: 345px;
		height: 216px;
		margin-bottom: 30px;
	}
	
	.panel-list li dl dd {
		width: 295px;
		margin: 0 auto;
	}
}


/* Larger than tablet */
@media (min-width: 992px) {
	.support {
		margin-bottom: 60px;
	}
	
	.support h3 {
		font-size: 18px;
	}
	
	.panel-list {
		width: 800px;
		margin: 0 auto;
	}
	
	.panel-list li {
		width: 385px;
		min-height: 403px;
		float: left;
	}
	
	.panel-list li:first-child {
		margin: 0 30px 0 0;
	}

}

/*--------------------------------------------------------------
.intro
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.intro {
		max-width: 500px;
		margin: 0 auto;
		padding: 30px 10px 20px;
	}
	
	.intro h3 {
		margin-bottom: 15px;
		font-weight: 600;
		font-size: 16px;
	}
	
	.intro h3 span {
		width: 3px;
		height: 15px;
		margin-right: 10px;
		display: inline-block;
		background: #4A64AA;
	}
	
	.blue {
		font-weight: 300;
	}
	
	.intro-inner{
		padding: 10px 0 0 0;
		border: 1px solid #CECECE;
		border-collapse: collapse;
		font-size: 14px;
	}
	
	.intro-inner dl {
		padding: 20px 0 20px 20px;
		border-bottom: 1px solid #CECECE;
	}
	
	.intro-inner dl:last-child {
		border-bottom: none;
	}
	
	.intro-inner dl dt {
		margin-bottom: 20px;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	.intro {
		width: 500px;
		margin: 0 auto;
	}
}


/* Larger than tablet */
@media (min-width: 992px) {	
	.intro {
		max-width: 800px;
		width: 800px;
		margin: 50px auto;
		padding: 0;
	}
	
	.intro h3 span {
		width: 5px;
		height: 20px;
	}
	
	.intro-inner{
		padding: 0;
		font-size: 15px;
	}
	
	.intro-inner dl {
		padding: 15px 30px;
		border-bottom: 1px solid #CECECE;
	}
	
	.intro-inner dl dt {
		width: 185px;
		margin-right: 60px;
		float: left;
	}
	
	.intro dl dd {
		width: 490px;
		float: right;
	}
	
}