@charset "Shift-JIS";

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

	/*============================
	#method
	============================*/
	#method h3 {
		text-align: center;
	}

	#method h3 span {
		color: var(--color-blue);
		display: inline-block;
		font-size: 1.22rem;
		letter-spacing: 0.05em;
		line-height: 1.6;
		margin: 0 auto 1.33rem auto;
		padding: 0 0 0.78rem 0;
		position: relative;
	}

	#method h3 span::after {
		content: '';
		display: block;
		width: 100%;
		height: 4px;
		background-color: var(--color-blue);
		border-radius: 20px;
		position: absolute;
		bottom: 0;
		left: 0;
	}


	#method ul.method-list li {
		font-size: 1rem;
		line-height: 1.6;
		padding: 1.11rem 0 1.11rem 1.39rem;
		position: relative;
	}

	#method ul.method-list li::before {
		content: '';
		display: block;
		width: 0.889rem;
		height: 0.889rem;
		background-color: var(--color-blue);
		border-radius: 100px;
		position: absolute;
		top: 1.5em;
		left: 0;
	}


	#method ul.method-list li:not(:last-child) {
		background-size: 12px 1px;
		background-image: linear-gradient(to right, #C6D7E8 6px, transparent 6px);
		background-repeat: repeat-x;
		background-position: left bottom;
	}


	/*============================
	#answer
	============================*/
	#answer {
		margin: 70px 0 0 0;
	}

	#answer h3 {
		text-align: center;
	}

	#answer h3 span {
		color: var(--color-blue);
		display: inline-block;
		font-size: 1.22rem;
		letter-spacing: 0.05em;
		line-height: 1.6;
		margin: 0 auto 1.33rem auto;
		padding: 0 0 0.78rem 0;
		position: relative;
	}

	#answer h3 span::after {
		content: '';
		display: block;
		width: 100%;
		height: 4px;
		background-color: var(--color-blue);
		border-radius: 20px;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	#answer ul.answer-list li {
		font-size: 1rem;
		line-height: 1.6;
		padding: 0 0 0 1.39rem;
		position: relative;
	}

	#answer ul.answer-list li:nth-of-type(n+2) {
		margin: 25px 0 0 0;
	}

	#answer ul.answer-list li::before {
		content: '';
		display: block;
		width: 0.889rem;
		height: 0.889rem;
		background-color: var(--color-blue);
		border-radius: 100px;
		position: absolute;
		top: 0.4em;
		left: 0;
	}




	/*============================
	.anchor
	============================*/
	.anchor {
		margin: 60px 0 0 0;
	}

	.anchor ul.anchor-list {
		display: flex;
		justify-content: center;
		gap: 80px;
	}

	.anchor ul.anchor-list>li {
		width: calc((100% - 80px) / 2);
		position: relative;
	}

	/* 縦の破線をliの間に表示 */
	.anchor ul.anchor-list>li:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 0;
		right: -40px;
		/* gapの半分 */
		width: 0;
		height: 100%;
		border-right: 1px dashed var(--color-blue);
	}

	.anchor ul.anchor-list li a.anchor-btn {
		border-radius: 20px;
		box-sizing: border-box;
		color: var(--color-blue);
		font-size: 1.22rem;
		letter-spacing: 0.05em;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32px 0;
		position: relative;
		width: 100%;
		transition: background-color 0.3s;
	}

	.anchor ul.anchor-list li[data-name="survey"] a.anchor-btn {
		background-color: #A3DDD7;
		border: 2px solid #A3DDD7;
	}

	.anchor ul.anchor-list li[data-name="direct"] a.anchor-btn {
		background-color: #FFF370;
		border: 2px solid #FFF370;
	}

	.anchor ul.anchor-list li[data-name="survey"] a.anchor-btn:hover,
	.anchor ul.anchor-list li[data-name="direct"] a.anchor-btn:hover {
		background-color: #ffffff;
	}

	.anchor ul.anchor-list li a.anchor-btn::after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		aspect-ratio: 1 / 1;
		width: 38px;
		height: 38px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}

	.anchor ul.anchor-list li[data-name="survey"] a.anchor-btn::after {
		background-image: url('../img/icon_anchor_green.svg');
	}

	.anchor ul.anchor-list li[data-name="direct"] a.anchor-btn::after {
		background-image: url('../img/icon_anchor_yellow.svg');
	}


	.anchor ul.anchor-list li .anchor-img {
		margin: 30px 0 18px 0;
	}

	.anchor ul.anchor-list li ul.anchor-text li {
		font-size: 0.833rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		padding: 0 0 0 1.444rem;
		position: relative;
	}

	.anchor ul.anchor-list li ul.anchor-text li:nth-of-type(n+2) {
		margin: 10px 0 0 0;
	}

	.anchor ul.anchor-list li ul.anchor-text li::before {
		content: '';
		display: block;
		width: 1.056rem;
		height: 1.056rem;
		background-image: url('../img/icon_check.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 0.15em;
		left: 0;
	}



	/*============================
	#survey
	============================*/
	#survey {
		padding: 80px 0 0 0;
	}

	#survey h3 {
		background-color: #A3DDD7;
		box-sizing: border-box;
		border-radius: 100px;
		color: var(--color-blue);
		font-size: 1.11rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		padding: 13px 0;
		margin: 0 0 30px 0;
		text-align: center;
	}

	#survey dl {
		margin: 20px 0 0 0;
	}

	#survey dl dt {
		color: var(--color-blue);
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#survey dl dd {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#survey .schedule {
		padding: 50px 0 0 0;
	}

	#survey .schedule ul.schedule-list {
		display: flex;
		flex-direction: column;
		gap: 43px;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item {
		background-color: #F9F9F9;
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		gap: 20px;
		padding: 24px 36px 24px 24px;
		position: relative;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item:not(:last-child)::after {
		content: '';
		display: block;
		width: 44px;
		height: 19px;
		background-image: url('../img/icon_schedule_arrow.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		bottom: -32px;
		transform: translateX(-50%);
		z-index: 1;
	}



	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap {
		width: calc(100% - 265px);
	}

	#survey .schedule ul.schedule-list li.schedule-list-item:last-child .schedule-list-wrap {
		width: 100%;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap h5.schedule-list-title {
		font-size: 0.889rem;
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap p.schedule-list-time {
		display: inline-block;
		vertical-align: top;
		color: var(--color-blue);
		font-size: 1.11rem;
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.05em;
		margin: 8px 0 12px 0;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap p.schedule-list-time[data-type="marker"] {
		background: linear-gradient(to bottom, transparent 60%, #fef471 60%, #fef471 100%);
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap p.schedule-list-time span {
		display: inline-block;
		font-size: 1.5em;
		font-weight: 700;
		margin: 0 0.1em 0 0;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap .schedule-list-text {
		font-size: 0.778rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap .schedule-list-text ul {
		padding: 0 0 0 1.25rem;
	}
	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap .schedule-list-text ul li {
		font-size: 0.778rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		list-style-type: disc;
	}
	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap .schedule-list-text ul li:not(:last-child) {
		margin: 0 0 0.5rem 0;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-img {
		background-color: var(--color-light-blue);
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 13px 0;
		width: 245px;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-img img {
		height: auto;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item:nth-child(1) .schedule-list-img img {
		aspect-ratio: 160 / 135;
		width: 160px;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item:nth-child(2) .schedule-list-img img {
		aspect-ratio: 180 / 134;
		width: 180px;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item:nth-child(3) .schedule-list-img img {
		aspect-ratio: 167 / 129;
		width: 167px;
	}




	/*============================
	#direct
	============================*/
	#direct {
		padding: 80px 0 0 0;
	}

	#direct h3 {
		background-color: #FFF370;
		box-sizing: border-box;
		border-radius: 100px;
		color: var(--color-blue);
		font-size: 1.11rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		padding: 13px 0;
		margin: 0 0 30px 0;
		text-align: center;
	}

	#direct .direct-img {
		margin: 0 0 50px 0;
	}

	#direct dl+dl {
		margin: 22px 0 0 0;
	}

	#direct dl dt {
		font-size: 0.889rem;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: 0.05em;
		margin: 0 0 6px 0;
	}

	#direct dl dd p {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}
	#direct dl dd p:not(:first-child) {
		margin: 1.5rem 0 0 0;
	}

	#direct dl dd ul {
		padding: 0 0 0 1.25rem;
	}
	#direct dl dd ul:not(:first-child) {
		margin: 0.5rem 0 0 0;
	}

	#direct dl dd ul li {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		list-style-type: disc;
	}
	#direct dl dd ul li:not(:last-child) {
		margin: 0 0 0.5rem 0;
	}

	#direct dl dd a {
		color: var(--color-blue);
		text-decoration: underline;
	}


}

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


	/*============================
	#method
	============================*/
	#method h3 {
		text-align: center;
		margin: 0 auto 6.4vw auto;
		padding: 0 0 3.6vw 0;
		position: relative;
	}

	#method h3 span {
		color: var(--color-blue);
		display: inline-block;
		font-size: 5.64vw;
		letter-spacing: 0.05em;
		line-height: 1.6;
	}

	#method h3::after {
		content: '';
		display: block;
		width: 100%;
		height: 1vw;
		background-color: var(--color-blue);
		border-radius: 5.13vw;
		position: absolute;
		bottom: 0;
		left: 0;
	}


	#method ul.method-list li {
		font-size: 1rem;
		line-height: 1.6;
		padding: 1.11rem 0 1.11rem 1.39rem;
		position: relative;
	}

	#method ul.method-list li:not(:last-child) {
		background-size: 12px 1px;
		background-image: linear-gradient(to right, #C6D7E8 6px, transparent 6px);
		background-repeat: repeat-x;
		background-position: left bottom;
	}

	#method ul.method-list li::before {
		content: '';
		display: block;
		width: 0.889rem;
		height: 0.889rem;
		background-color: var(--color-blue);
		border-radius: 100px;
		position: absolute;
		top: 1.5em;
		left: 0;
	}

	/*============================
	#answer
	============================*/
	#answer {
		margin: 10.25vw 0 0 0;
	}

	#answer h3 {
		text-align: center;
		margin: 0 auto 6.4vw auto;
		padding: 0 0 3.6vw 0;
		position: relative;
	}

	#answer h3 span {
		color: var(--color-blue);
		display: inline-block;
		font-size: 5.64vw;
		letter-spacing: 0.05em;
		line-height: 1.6;
	}

	#answer h3::after {
		content: '';
		display: block;
		width: 100%;
		height: 1vw;
		background-color: var(--color-blue);
		border-radius: 5.13vw;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	#answer ul.answer-list li {
		font-size: 1rem;
		line-height: 1.6;
		padding: 0 0 0 1.39rem;
		position: relative;
	}

	#answer ul.answer-list li:nth-of-type(n+2) {
		margin: 25px 0 0 0;
	}

	#answer ul.answer-list li::before {
		content: '';
		display: block;
		width: 0.889rem;
		height: 0.889rem;
		background-color: var(--color-blue);
		border-radius: 100px;
		position: absolute;
		top: 0.4em;
		left: 0;
	}




	/*============================
	.anchor
	============================*/
	.anchor {
		margin: 8.72vw 0 0 0;
	}

	.anchor ul.anchor-list {
		display: flex;
		flex-direction: column;
		gap: 20.5vw;
	}

	.anchor ul.anchor-list>li {
		position: relative;
	}

	/* 縦の破線をliの間に表示 */
	.anchor ul.anchor-list>li:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -10.25vw;
		/* gapの半分 */
		width: 100%;
		height: 0;
		border-bottom: 1px dashed var(--color-blue);
	}

	.anchor ul.anchor-list li a.anchor-btn {
		border-radius: 5.13vw;
		box-sizing: border-box;
		color: var(--color-blue);
		font-size: 1.22rem;
		letter-spacing: 0.05em;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8.2vw 0;
		position: relative;
		width: 100%;
		transition: background-color 0.3s;
	}

	.anchor ul.anchor-list li[data-name="survey"] a.anchor-btn {
		background-color: #A3DDD7;
		border: 2px solid #A3DDD7;
	}

	.anchor ul.anchor-list li[data-name="direct"] a.anchor-btn {
		background-color: #FFF370;
		border: 2px solid #FFF370;
	}

	.anchor ul.anchor-list li[data-name="survey"] a.anchor-btn:hover,
	.anchor ul.anchor-list li[data-name="direct"] a.anchor-btn:hover {
		background-color: #ffffff;
	}

	.anchor ul.anchor-list li a.anchor-btn::after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		aspect-ratio: 1 / 1;
		width: 9.74vw;
		height: 9.74vw;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 5.13vw;
		top: 50%;
		transform: translateY(-50%);
	}

	.anchor ul.anchor-list li[data-name="survey"] a.anchor-btn::after {
		background-image: url('../img/icon_anchor_green.svg');
	}

	.anchor ul.anchor-list li[data-name="direct"] a.anchor-btn::after {
		background-image: url('../img/icon_anchor_yellow.svg');
	}


	.anchor ul.anchor-list li .anchor-img {
		margin: 30px 0 18px 0;
	}

	.anchor ul.anchor-list li ul.anchor-text li {
		font-size: 0.833rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		padding: 0 0 0 1.444rem;
		position: relative;
	}

	.anchor ul.anchor-list li ul.anchor-text li:nth-of-type(n+2) {
		margin: 10px 0 0 0;
	}

	.anchor ul.anchor-list li ul.anchor-text li::before {
		content: '';
		display: block;
		width: 1.056rem;
		height: 1.056rem;
		background-image: url('../img/icon_check.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 0.15em;
		left: 0;
	}



	/*============================
	#survey
	============================*/
	#survey {
		margin: 20.5vw 0 0 0;
	}

	#survey h3 {
		background-color: #A3DDD7;
		box-sizing: border-box;
		color: var(--color-blue);
		font-size: 1.22rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		padding: 11vw 0;
		margin: 0 -5vw 5.13vw -5vw;
		text-align: center;
	}

	#survey dl {
		margin: 20px 0 0 0;
	}

	#survey dl dt {
		color: var(--color-blue);
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#survey dl dd {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#survey .schedule {
		padding: 12.82vw 0 0 0;
	}

	#survey .schedule ul.schedule-list {
		display: flex;
		flex-direction: column;
		gap: 10vw;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item {
		background-color: #F9F9F9;
		box-sizing: border-box;
		border-radius: 2.56vw;
		display: flex;
		flex-direction: column-reverse;
		gap: 5.13vw;
		padding: 6.15vw;
		position: relative;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item:not(:last-child)::after {
		content: '';
		display: block;
		width: 11.28vw;
		height: 4.87vw;
		background-image: url('../img/icon_schedule_arrow.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		bottom: -8vw;
		transform: translateX(-50%);
		z-index: 1;
	}


	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap h5.schedule-list-title {
		font-size: 0.889rem;
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap p.schedule-list-time {
		display: inline-block;
		vertical-align: top;
		color: var(--color-blue);
		font-size: 1.11rem;
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.05em;
		margin: 8px 0 12px 0;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap p.schedule-list-time[data-type="marker"] {
		background: linear-gradient(to bottom, transparent 60%, #fef471 60%, #fef471 100%);
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap p.schedule-list-time span {
		display: inline-block;
		font-size: 1.5em;
		font-weight: 700;
		margin: 0 0.1em 0 0;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap .schedule-list-text {
		font-size: 0.778rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap .schedule-list-text ul {
		padding: 0 0 0 1.25rem;
	}
	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap .schedule-list-text ul li {
		font-size: 0.778rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		list-style-type: disc;
	}
	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-wrap .schedule-list-text ul li:not(:last-child) {
		margin: 0 0 0.5rem 0;
	}


	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-img {
		background-color: var(--color-light-blue);
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 42.82vw;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item .schedule-list-img img {
		height: auto;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item:nth-child(1) .schedule-list-img img {
		aspect-ratio: 160 / 135;
		width: 41vw;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item:nth-child(2) .schedule-list-img img {
		aspect-ratio: 180 / 134;
		width: 45.9vw;
	}

	#survey .schedule ul.schedule-list li.schedule-list-item:nth-child(3) .schedule-list-img img {
		aspect-ratio: 167 / 129;
		width: 42.82vw;
	}




	/*============================
	#direct
	============================*/
	#direct {
		margin: 20.5vw 0 0 0;
	}

	#direct h3 {
		background-color: #FFF370;
		box-sizing: border-box;
		color: var(--color-blue);
		font-size: 1.22rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		padding: 11vw 0;
		margin: 0 -5vw 5.13vw -5vw;
		text-align: center;
	}

	#direct .direct-img {
		margin: 0 0 12.82vw 0;
	}

	#direct dl+dl {
		margin: 5.64vw 0 0 0;
	}

	#direct dl dt {
		font-size: 0.889rem;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: 0.05em;
		margin: 0 0 1.54vw 0;
	}

	#direct dl dd p {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}
	#direct dl dd p:not(:first-child) {
		margin: 1.5rem 0 0 0;
	}

	#direct dl dd ul {
		padding: 0 0 0 1.25rem;
	}
	#direct dl dd ul:not(:first-child) {
		margin: 0.5rem 0 0 0;
	}

	#direct dl dd ul li {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		list-style-type: disc;
	}
	#direct dl dd ul li:not(:last-child) {
		margin: 0 0 0.5rem 0;
	}

	#direct dl dd a {
		color: var(--color-blue);
		text-decoration: underline;
	}



}