@charset "Shift-JIS";


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



	p.text{
		font-size: 1rem;
		line-height: 1.6;
		text-align: justify;
	}

	.marker{
		color: var(--color-blue);
		font-size: 1.125em;
		font-weight: 700;
		background: linear-gradient(to bottom, transparent 60%, #fef471 60%, #fef471 100%);
	}

	p.text.strong{
		border-left: 1px solid var(--color-blue);
		color: var(--color-blue);
		font-size: 1rem;
		font-weight: 500;
		line-height: 2.0;
		text-align: left;
		margin: 20px 0;
		padding: 0 0 0 20px;
	}

	ul.text-list{
		padding: 0 0 0 1.5em;
	}
	ul.text-list li{
		font-size: 1rem;
		line-height: 1.6;
		list-style: disc;
	}



	/* -------------------------------------------------------------------------------------------
	*
	* anchor
	*
	* ----------------------------------------------------------------------------------------- */

	.anchor h3{
		font-size: 1.222rem;
		margin: 0 0 50px 0;
	}

	.anchor ul{
		display: flex;
		gap: 22px;
	}
	.anchor ul li{
		width: calc((100% - 44px) / 3);
	}

	.anchor ul li .btn::after{
		transform: rotate(90deg) translateY(-50%);
		transform-origin: top;
	}



	/* -------------------------------------------------------------------------------------------
	*
	* purpose
	*
	* ----------------------------------------------------------------------------------------- */

	#purpose{
		padding: 50px 0 0 0;
	}

	#purpose .purpose-img{
		padding: 0 0 30px 0;
	}

	#purpose section:nth-of-type(n+2){
		margin: 50px 0 0 0;
	}



	/* -------------------------------------------------------------------------------------------
	*
	* target
	*
	* ----------------------------------------------------------------------------------------- */

	#target{
		padding: 50px 0 0 0;
	}

	#target section:nth-of-type(n+2){
		margin: 50px 0 0 0;
	}

	#target .target-list{
		background-color: #F9F9F9;
		box-sizing: border-box;
		border-radius: 10px;
		padding: 26px 40px;
		margin: 30px 0 0 0;
	}

	#target .target-list ul{
		display: flex;
		flex-wrap: wrap;
	}

	#target .target-list ul li{
		display: flex;
		width: calc((100% - 3px) / 5);
		box-sizing: border-box;
	}

	#target .target-list ul li .target-list-unit{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 20px;
		border-left: 1px solid #D6D6D6;
		box-sizing: border-box;
	}
	#target .target-list ul li:nth-child(-n+5) .target-list-unit{
		border-bottom: 1px solid #D6D6D6;
	}
	#target .target-list ul li:nth-child(1) .target-list-unit,
	#target .target-list ul li:nth-child(6) .target-list-unit {
		border-left: none;
	}
	#target .target-list ul li:nth-child(n+7):nth-child(-n+10) .target-list-unit {
		position: relative;
	}
	#target .target-list ul li:nth-child(n+7):nth-child(-n+10) .target-list-unit::before {
		content: '';
		display: block;
		width: 40px;
		height: 10px;
		background-color: #F9F9F9;
		position: absolute;
		top: -1px; left: -20px;
	}


	#target .target-list ul li .target-list-unit img{
		width: 100%;
		height: auto;
	}
	#target .target-list ul li .target-list-unit p{
		font-size: 0.667rem;
		line-height: 1.4;
		letter-spacing: 0;
		margin: 0 -20px;
	}

	#target h5{
		font-size: 1rem;
		line-height: 1.6;
		margin: 20px 0 10px 0;
	}
	#target h4 + h5{
		margin: 0 0 10px 0;
	}


	#target .store-list{
		display: flex;
		gap: 40px;
	}

	#target .store-list li .store-img{
		background-color: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 53px;
		height: 287px;
	}
	#target .store-list li .store-img img{
		width: 100%;
		height: auto;
	}

	#target .store-list li .store-text{
		font-size: 1rem;
		line-height: 1.6;
		margin: 16px 0 0 0;
	}

	#target .store-list li .text-list{
		margin: 6px 0 0 0;
	}





	/* -------------------------------------------------------------------------------------------
	*
	* application
	*
	* ----------------------------------------------------------------------------------------- */

	#application{
		padding: 50px 0 0 0;
		text-align: left;
	}

	#application p.text.lead{
		margin: 0 0 4rem 0;
	}

	#application section{
		}
		#application section:nth-of-type(n+2){
			margin-top: 3.125rem;
		}

	#application section h4{
		margin: 0 0 1.25rem 0;
		}
		#application section h4:nth-of-type(n+2){
			margin-top: 3.125rem;
		}

	#application section div.each{
		background-color: #F9F9F9;
		border-radius: 1rem;
		box-sizing: border-box;
		padding: 3.125rem;
		text-align: center;
	}
	#application section div.each.n2{
		margin: 20px 0 0 0;
	}

	#application section div.each h5{
		margin: 0 0 1.5rem 0;
		text-align: center;
	}

	#application section div.each h5 p.main{
		color: #0755a9;
		font-size: 1rem;
		margin: 0 0 0.75rem 0;
	}

	#application section div.each h5 p.sub{
		font-size: 0.8333rem;
	}

	#application section div.each p.img{
		display: inline-block;
		vertical-align: top;
		}
		#application section div.each.n1 p.img{
			width: 684px;
		}
		#application section div.each.n2 p.img{
			width: 427px;
		}

	#application section div.each + p.text{
		margin: 20px 0 0 0;
	}



	#application section .case{
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		margin: 30px 0 0 0;
	}

	#application section .case > li{
		background-color: #F9F9F9;
		box-sizing: border-box;
		border-radius: 10px;
		padding: 20px;
		width: calc((100% - 20px) / 2);
	}

	#application section .case > li h5{
		display: flex;
		align-items: center;
		margin: 0 0 10px 0;
	}

	#application section .case > li h5::before{
		content: '';
		display: block;
		width: 45px;
		height: 45px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
	}
	#application section .case > li[data-name="town"] h5::before{
		background-image: url(../img/about_icon_town.svg);
	}
	#application section .case > li[data-name="emergency"] h5::before{
		background-image: url(../img/about_icon_emergency.svg);
	}
	#application section .case > li[data-name="child"] h5::before{
		background-image: url(../img/about_icon_child.svg);
	}
	#application section .case > li[data-name="transit"] h5::before{
		background-image: url(../img/about_icon_transit.svg);
	}
	#application section .case > li[data-name="business"] h5::before{
		background-image: url(../img/about_icon_business.svg);
	}
	#application section .case > li[data-name="work"] h5::before{
		background-image: url(../img/about_icon_work.svg);
	}
	#application section .case > li[data-name="tourism"] h5::before{
		background-image: url(../img/about_icon_tourism.svg);
	}
	#application section .case > li[data-name="education"] h5::before{
		background-image: url(../img/about_icon_education.svg);
	}





	#application section .case > li h5 span{
		color: var(--color-blue);
		font-size: 1.222rem;
		margin: 0 0 0 6px;
	}

	#application section .case > li .case-img img{
		width: 100%;
		height: auto;
	}

	#application section .case > li .case-list{
		display: flex;
		flex-direction: column;
		gap: 3px;
		margin: 10px 0 0 0;
	}
	#application section .case > li .case-list li{
		font-size: 1rem;
		line-height: 1.6;
		padding: 0 0 0 1.4rem;
		position: relative;
	}
	#application section .case > li .case-list li::before{
		content: '';
		display: block;
		width: 0.889rem;
		height: 0.889rem;
		border: 1px solid var(--color-blue);
		border-radius: 100px;
		box-sizing: border-box;
		position: absolute;
		top: 0.4rem; left: 0;
		margin: auto;
	}












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


	p.text{
		font-size: 4.1vw;
		line-height: 1.6;
		text-align: justify;
	}

	.marker{
		color: var(--color-blue);
		font-size: 1.125em;
		font-weight: 700;
		background: linear-gradient(to bottom, transparent 60%, #fef471 60%, #fef471 100%);
	}

	p.text.strong{
		border-left: 1px solid var(--color-blue);
		color: var(--color-blue);
		font-size: 4.1vw;
		font-weight: 500;
		line-height: 2.0;
		text-align: left;
		margin: 5.13vw 0;
		padding: 0 0 0 5.13vw;
	}

	ul.text-list{
		padding: 0 0 0 1.5em;
	}
	ul.text-list li{
		font-size: 4.1vw;
		line-height: 1.6;
		list-style: disc;
	}



	/* -------------------------------------------------------------------------------------------
	*
	* anchor
	*
	* ----------------------------------------------------------------------------------------- */

	.anchor h3{
		margin: 0 0 8.72vw 0;
	}

	.anchor ul{
		display: flex;
		flex-direction: column;
		gap: 2.05vw;
	}
	.anchor ul li{
		width: 100%;
	}
	.anchor ul li .btn::after{
		transform: rotate(90deg) translateY(-50%);
		transform-origin: top;
	}


	/* -------------------------------------------------------------------------------------------
	*
	* purpose
	*
	* ----------------------------------------------------------------------------------------- */

	#purpose{
		padding: 12.82vw 0 0 0;
	}

	#purpose .purpose-img{
		padding: 0 0 7.69vw 0;
	}

	#purpose section:nth-of-type(n+2){
		margin: 12.82vw 0 0 0;
	}



	/* -------------------------------------------------------------------------------------------
	*
	* target
	*
	* ----------------------------------------------------------------------------------------- */

	#target{
		padding: 12.82vw 0 0 0;
	}

	#target section:nth-of-type(n+2){
		margin: 12.82vw 0 0 0;
	}

	#target .target-list{
		background-color: #F9F9F9;
		box-sizing: border-box;
		border-radius: 2.56vw;
		padding: 3.85vw;
		margin: 7.69vw 0 0 0;
	}

	#target .target-list ul{
		display: flex;
		flex-wrap: wrap;
	}

	#target .target-list ul li{
		display: flex;
		/* width: calc((100% - 0.77vw) / 4); */
		width: 26.9%;
		box-sizing: border-box;
	}
	#target .target-list ul li:nth-child(4n-3),
	#target .target-list ul li:nth-child(4n) {
		width: 23.1%;
	}

	#target .target-list ul li .target-list-unit{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2.56vw;
		padding: 3vw;
		border-left: 1px solid #D6D6D6;
		box-sizing: border-box;
	}
	#target .target-list ul li:nth-child(-n+8) .target-list-unit{
		border-bottom: 1px solid #D6D6D6;
	}
	#target .target-list ul li:nth-child(1) .target-list-unit,
	#target .target-list ul li:nth-child(5) .target-list-unit,
	#target .target-list ul li:nth-child(9) .target-list-unit {
		border-left: none;
	}
	#target .target-list ul li:nth-child(4n-3) .target-list-unit {
		padding: 3vw 3vw 3vw 0;
	}
	#target .target-list ul li:nth-child(4n) .target-list-unit {
		padding: 3vw 0 3vw 3vw;
	}

	#target .target-list ul li:nth-child(n+6):nth-child(-n+8) .target-list-unit,
	#target .target-list ul li:nth-child(10) .target-list-unit {
		position: relative;
	}
	#target .target-list ul li:nth-child(n+6):nth-child(-n+8) .target-list-unit::before,
	#target .target-list ul li:nth-child(10) .target-list-unit::before {
		content: '';
		display: block;
		width: 6.15vw;
		height: 2.56vw;
		background-color: #F9F9F9;
		position: absolute;
		top: -0.26vw; left: -3.075vw;
	}
	#target .target-list ul li:nth-child(7) .target-list-unit::after,
	#target .target-list ul li:nth-child(8) .target-list-unit::after {
		content: '';
		display: block;
		width: 6.15vw;
		height: 2.56vw;
		background-color: #F9F9F9;
		position: absolute;
		bottom: -0.26vw; left: -3.075vw;
	}


	#target .target-list ul li .target-list-unit .target-list-img{
		display: flex;
		align-items: center;
		flex: 1;
	}
	#target .target-list ul li .target-list-unit .target-list-img img{
		width: 100%;
		height: auto;
	}

	#target .target-list ul li .target-list-unit p{
		font-size: 2.564vw;
		letter-spacing: 0;
		line-height: 1.4;
		white-space: nowrap;
		flex: 1;
	}

	#target h5{
		font-size: 4.61vw;
		line-height: 1.6;
		margin: 5.13vw 0 2.56vw 0;
	}
	#target h4 + h5{
		margin: 0 0 2.56vw 0;
	}


	#target .store-list{
		display: flex;
		flex-direction: column;
		gap: 7.69vw;
	}

	#target .store-list li .store-img{
		background-color: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 13.59vw;
		height: 55.38vw;
	}
	#target .store-list li .store-img img{
		width: 100%;
		height: auto;
	}

	#target .store-list li .store-text{
		font-size: 4.61vw;
		line-height: 1.6;
		margin: 4.1vw 0 0 0;
	}

	#target .store-list li .text-list{
		margin: 1.54vw 0 0 0;
	}





	/* -------------------------------------------------------------------------------------------
	*
	* application
	*
	* ----------------------------------------------------------------------------------------- */

	#application{
		padding: 12.82vw 0 0 0;
		text-align: left;
	}

	#application p.text.lead{
		margin: 0 0 41.03vw 0;
	}

	#application section{
	}
	#application section:nth-of-type(n+2){
		margin-top: 12.82vw;
	}

	#application section h4{
		margin: 0 0 5.13vw 0;
	}

	#application section h4 p{
		color: #0755a9;
		font-size: 1.125rem;
		padding: 0 0 0 4.49vw;
		position: relative;
	}
	#application section h4 p::before{
		content: '';
		display: block;
		width: 2.56vw;
		height: 0.26vw;
		background-color: #0755a9;
		position: absolute;
		top: 0; bottom: 0; left: 0;
		margin: auto;
	}

	#application section div.each{
		background-color: #F9F9F9;
		border-radius: 2.56vw;
		box-sizing: border-box;
		padding: 5.13vw;
		text-align: center;
		margin: 5.13vw 0 0 0;
	}

	#application section div.each h5{
		margin: 0 0 6.15vw 0;
		text-align: center;
	}

	#application section div.each h5 p.main{
		color: #0755a9;
		font-size: 4.61vw;
		margin: 0 0 3vw 0;
	}

	#application section div.each h5 p.sub{
		font-size: 3.85vw;
		line-height: 1.6;
	}

	#application section div.each p.img{
		display: inline-block;
		vertical-align: top;
		}
		#application section div.each.n1 p.img{
			width: 89%;
		}
		#application section div.each.n2 p.img{
			width: 95%;
		}

	#application section div.each + p.text{
		margin: 5.13vw 0 0 0;
	}



	#application section .case{
		display: flex;
		flex-direction: column;
		gap: 3vw;
		margin: 7.69vw 0 0 0;
	}

	#application section .case > li{
		background-color: #F9F9F9;
		box-sizing: border-box;
		border-radius: 2.56vw;
		width: 100%;
	}

	#application section .case > li h5{
		display: flex;
		align-items: center;
		padding: 3vw;
		position: relative;
	}

	#application section .case > li h5::before{
		content: '';
		display: block;
		width: 14.36vw;
		height: 14.36vw;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
	}
	#application section .case > li[data-name="town"] h5::before{
		background-image: url(../img/about_icon_town.svg);
	}
	#application section .case > li[data-name="emergency"] h5::before{
		background-image: url(../img/about_icon_emergency.svg);
	}
	#application section .case > li[data-name="child"] h5::before{
		background-image: url(../img/about_icon_child.svg);
	}
	#application section .case > li[data-name="transit"] h5::before{
		background-image: url(../img/about_icon_transit.svg);
	}
	#application section .case > li[data-name="business"] h5::before{
		background-image: url(../img/about_icon_business.svg);
	}
	#application section .case > li[data-name="work"] h5::before{
		background-image: url(../img/about_icon_work.svg);
	}
	#application section .case > li[data-name="tourism"] h5::before{
		background-image: url(../img/about_icon_tourism.svg);
	}
	#application section .case > li[data-name="education"] h5::before{
		background-image: url(../img/about_icon_education.svg);
	}

	#application section .case > li h5::after{
		content: '';
		display: inline-block;
		vertical-align: middle;
		aspect-ratio: 1 / 1;
		width: 6.154vw;
		height: 6.154vw;
		background-image: url('/common/img/icon_plus.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 1em;
		top: 50%;
		transform: translateY(-50%);
		transition: background-image 0.3s;
	}
	#application section .case > li.is-open h5::after{
		background-image: url('/common/img/icon_minus.svg');
	}




	#application section .case > li h5 span{
		color: var(--color-blue);
		font-size: 4.61vw;
		font-weight: 500;
		margin: 0 0 0 3.33vw;
	}

	#application section .case > li .case-wrap{
		display: none;
		border-top: 1px solid #D6D6D6;
		padding: 5.13vw;
	}
	#application section .case > li.is-open .case-wrap{
		display: block;
	}

	#application section .case > li .case-img img{
		width: 100%;
		height: auto;
	}

	#application section .case > li .case-list{
		display: flex;
		flex-direction: column;
		gap: 0.77vw;
		margin: 2.56vw 0 0 0;
	}
	#application section .case > li .case-list li{
		font-size: 3.85vw;
		line-height: 1.6;
		padding: 0 0 0 3.59vw;
		position: relative;
	}
	#application section .case > li .case-list li::before{
		content: '';
		display: block;
		width: 2.28vw;
		height: 2.28vw;
		border: 1px solid var(--color-blue);
		border-radius: 100vw;
		position: absolute;
		top: 1.7vw; left: 0;
		margin: auto;
	}



}