@charset "utf-8";

.inner{ max-width: 1245px; margin: 0 auto; padding: 0 2rem; box-sizing: content-box; }
.sp_only{ display: none; }
.main-column > div{ padding: 0 !important; }

.kv_wrap { position: relative; box-sizing: border-box; }
.kv_wrap img { width: 100%; height: auto; }


/* ----------------------------------------------------------------------------------- about */
#about{ padding: 6.875rem 0 6.25rem; text-align: center; }
.about-heading{ padding-bottom: 3.125rem; }
.about-title{ padding: 0 0 1.25rem; font-size: 2rem; }
.about-description{ font-size: 1em; line-height: 2; }
.about-flow{ width: min(50rem, 100%); margin: 0 auto; }


/* ----------------------------------------------------------------------------------- flow */
#flow { padding: 5rem 0 6.25rem; background-color: #FAE37B; }
.flow-title { margin-bottom: 3.4375rem; font-size: 1.875rem; font-weight: 700; line-height: 1.5; text-align: center; }
.flow-content { display: flex; align-items: center; gap: 1.5625rem; }
.flow-area { flex: 1 1 48.75rem; width: 100%; max-width: 48.75rem; position: relative; overflow: hidden; background-color: #fff; border-radius: 1.125rem; }
.flow-area-title,
.flow-service-title { padding: .875rem 1.25rem; color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.4; text-align: center; background-color: #319E95; }
.flow-area img { display: block; width: calc(100% - 3.375rem); height: auto; margin: 1.5625rem auto 1.875rem; }

.flow-service { flex: 0 1 25rem; width: 100%; max-width: 25rem; position: relative; display: flex; align-items: center; flex-direction: column; gap: 1.25rem; padding-left: 6.25rem; }
.flow-service-item { width: 18.75rem; max-width: 100%; overflow: hidden; background-color: #fff; border-radius: 1.25rem; }
.flow-service-item img { display: block; width: 100%; height: 10.9375rem; object-fit: contain; }
.flow-service-branc { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4.6875rem; }
.flow-service-branc img{ width: 100%; height: auto; }
.flow-service-plus { width: 2.9375rem; }
.flow-description { margin-top: 1.875rem; color: #E84E09; font-size: 1.875rem; font-weight: 700; line-height: 1.5; text-align: center; }

.flow-button { margin-top: 5rem; text-align: center; }
.flow-button .button-link { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 37.5rem; max-width: 100%; min-height: 6.25rem; margin: 0 auto; padding: 1.25rem 4.375rem 1.25rem 2.5rem; color: #fff; font-size: 1.625rem; font-weight: 700; line-height: 1.5; text-decoration: none; background-color: #E84E09; transition: opacity 0.3s; }
.flow-button .button-link::after { position: absolute; top: 50%; right: 1.875rem; width: .75rem; height: .75rem; border-top: .125rem solid #fff; border-right: .125rem solid #fff; transform: translateY(-50%) rotate(45deg); content: ""; }
.flow-button .button-link:hover { opacity: 0.75; }

.mechanism { box-sizing: border-box; width: 75rem; max-width: 100%; margin: 5.625rem auto 0; padding: 1.875rem 3.125rem 2.5rem; background-color: #fff; border-radius: 1.25rem; }
.mechanism-title { margin-bottom: 2.1875rem; font-size: 1.5625rem; font-weight: 700; line-height: 1.5; text-align: center; }
.mechanism-title span { padding: 0 2.1875rem; background: url(https://www.zenrin.co.jp/image.jsp?id=19608) left center/1.5625rem no-repeat, url(https://www.zenrin.co.jp/image.jsp?id=19608) right center/1.5625rem no-repeat; }

.mechanism-content { display: flex; align-items: center; justify-content: space-between; gap: 2.1875rem; }
.mechanism-text { width: 48%; }
.mechanism-lead { font-size: 1em; font-weight: 500; line-height: 2; }
.mechanism-lead span { position: relative; z-index: 1; font-size: 1.3125rem; font-weight: 700; }
.mechanism-lead span::before { position: absolute; z-index: -1; right: 0; bottom: .0625rem; left: 0; height: .625rem; background-color: #FFFF4D; content: ""; }

.mechanism-about { margin-top: .625rem; padding-left: 3.125rem; }
.mechanism-about-title { position: relative; margin-bottom: .5rem; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.mechanism-about-title::before { position: absolute; top: 50%; left: -3.125rem; width: 1.875rem; height: .0625rem; background-color: #333; content: ""; }
.mechanism-about-text { font-size: .875rem; line-height: 2; }

.mechanism-image { width: 48%; text-align: center; }
.mechanism-image img { display: block; width: 100%; height: auto; }
.mechanism-image-text { margin-top: .9375rem; font-size: 1em; font-weight: 700; line-height: 1.5; text-align: center; }


/* ----------------------------------------------------------------------------------- merit */
.cont_bloc { position: relative; margin-bottom: 5rem; }
.raku_h2_ttl1 { color: #000; font-weight: bold; font-size: 2.2rem; width: 100%; padding-bottom: 1rem; text-align: center; }
.abs_border_ptrn01 { z-index: 3; display: block; width: 10.3125rem; height: .1875rem; margin: 0 auto; background-color: #319E95; }

#merit { padding: 7.5rem 0 7.8125rem; }
#merit .cont_bloc::after { position: absolute; z-index: 1; top: 5rem; left: 50%; color: #f1f1f1; font-size: 7.5rem; line-height: 1; white-space: nowrap; transform: translateX(-50%); content: "THREE MERIT"; font-family: "Roboto Condensed"; font-weight: 400; font-style: normal; letter-spacing: 0.1em; }

.merit-list { position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between; gap: 2.8125rem; }
.merit-item { position: relative; width: calc((100% - 5.625rem) / 3); padding: 1.5625rem 1.5625rem 2.1875rem; border: .25rem solid #319E95; border-radius: 1.125rem; background-color: #fff; }
.merit-number { position: absolute; top: -2.0625rem; left: -1.5625rem; display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; color: #fff; font-size: 2.5rem; line-height: 1; border-radius: 50%; background-color: #319E95; box-shadow: .1875rem .25rem .25rem rgba(0, 0, 0, 0.12); }
.merit-title { margin: 0 0 .9375rem; color: #319E95; font-size: 1.6875rem; font-weight: 700; line-height: 2; text-align: center; line-height: 1.4; }
.merit-image { width: 100%; margin-bottom: 1.125rem; }
.merit-image img { width: 100%; height: auto; }
.merit-text { margin: 0; font-size: 1em; line-height: 1.8; }

.merit-recommend { margin-top: 6.25rem; }
.merit-recommend-title { display: flex; align-items: center; justify-content: center; gap: .25rem; margin: 0 0 1.875rem; font-size: 1.875rem; font-weight: 700; line-height: 1.5; text-align: center; }
.merit-recommend-title::before,
.merit-recommend-title::after { display: block; width: 2.1875rem; height: .125rem; background-color: #111; content: ""; }
.merit-recommend-title::before { margin-right: .5rem; transform: rotate(48deg); }
.merit-recommend-title::after { margin-left: .5rem; transform: rotate(-48deg); }

.merit-recommend-title span { position: relative; color: #ed4b00; background-image: radial-gradient(circle at center, #ed4b00 20%, transparent 20%); background-position: top right; background-repeat: repeat-x; background-size: 1em 0.3em; }
.merit-recommend-content { display: grid; grid-template-columns: minmax(0, 1fr) 23.75rem minmax(0, 1fr); align-items: flex-start; }
.merit-recommend-list { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.merit-recommend-list p { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: 23rem; min-height: 3.125rem; padding: .625rem 1.25rem; font-size: min(1rem,1.2vw); font-weight: 500; line-height: 1.5; text-align: center; border: .125rem solid #707070; border-radius: 6.25rem; background-color: #fff; }

.speechBubble-right{ margin-left: -5%; }
.speechBubble-left{ margin-right: -5%; }

.speechBubble-left p:nth-of-type(2){ transform: translateX(13%); }

.speechBubble-right p::before,
.speechBubble-right p::after { position: absolute; bottom: 1px; left: 18%; border-style: solid; transform: skew(-18deg); transform-origin: top; content: ""; }
.speechBubble-right p::before { border-width: 1.25rem 1.25rem 0 0; border-color: #707070 transparent transparent; translate: -50% 100%; }
.speechBubble-right p::after { border-width: .95rem .95rem 0 0; border-color: #ffffff transparent transparent; translate: calc(-50% - .025rem) 100%; }

.speechBubble-left p::before,
.speechBubble-left p::after { position: absolute; bottom: 1px; left: 73%; border-style: solid; transform: skew(11deg); transform-origin: top; content: ""; }
.speechBubble-left p::before { border-width: 1.25rem 0 0 1.25rem; border-color: #707070 transparent transparent; translate: -50% 100%; }
.speechBubble-left p::after { border-width: .95rem 0 0 .95rem; border-color: #ffffff transparent transparent; translate: calc(-50% + .025rem) 100%; }

.merit-recommend-image { align-self: end; }
.merit-recommend-image img { display: block; width: 100%; height: auto; }
.merit-recommend-text { margin: 2.1875rem 0 0; color: #ed4b00; font-size: 1.8rem; font-weight: 700; line-height: 1.7; text-align: center; }


/* ----------------------------------------------------------------------------------- ad-delivery */
#ad-delivery { padding: 4.375rem 0 3.75rem; background-color: #EFEFEF; }
#ad-delivery .cont_bloc { margin-bottom: 4.0625rem; }

.ad-delivery-row { display: flex; gap: 2.8125rem; padding: 1.5625rem; border-bottom: .0625rem solid #707070; }
.ad-delivery-row:last-of-type { border-bottom: none; }
.ad-delivery-heading { flex: 0 0 8.4375rem; margin: 0; font-size: 1.35em; font-weight: 700; line-height: 1.5; }
.ad-delivery-content { flex: 1; }
.ad-delivery-content p { font-size: 1em; line-height: 1.5; }

.ad-delivery-detail { flex: 1; margin: 0; }
.ad-delivery-detail > div { display: flex; align-items: flex-start; margin-bottom: .3125rem; }
.ad-delivery-detail > div:last-child { margin-bottom: 0; }
.ad-delivery-detail dt { flex: 0 0 10rem; margin: 0; font-size: 1em; line-height: 1.6; }
.ad-delivery-detail dd { flex: 1; margin: 0; font-size: 1em; line-height: 1.6; }

.ad-delivery-media-list { display: flex; gap: 3.4375rem; flex: 1; }
.ad-delivery-media-item { width: calc((100% - 3.4375rem) / 2); }
.ad-delivery-media-title { margin: 0 0 .875rem; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.ad-delivery-media-item--yahoo .ad-delivery-media-title { color: #ff1744; }
.ad-delivery-media-item--line .ad-delivery-media-title { color: #22c55e; }

.ad-delivery-media-item ul { display: flex; flex-wrap: wrap; gap: .625rem; }
.ad-delivery-media-item li { display: flex; align-items: center; justify-content: center; min-width: 8.125rem; min-height: 2.1875rem; padding: .3125rem .875rem; font-size: .875rem; font-weight: 500; line-height: 1; background-color: #fff; box-sizing: border-box; }
.ad-delivery-media-item--yahoo li { color: #ff1744; border: .0625rem solid #ff1744; }
.ad-delivery-media-item--line li { color: #22c55e; border: .0625rem solid #22c55e; }

.ad-delivery-example-list { display: flex; justify-content: space-between; gap: 3.125rem; flex: 1; }
.ad-delivery-example-item { width: calc((100% - 9.375rem) / 4); margin: 0; text-align: center; }
.ad-delivery-example-item img { display: block; width: 100%; height: auto; }
.ad-delivery-example-item figcaption { margin-top: .875rem; font-size: .875rem; line-height: 1.5; text-align: center; }

.ad-delivery-price { align-items: flex-start; padding-top: 1.375rem; padding-bottom: 1.375rem; }
.ad-delivery-overview { align-items: flex-start; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ad-delivery-media { align-items: flex-start; padding-top: 1.375rem; padding-bottom: 1.375rem; }
.ad-delivery-example { align-items: flex-start; padding-top: 2.125rem; padding-bottom: 1rem; }


/* ----------------------------------------------------------------------------------- contact */
.contact { padding: 5.3125rem 0 6.25rem; background-color: #2fa098; }
.contact-box { padding: 3.125rem 2.5rem 2.8125rem; text-align: center; background-color: #fff; border-radius: 1.75rem; box-shadow: .5rem .5rem .625rem rgba(0, 0, 0, 0.15); }
.contact-title { margin: 0 0 .9375rem; font-size: 2em; font-weight: 700; line-height: 1.5; }

.contact-link-list { display: flex; flex-direction: column; align-items: center; gap: 1.5625rem; margin-top: 1.875rem; }
.contact-link { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; transition: opacity 0.3s; }
.contact-link::after { position: absolute; top: 50%; right: 1.8125rem; width: .875rem; height: .875rem; border-top: .1875rem solid currentColor; border-right: .1875rem solid currentColor; transform: translateY(-50%) rotate(45deg); content: ""; }
.contact-link:hover { opacity: 0.75; }

.contact-link--primary { width: 35rem; max-width: 100%; min-height: 5.625rem; padding: 1.5625rem; color: #fff; font-size: 1.5em; font-weight: 700; line-height: 1.5; background-color: #E84E0A; border-radius: 6.25rem; }
.contact-link--primary:hover { color: #fff; }

.contact-link--secondary { width: 24.375rem; max-width: 100%; min-height: 4.6875rem; padding: .9375rem 2.5rem; color: #2fa098; font-size: 1em; font-weight: 700; line-height: 1.5; border: .125rem solid #2fa098; border-radius: 3.4375rem; background-color: #fff; }
.contact-link--secondary::after { right: 1.375rem; width: .75rem; height: .75rem; border-width: .125rem; }


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


/* ----------------------------------------------------------------------------------- about */
	.about-title{ font-size: 3vw; }


/* ----------------------------------------------------------------------------------- ad-delivery */
	#ad-delivery { padding: 2.5rem 0; }
	#ad-delivery .cont_bloc { margin-bottom: 0; }
	
	.ad-delivery-row { display: block; padding: 1.5625rem 0; }
	.ad-delivery-heading { margin-bottom: .625rem; font-size: 1rem; }
	.ad-delivery-content p { font-size: .875rem; line-height: 1.5; }
	.ad-delivery-detail > div { display: grid; grid-template-columns: 6.875rem minmax(0, 1fr); gap: .625rem; margin-bottom: .3125rem; }
	.ad-delivery-detail dt,
	.ad-delivery-detail dd { font-size: .8125rem; line-height: 1.6; }
	.ad-delivery-detail dt { flex-basis: auto; }
	
	.ad-delivery-media-list { flex-direction: column; gap: .9375rem; }
	.ad-delivery-media-item { width: 100%; }
	.ad-delivery-media-title { margin: 0 0 .8125rem; font-size: 1rem; }
	.ad-delivery-media-item ul { gap: .3125rem .625rem; margin: 0; padding: 0; }
	.ad-delivery-media-item li { box-sizing: border-box; width: calc((100% - 1.25rem) / 3); min-width: 0; min-height: 2.125rem; padding: .3125rem; font-size: .75rem; }
	
	.ad-delivery-media-item--line li:nth-last-child(-n+2){ width: calc((100% - 1.25rem) / 2); }

	.ad-delivery-example { padding-top: 1.5625rem; }
	.ad-delivery-example-list { gap: .625rem; }
	.ad-delivery-example-item { width: calc((100% - 1.875rem) / 4); }
	.ad-delivery-example-item figcaption { margin-top: .625rem; font-size: .625rem; }


/* ----------------------------------------------------------------------------------- flow */
	.flow-title{ font-size: 3vw; }
	.flow-description{ font-size: 2.4vw; }


/* ----------------------------------------------------------------------------------- merit */
	.merit-list{ gap: 2%; }
	.merit-item{ width: calc((100% - 4%) / 3); }
	.merit-number { top: -1.062rem; left: -0.562rem; width: 7.25vw; height: 7.25vw; font-size: 3vw; }
	.merit-title{ font-size: 2.3vw; }
	.merit-text{ font-size: 1.4vw; }

	.merit-recommend-content{ grid-template-columns: minmax(0, 1fr) 32vw minmax(0, 1fr); }
	.merit-recommend-list p{ font-size: 1.2vw; }
	.merit-recommend-text{ font-size: 2.4vw; }
	

}

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

	.inner{ width: 90%; padding: 0; }
	.pc_only{ display: none; }
	.sp_only{ display: block; }

/* ----------------------------------------------------------------------------------- about */
	#about { padding: 2.5rem 0 3.75rem; }
	.about-heading { padding-bottom: 1.875rem; }
	.about-title { padding: 0 0 .9375rem; font-size: 1.25rem; line-height: 1.5; }
	.about-description { font-size: .875rem; line-height: 1.8; text-align: left; }
	
	.about-flow { width: 100%; }
	.about-flow img { width: 100%; height: auto; }

	
/* ----------------------------------------------------------------------------------- merit */
	.raku_h2_ttl1 { font-size: 1.25rem; }
	.abs_border_ptrn01 { width: 7.8125rem; margin-top: .625rem; }
	
	#merit { overflow: hidden; padding: 4.0625rem 0 3.4375rem; }
	#merit .cont_bloc { margin-bottom: 3.75rem; }
	#merit .cont_bloc::after { top: 4.0625rem; font-size: 3.75rem; }
	
	.merit-list { flex-direction: column; gap: 3.125rem; }
	.merit-item { box-sizing: border-box; width: 100%; padding: 1.5625rem 1.25rem 1.75rem; border-width: .375rem; border-radius: .875rem; }
	.merit-number { top: -2.5rem; left: -.125rem; width: 4.6875rem; height: 4.6875rem; font-size: 2.875rem; }
	.merit-title { margin-bottom: 1rem; font-size: 1.375rem; }
	.merit-image { margin-bottom: .875rem; }
	.merit-text { font-size: .875rem; line-height: 1.8; }
	
	.merit-recommend { margin-top: 3.4375rem; }
	.merit-recommend-title { margin-bottom: 1.5625rem; font-size: 1.25rem; }
	
	.merit-recommend-title::before,
	.merit-recommend-title::after { width: 1.5rem; }
	
	.merit-recommend-content { display: flex; align-items: stretch; flex-direction: column; }
	.merit-recommend-list { width: 100%; gap: 1rem; }
	.merit-recommend-list p { min-width: 0; min-height: 2.6875rem; padding: .3125rem .9375rem; font-size: 1em; }
	
	.speechBubble-right,
	.speechBubble-left { margin: 0; }
	.speechBubble-left{ margin-bottom: 1.25rem; }
	.speechBubble-left p:nth-of-type(2){ transform: none; }
	
	.speechBubble-left p::before,
	.speechBubble-left p::after { left: 16%; }
	
	.speechBubble-left p::before { border-width: .9375rem 0 0 .9375rem; }
	.speechBubble-left p::after { border-width: .6375rem 0 0 .6375rem; }
	
	.speechBubble-right p::before,
	.speechBubble-right p::after { left: 85%; }
	
	.speechBubble-right p::before { border-width: .9375rem .9375rem 0 0; }
	.speechBubble-right p::after { border-width: .6375rem .6375rem 0 0; }
	
	.merit-recommend-image { order: 3; align-self: center; width: 75%; max-width: 17.5rem; }
	.merit-recommend-text { margin-top: 1.25rem; font-size: 1rem; line-height: 1.7; }
	

/* ----------------------------------------------------------------------------------- flow */
	#flow { padding: 1.875rem 0 3.4375rem; }
	.flow-title { margin-bottom: 1.5625rem; font-size: 1.25rem; line-height: 1.5; }
	.flow-content { display: flex; align-items: flex-start; flex-direction: column; gap: 1.5rem; }
	.flow-area { flex: auto; width: 100%; border-radius: .625rem; }
	.flow-area-title,
	.flow-service-title { padding: .3125rem .625rem; font-size: .875rem; }
	.flow-area img { width: calc(100% - 1.875rem); margin: 1.125rem auto 1.25rem; }
	
	.flow-service { max-width: initial; flex: initial; display: grid; grid-template-columns: minmax(0, 1fr) 2.1875rem minmax(0, 1fr); align-items: center; gap: .9375rem; width: 100%; padding: 4rem 0 0; }
	.flow-service-item { width: 100%; border-radius: .875rem; }
	.flow-service-item img { width: 75%; margin: 0 auto; display: block; height: auto; }
	
	.flow-service-branc { max-width: 300px; width: 60%; left: 50%; top: 0; transform: translate(-50%, 0); }
	.flow-service-plus { width: auto; }
	.flow-description { margin-top: .9375rem; font-size: 1.0625rem; line-height: 1.7; font-feature-settings: "palt"; }
	
	.flow-button { margin-top: 2.5rem; }
	.flow-button .button-link { box-sizing: border-box; width: 100%; min-height: 4.375rem; padding: .9375rem 1.5625rem; font-size: 1.125rem; }
	.flow-button .button-link::after { right: .9375rem; width: .625rem; height: .625rem; }
	
	.mechanism { box-sizing: border-box; width: 100%; margin-top: 2.5rem; padding: 1.75rem 1.25rem 1.875rem; border-radius: .9375rem; }
	.mechanism-title { margin-bottom: 1.5625rem; font-size: 1.25rem; }
	.mechanism-title span { display: inline-block; padding: 0 2.8125rem; background-size: 1.625rem; }
	.mechanism-content { align-items: stretch; flex-direction: column; gap: 1.5625rem; }
	
	.mechanism-text { width: 100%; }
	.mechanism-lead { font-size: .875rem; line-height: 1.9; }
	.mechanism-lead br { display: none; }
	.mechanism-lead span { font-size: 1rem; }
	.mechanism-lead span::before { height: .5rem; }
	
	.mechanism-about { margin-top: 1.875rem; padding-left: 1.875rem; }
	.mechanism-about-title { margin-bottom: .3125rem; font-size: .875rem; }
	.mechanism-about-title::before { left: -1.875rem; width: 1.25rem; }
	.mechanism-about-text { font-size: .875rem; line-height: 2; }
	
	.mechanism-image { width: 100%; }
	.mechanism-image img { max-width: 31.25rem; margin: 0 auto; }
	.mechanism-image-text { margin-top: .625rem; font-size: .625rem; }


/* ----------------------------------------------------------------------------------- contact */
	.contact { padding: 2.5rem 0; }
	.contact-box { padding: 2.1875rem 5% 2.5rem; border-radius: .625rem; box-shadow: .25rem .25rem .4375rem rgba(0, 0, 0, 0.15); }
	.contact-title { margin-bottom: .75rem; font-size: 1.25rem; line-height: 1.5; }
	
	.contact-link-list { gap: 1.125rem; margin-top: 1.875rem; }
	.contact-link::after { right: 1.5rem; width: .5625rem; height: .5625rem; border-width: .125rem; }
	.contact-link--primary { box-sizing: border-box; width: 100%; min-height: 3.75rem; padding: .9375rem; font-size: 1em; }
	.contact-link--secondary { box-sizing: border-box; width: 90%; max-width: 22.5rem; min-height: 3.125rem; padding: .75rem; font-size: .75rem; }
	.contact-link--secondary::after { right: 1.5rem; width: .5625rem; height: .5625rem; }


}