@charset "utf-8";


/**************************************************50
 * concept
 **************************************************/
#concept{
	background-color: #FCF7F4;
	position: relative;
	text-align: center;
}
#concept > strong{
	display: block;
}
#concepts{
}
#concepts li[id^="concepts_"]{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	position: relative;
	vertical-align: top;
}
#concepts li[id^="concepts_"]:before{
	content: "";
	display: block;
	pointer-events: none;
}
#concepts li[id^="concepts_"] h3{
	line-height: 1.2;
	position: absolute;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
#container.lazyloaded #concepts li#concepts_violet h3{
	color: #956BAC;
}
#container.lazyloaded #concepts li#concepts_pink h3{
	color: #E9528E;
}
#container.lazyloaded #concepts li#concepts_blue h3{
	color: #596EB4;
}
#container.lazyloaded #concepts li#concepts_orange h3{
	color: #F18E36;
}
#container.lazyloaded #concepts li#concepts_green h3{
	color: #00AA9C;
}
#concepts li[id^="concepts_"] p{
	line-height: 1.2;
	position: absolute;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
@media screen and (max-width:639px){
	#concepts li[id^="concepts_"]{
		width: 93.75%;
	}
	#concepts li[id^="concepts_"] h3{
		font-size: 7vw;
		font-size: 7dvw;
	}
	#concepts li[id^="concepts_"] p{
		font-size: 6vw;
		font-size: 6dvw;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#concepts li[id^="concepts_"]{
		margin-left: 1.5625%;
		margin-right: 1.5625%;
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
	#concepts li[id^="concepts_"] h3{
		font-size: 4vw;
		font-size: 4dvw;
	}
	#concepts li[id^="concepts_"] p{
		font-size: 3vw;
		font-size: 3dvw;
	}
}
@media screen and (max-width:767px){
	#concept{
		background-position: center top, center bottom;
		background-repeat: no-repeat, no-repeat;
		background-size: 100% auto, 100% auto;
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#container.lazyloaded #concept{
		background-image: url("https://matsusima-navi.com/images/user/concept/back_020.webp"), url("https://matsusima-navi.com/images/user/concept/back_030.webp");
	}
	#concept > strong{
		margin-bottom: 6.25%;
	}
	#concept > strong img{
		width: 100% !important;
	}
	#concept p img[src$="img_040.svg"]{
		width: 87.5%;
	}
	#concepts{
		margin-bottom: 6.25%;
	}
	#concepts li[id^="concepts_"]{
		margin-top: 3.125%;
	}
	#concepts li[id^="concepts_"]:before{
		padding-top: 66.66666666666667%;
	}
	#container.lazyloaded #concepts li#concepts_violet{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/t_violet.svg");
	}
	#container.lazyloaded #concepts li#concepts_pink{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/t_pink.svg");
	}
	#container.lazyloaded #concepts li#concepts_blue{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/t_blue.svg");
	}
	#container.lazyloaded #concepts li#concepts_orange{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/t_orange.svg");
	}
	#container.lazyloaded #concepts li#concepts_green{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/t_green.svg");
	}
	#concepts li[id^="concepts_"] h3{
		top: 43.5%;
	}
	#concepts li[id^="concepts_"] p{
		top: 80%;
	}
	#concept picture img{
		width: 93.75%;
	}
}
@media screen and (min-width:768px){
	#concept{
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#container.lazyloaded #concept{
		background-image: url("https://matsusima-navi.com/images/user/concept/back_010.webp");
	}
	#concept > strong{
		margin-bottom: 3.125em;
	}
	#concept > strong img{
		width: 100% !important;
	}
	#concept p img[src$="img_030.svg"]{
		width: 80%;
	}
	#concepts{
		margin-bottom: 3.125em;
	}
	#concepts li[id^="concepts_"]{
		margin-top: 3.125em;
		width: 31.25%;
	}
	#concepts li[id^="concepts_"]:not(:nth-child(3n+1)){
		margin-left: 1.5625%;
	}
	#concepts li[id^="concepts_"]:before{
		padding-top: 105%;
	}
	#container.lazyloaded #concepts li#concepts_violet{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/w_violet.svg");
	}
	#container.lazyloaded #concepts li#concepts_pink{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/w_pink.svg");
	}
	#container.lazyloaded #concepts li#concepts_blue{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/w_blue.svg");
	}
	#container.lazyloaded #concepts li#concepts_orange{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/w_orange.svg");
	}
	#container.lazyloaded #concepts li#concepts_green{
		background-image: url("https://matsusima-navi.com/images/user/concept/concepts/w_green.svg");
	}
	#concepts li[id^="concepts_"] h3{
		top: 43.5%;
	}
	#concepts li[id^="concepts_"] p{
		top: 80%;
	}
	#concept picture img{
		width: 100%;
	}
}
@media screen and (min-width:768px) and (max-width:1279px){
	#concepts li[id^="concepts_"] h3{
		font-size: 2.5vw;
		font-size: 2.5dvw;
	}
	#concepts li[id^="concepts_"] p{
		font-size: 2.25vw;
		font-size: 2.25dvw;
	}
}
@media screen and (min-width:1280px){
	#concepts li[id^="concepts_"] h3{
		font-size: 200%;
	}
	#concepts li[id^="concepts_"] p{
		font-size: 175%;
	}
}


/**************************************************50
 * topic
 **************************************************/
#topic{
	background-color: #DEF3F9;
}
#topics{
	background-color: #FFFFFF;
}
#topics:not(.slick-initialized){
}
#topics.slick-initialized{
	position: relative;
}
#topics:not(.slick-initialized) .topics,
#topics.slick-initialized a.slick-slide{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: inline-block;
	text-decoration :none;
	transition: opacity 0.2s ease-out 0s;
	vertical-align: top;
}
#topics:not(.slick-initialized) .topics:hover,
#topics.slick-initialized a.slick-slide:hover{
	opacity: 0.7;
}
#topics:not(.slick-initialized) .topics{
	margin-top: 1em;
}
#topics.slick-initialized a.slick-slide{
	padding: 0 10px;
}
#topics:not(.slick-initialized) .topics picture,
#topics.slick-initialized a.slick-slide picture{
	margin-bottom: 0.5em;
	position: relative;
}
#topics:not(.slick-initialized) .topics picture:before,
#topics.slick-initialized a.slick-slide picture:before{
	content: "";
	display: block;
	padding-top: 100%;
	pointer-events: none;
}
#topics:not(.slick-initialized) .topics picture img,
#topics.slick-initialized a.slick-slide picture img{
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#topics .slick-dots{
	position: static;
}
#topics .slick-prev,
#topics .slick-next{
	height: 1em;
	line-height: 1em;
	top: 50%;
	bottom: 0;
	width: 1em;
}
#topics .slick-prev{
	-ms-transform: translate(-125%, -50%);
	-webkit-transform: translate(-125%, -50%);
	transform: translate(-125%, -50%);
}
#topics .slick-next{
	-ms-transform: translate(125%, -50%);
	-webkit-transform: translate(125%, -50%);
	transform: translate(125%, -50%);
}
#topics .slick-prev:before,
#topics .slick-next:before{
	background-color: #32B9DE;
	border-radius: 50%;
	color: #FFFFFF;
	font-family: "Material Design Icons";
	font-size: 100%;
}
#topics .slick-prev:before{
	content: "\F0141";
}
#topics .slick-next:before{
	content: "\F0142";
}
#topics .slick-dots li.slick-active button:before{
	background-color: #32B9DE;
}
@media screen and (max-width:479px){
	#topics:not(.slick-initialized) .topics{
		width: 100%;
	}
}
@media screen and (min-width:480px) and (max-width:639px){
	#topics:not(.slick-initialized) .topics{
		width: 49%;
	}
	#topics:not(.slick-initialized) .topics:nth-child(even){
		margin-left: 2%;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#topics:not(.slick-initialized) .topics{
		width: 32%;
	}
	#topics:not(.slick-initialized) .topics:not(:nth-child(3n+1)){
		margin-left: 2%;
	}
}
@media screen and (max-width:767px){
	#topic{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#topics{
		border-radius: 7px;
		margin: 0 auto;
		padding: 3.125% -webkit-calc(3.125% + 0.5em);
		padding: 3.125% calc(3.125% + 0.5em);
		width: 93.75%;
	}
}
@media screen and (min-width:768px){
	#topic{
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#topics{
		border-radius: 15px;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#topics{
		padding: 2em 4em;
	}
	#topics:not(.slick-initialized) .topics{
		width: 32%;
	}
	#topics:not(.slick-initialized) .topics:not(:nth-child(3n+1)){
		margin-left: 2%;
	}
	#topics .slick-prev,
	#topics .slick-next{
		font-size: 200%;
	}
	#topics .slick-prev{
		left: 2em;
	}
	#topics .slick-next{
		right: 2em;
	}
}
@media screen and (min-width:1024px){
	#topics{
		padding: 2em 6em;
	}
	#topics:not(.slick-initialized) .topics{
		width: 23.5%;
	}
	#topics:not(.slick-initialized) .topics:not(:nth-child(4n+1)){
		margin-left: 2%;
	}
	#topics .slick-prev,
	#topics .slick-next{
		font-size: 400%;
	}
	#topics .slick-prev{
		left: 1.5em;
	}
	#topics .slick-next{
		right: 1.5em;
	}
}


/**************************************************50
 * be_like
 **************************************************/
#be_like{
	background-position: center center;
	background-repeat: repeat;
	background-size: 60px auto;
}
#container.lazyloaded #be_like{
	background-image: url("https://matsusima-navi.com/images/user/be-like/pattern.png");
}
#be_like_box h2 img{
	width: 100%;
}
#be_like_box figure{
}
#be_like_box figure figcaption{
}
#be_like_box figure figcaption > strong{
	color: #FF75BF;
	display: block;
	text-align: center;
}
#be_like_box figure figcaption > hr{
	background-color: #E83E70;
}
#be_like_box figure picture{
}
#be_like_box figure picture img{
	width: 100%;
}
@media screen and (max-width:319px){
}
@media screen and (min-width:320px) and (max-width:359px){
}
@media screen and (min-width:360px) and (max-width:389px){
	#be_like_box figure figcaption > strong{
		font-size: 112.5%;
	}
}
@media screen and (min-width:390px){
	#be_like_box figure figcaption > strong{
		font-size: 125%;
	}
}
@media screen and (max-width:767px){
	#be_like{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#be_like_box{
		background-color: #FFFFFF;
		border-radius: 7px;
		padding: 3.125% 3.125%;
		margin: 0 auto;
		width: 93.75%;
	}
	#be_like_box h2{
		margin-bottom: 1.785714285714286%;
	}
	#be_like_box figure{
	}
	#be_like_box figure figcaption{
	}
	#be_like_box figure picture{
		margin-bottom: 0.5em;
	}
}
@media screen and (min-width:768px){
	#be_like{
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#be_like_box{
	}
	#be_like_box figure{
	}
	#be_like_box figure figcaption{
	}
	#be_like_box figure figcaption > strong{
		font-size: 150%;
		line-height: 1.6;
	}
	#be_like_box figure figcaption > hr{
		margin: 0.5em 0;
	}
	#be_like_box figure picture{
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#be_like_box{
		border-radius: 15px;
		padding: 1.5em 2em;
	}
	#be_like_box h2{
		margin-bottom: 1.5em;
	}
	#be_like_box picture{
		margin-bottom: 0.5em;
	}
}
@media screen and (max-width:1023px){
	#be_like_box{
		background-color: #FFFFFF;
	}
}
@media screen and (min-width:1024px){
	#be_like_box figure{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#be_like_box figure figcaption{
		background-color: #FFFFFF;
		border-radius: 15px
		display: table-cell;
		vertical-align: middle;
	}
	#be_like_box figure figcaption h2{
		margin-bottom: 0.5em;
	}
	#be_like_box figure picture{
		display: table-cell;
		vertical-align: middle;
		width: 44%;
	}
}
@media screen and (min-width:1024px) and (max-width:1279px){
	#be_like_box figure figcaption{
		padding: 2em 3em;
	}
}
@media screen and (min-width:1280px){
	#be_like_box figure figcaption{
		padding: 3em 4em;
	}
}


/**************************************************50
 * million
 **************************************************/
#million{
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	text-align: center;
}
#million_head{
}
#million_head h2{
}
#million_head h2 img{
}
#million_head p{
}
#million_head p img{
}
#millions{
	background-color: #FFFFFF;
	border: 1px solid #D2BE8B;
	position: relative;
}
#millions:before{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#container.lazyloaded #millions:before{
	background-image: url("https://matsusima-navi.com/images/user/million/ribbon.svg");
}
#millions figure{
}
#millions figure picture{
}
#millions figure picture img{
	width: 100%;
}
#millions figure figcaption{
}
#millions figure figcaption h3{
	border-bottom: 1px solid #84B2F4;
	position: relative;
}
#millions figure figcaption h3:before{
	background-position: left top;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}
#container.lazyloaded #millions figure figcaption h3:before{
	background-image: url("https://matsusima-navi.com/images/user/million/flower.webp");
}
#millions figure figcaption h3 img{
	position: relative;
	z-index: 2;
	width: 100%;
}
#millions figure figcaption p{
	text-align: left;
}
#millions figure figcaption .million_point{
}
#millions figure figcaption .million_point > li{
	background: -webkit-linear-gradient(left, #B4A1FF , #6EBDFF);
	background: linear-gradient(to right, #B4A1FF , #6EBDFF);
	border-radius: 3px;
	color: #FFFFFF;
	display: inline-block;
	vertical-align: top;
}
#millions .toggle_button{
}
#millions .toggle_button [class^="toggle_"]{
	background-color: #0096DF;
}
#millions > hr{
	background-color: #DCDCDC;
}
@media screen and (max-width:479px){
	#millions figure figcaption .million_point > li{
		width: 75%;
	}
}
@media screen and (min-width:480px) and (max-width:767px){
	#millions figure figcaption .million_point > li{
		width: 49%;
	}
	#millions figure figcaption .million_point > li:nth-child(even){
		margin-left: 1%;
	}
}
@media screen and (max-width:767px){
	#million{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#container.lazyloaded #million{
		background-image: url("https://matsusima-navi.com/images/user/million/back_020.webp");
	}
	#million_head{
	}
	#million_head:after{
	}
	#million_head h2{
		margin-bottom: -1%;
	}
	#million_head h2 img{
		width: 93.75%;
	}
	#million_head p{
	}
	#million_head p img{
		width: 90.625%;
	}
	#millions{
		border-radius: 7px;
		margin: 6.25% auto 0;
		padding: 3.125% 3.125%;
		width: -webkit-calc(93.75% + (1px * 2));
		width: calc(93.75% + (1px * 2));
	}
	#millions:before{
		height: 2em;
		width: 4em;
	}
	#millions figure{
	}
	#millions figure picture{
	}
	#millions figure figcaption{
	}
	#millions figure figcaption h3{
		margin-bottom: 1.785714285714286%;
		padding-bottom: 3.571428571428571%;
	}
	#millions figure figcaption h3:before{
		padding-top: 17.5%;
		top: 0;
		left: 2%;
		width: 20%;
	}
	#millions figure figcaption p{
	}
	#millions figure figcaption .million_point{
	}
	#millions figure figcaption .million_point > li{
		margin-top: 1.785714285714286%;
	}
	#millions .toggle_content{
		padding-top: 0.5em;
		display: none;
	}
	#millions .toggle_button{
	}
	#millions .toggle_button:not(.active) .toggle_less{
		display: none;
	}
	#millions .toggle_button .toggle_more{
		margin-top: 0.5em;
	}
	#millions .toggle_button.active .toggle_more{
		display: none;
	}
	#millions > hr{
		margin: 3.571428571428571% 0;
	}
}
@media screen and (min-width:768px){
	#million{
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#container.lazyloaded #million{
		background-image: url("https://matsusima-navi.com/images/user/million/back_010.webp");
	}
	#million_head{
		padding-bottom: 6%;
		position: relative;
	}
	#million_head:after{
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: block;
		padding-top: 28.125%;
		pointer-events: none;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 22.5%;
	}
	#container.lazyloaded #million_head:after{
		background-image: url("https://matsusima-navi.com/images/user/million/chara_010.webp");
	}
	#million_head h2{
	}
	#million_head h2 img{
		width: 100%;
	}
	#million_head p{
	}
	#million_head p img{
		width: 55.5%;
	}
	#millions{
		border-radius: 15px;
		padding: 2em 3em;
	}
	#millions:before{
		height: 2.5em;
		width: 5em;
	}
	#millions figure{
	}
	#millions figure picture{
	}
	#millions figure figcaption{
	}
	#millions figure figcaption h3{
		margin-bottom: -webkit-calc(1.5% + 0.5em);
		margin-bottom: calc(1.5% + 0.5em);
		padding-bottom: 1.5%;
	}
	#millions figure figcaption h3:before{
		padding-top: 15.09375%;
		top: 0;
		left: 0;
		width: 17.25%;
	}
	#millions figure figcaption p{
	}
	#millions figure figcaption .million_point{
	}
	#millions figure figcaption .million_point > li{
		margin-bottom: 0.5em;
	}
	#million_1 .million_point > li{
		width: 24.25%;
	}
	#million_2 .million_point > li{
		width: 49.5%;
	}
	#million_1 .million_point > li:not(:nth-child(4n+1)){
		margin-left: 1%;
	}
	#million_2 .million_point > li:nth-child(even){
		margin-left: 1%;
	}
	#millions .toggle_content{
		display: block !important;
	}
	#millions .toggle_button{
		display: none !important;
	}
	#millions > hr{
		margin: 2em 0;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#million_1 .million_point > li{
		font-size: 1.75dvw;
	}
	#million_2 .million_point > li{
		font-size: 1.75dvw;
	}
}
@media screen and (max-width:1023px){
	#millions figure picture{
		padding: 0 12.5%;
	}
}
@media screen and (min-width:1024px){
	#millions figure{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#millions figure picture{
		display: table-cell;
		padding-left: 0;
		padding-right: 2em;
		vertical-align: middle;
		width: 37.25%;
	}
	#millions figure figcaption + picture{
		padding-left: 2em;
		padding-right: 0;
	}
	#millions figure figcaption{
		display: table-cell;
		vertical-align: middle;
	}
}
@media screen and (min-width:1024px) and (max-width:1279px){
	#million_1 .million_point > li{
		font-size: 1.125dvw;
	}
	#million_2 .million_point > li{
		font-size: 1.125dvw;
	}
}
@media screen and (min-width:1280px){
}


/**************************************************50
 * salary
 **************************************************/
#salary{
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: relative;
	text-align: center;
}
#salary_point{
}
#salary_point [id^="salary_point_"]{
	display: inline-block;
	vertical-align: top;
}
#salary_point [id^="salary_point_"] picture{
}
#salary_point [id^="salary_point_"] picture img{
	width: 100%;
}
#salary_point_violet{
}
#salary_point_pink{
}
#salary_point_blue{
}
#salary_point [id^="salary_point_"] .salary_points{
	background-position: center top, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% auto, 100% auto;
}
#container.lazyloaded #salary_point_violet .salary_points{
	background-image: url("https://matsusima-navi.com/images/user/salary/frame/violet_upper.svg"), url("https://matsusima-navi.com/images/user/salary/frame/violet_lower.svg");
}
#container.lazyloaded #salary_point_pink .salary_points{
	background-image: url("https://matsusima-navi.com/images/user/salary/frame/pink_upper.svg"), url("https://matsusima-navi.com/images/user/salary/frame/pink_lower.svg");
}
#container.lazyloaded #salary_point_blue .salary_points{
	background-image: url("https://matsusima-navi.com/images/user/salary/frame/blue_upper.svg"), url("https://matsusima-navi.com/images/user/salary/frame/blue_lower.svg");
}
#salary_point [id^="salary_point_"] .salary_points h3{
	line-height: 1;
	position: relative;
}
#salary_point_violet h3{
	color: #956BAC;
}
#container.lazyloaded #salary_point_pink h3{
	color: #E9528E;
}
#salary_point_blue h3{
	color: #596EB4;
}
#salary_point [id^="salary_point_"] .salary_points h3:before,
#salary_point [id^="salary_point_"] .salary_points h3:after{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	height: 1em;
	pointer-events: none;
	position: absolute;
	top: 50%;
	width: 1em;
}
#container.lazyloaded #salary_point #salary_point_violet .salary_points h3:before,
#container.lazyloaded #salary_point #salary_point_violet .salary_points h3:after{
	background-image: url("https://matsusima-navi.com/images/user/salary/icon/violet.svg");
}
#container.lazyloaded #salary_point #salary_point_pink .salary_points h3:before,
#container.lazyloaded #salary_point #salary_point_pink .salary_points h3:after{
	background-image: url("https://matsusima-navi.com/images/user/salary/icon/pink.svg");
}
#container.lazyloaded #salary_point #salary_point_blue .salary_points h3:before,
#container.lazyloaded #salary_point #salary_point_blue .salary_points h3:after{
	background-image: url("https://matsusima-navi.com/images/user/salary/icon/blue.svg");
}
#salary_point [id^="salary_point_"] .salary_points h3:before{
	left: -webkit-calc(50% + 6em);
	left: calc(50% + 6em);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#salary_point [id^="salary_point_"] .salary_points h3:after{
	right: -webkit-calc(50% + 6em);
	right: calc(50% + 6em);
	-ms-transform: translate(50%, -50%);
	-webkit-transform: translate(50%, -50%);
	transform: translate(50%, -50%);
}
#salary_point [id^="salary_point_"] .salary_points p{
	background-position: center center;
	background-repeat: repeat-y;
	background-size: 100% auto;
	padding: 0.5em 2em;
	text-align: left;
}
#container.lazyloaded #salary_point_violet .salary_points p{
	background-image: url("https://matsusima-navi.com/images/user/salary/frame/violet_middle.svg");
}
#container.lazyloaded #salary_point_pink .salary_points p{
	background-image: url("https://matsusima-navi.com/images/user/salary/frame/pink_middle.svg");
}
#container.lazyloaded #salary_point_blue .salary_points p{
	background-image: url("https://matsusima-navi.com/images/user/salary/frame/blue_middle.svg");
}
#salary_propose_wrap{
}
#salary_propose_wrap:before,
#salary_propose_wrap:after{
	background-repeat: no-repeat;
	background-size: 100% auto;
	content: "";
	display: block;
	pointer-events: none;
}
#salary_propose_wrap:before{
	background-position: center top;
}
#salary_propose_wrap:after{
	background-position: center bottom;
}
#salary_propose{
	background-position: center center;
	background-repeat: repeat-y;
	background-size: 100% auto;
}
#salary_propose:after{
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	pointer-events: none;
}
#container.lazyloaded #salary_propose:after{
	background-image: url("https://matsusima-navi.com/images/user/salary/chara.webp");
}
#salary_propose > strong{
	display: block;
}
#salary_propose > strong span{
	background: -webkit-linear-gradient(left, #FDF6E7 0%, #FFCBE7 12.5%, #BBCFEC 50%, #53B6FF 100%);
	background: linear-gradient(to right, #FDF6E7 0%, #FFCBE7 12.5%, #BBCFEC 50%, #53B6FF 100%);
	border-radius: 0.375em;
	color: #FFFFFF;
	display: inline-block;
	letter-spacing: 0.0625em;
	line-height: 1.5;
	padding: 0.25em 1em;
	text-shadow: #8DB0FF 0.125em 0px,  #8DB0FF -0.125em 0px, #8DB0FF 0px -0.125em, #8DB0FF 0px 0.125em, #8DB0FF 0.125em 0.125em , #8DB0FF -0.125em 0.125em, #8DB0FF 0.125em -0.125em, #8DB0FF -0.125em -0.125em, #8DB0FF 0.0625em 0.125em,  #8DB0FF -0.0625em 0.125em, #8DB0FF 0.0625em -0.125em, #8DB0FF -0.0625em -0.125em, #8DB0FF 0.125em 0.0625em,  #8DB0FF -0.125em 0.0625em, #8DB0FF 0.125em -0.0625em, #8DB0FF -0.125em -0.0625em;
}
@media screen and (min-width:414px) and (max-width:767px){
	#salary_propose_br{
		display: none;
	}
}
@media screen and (max-width:639px){
	#salary_point [id^="salary_point_"]{
		width: 93.75%;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#salary_point [id^="salary_point_"]{
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
}
@media screen and (max-width:767px){
	#salary{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#container.lazyloaded #salary{
		background-image: url("https://matsusima-navi.com/images/user/salary/back_020.webp");
	}
	#salary figure{
		margin-bottom: 6.25%;
	}
	#salary figure picture{
		padding-left: 3.125%;
		padding-right: 3.125%;
	}
	#salary figure figcaption{
		padding: 0 3.125%;
	}
	#salary_point{
	}
	#salary_point [id^="salary_point_"]{
		margin: 0 1.56235% 6.25%;
	}
	#salary_point [id^="salary_point_"] picture{
		margin-bottom: 3.125%;
	}
	#salary_point [id^="salary_point_"] .salary_points{
		padding: calc(3.125% + 0.5em) 0 3.125%;
	}
	#salary_point [id^="salary_point_"] .salary_points h3{
		font-size: 125%;
	}
	#salary_point [id^="salary_point_"] .salary_points h3:before{
		left: 2.1em;
	}
	#salary_point [id^="salary_point_"] .salary_points h3:after{
		right: 2.1em;
	}
	#salary_propose_wrap{
	}
	#salary_propose_wrap:before,
	#salary_propose_wrap:after{
		margin: 0 auto;
		padding-top: 2em;
		width: 93.75%;
	}
	#container.lazyloaded #salary_propose_wrap:before{
		background-image: url("https://matsusima-navi.com/images/user/salary/frame/box_t_upper.png");
	}
	#container.lazyloaded #salary_propose_wrap:after{
		background-image: url("https://matsusima-navi.com/images/user/salary/frame/box_t_lower.png");
	}
	#salary_propose{
		margin: 0 auto;
		width: 93.75%;
	}
	#container.lazyloaded #salary_propose{
		background-image: url("https://matsusima-navi.com/images/user/salary/frame/box_t_middle.png");
	}
	#salary_propose:after{
		margin-top: -1em;
		padding-top: 62.5%;
		position: relative;
		top: 2em;
	}
	#salary_propose > strong{
		margin-bottom: 1em;
	}
	#salary_propose > strong span{
		margin: 0.5em 0.25em 0;
	}
	#salary_propose p{
	}
}
@media screen and (min-width:768px){
	#salary{
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#container.lazyloaded #salary{
		background-image: url("https://matsusima-navi.com/images/user/salary/back_010.webp");
	}
	#salary figure{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#salary figure figcaption{
		display: table-cell;
		vertical-align: middle;
	}
	#salary figure picture{
		display: table-cell;
		padding-left: 1.5%;
		vertical-align: middle;
		width: 50%;
	}
	#salary_point{
		margin-bottom: 3.125em;
	}
	#salary_point [id^="salary_point_"]{
		margin-top: 3.125em;
		width: 31.25%;
	}
	#salary_point [id^="salary_point_"] picture{
		margin-bottom: 1.25em;
	}
	#salary_point [id^="salary_point_"]:not(:nth-child(3n+1)){
		margin-left: 3.125%;
	}
	#salary_point [id^="salary_point_"] .salary_points{
		padding: 1.5em 0 1em;
	}
	#salary_point [id^="salary_point_"] .salary_points h3{
	}
	#salary_point [id^="salary_point_"] .salary_points p{
	}
	#salary_propose_wrap{
	}
	#salary_propose_wrap:before,
	#salary_propose_wrap:after{
		padding-top: 2em;
	}
	#container.lazyloaded #salary_propose_wrap:before{
		background-image: url("https://matsusima-navi.com/images/user/salary/frame/box_w_upper.png");
	}
	#container.lazyloaded #salary_propose_wrap:after{
		background-image: url("https://matsusima-navi.com/images/user/salary/frame/box_w_lower.png");
	}
	#salary_propose{
		padding: 0 7%;
		position: relative;
		text-align: left;
	}
	#salary_propose:after{
		position: absolute;
		bottom: -2em;
		right: 2em;
	}
	#container.lazyloaded #salary_propose{
		background-image: url("https://matsusima-navi.com/images/user/salary/frame/box_w_middle.png");
	}
	#salary_propose > strong{
	}
	#salary_propose > strong span{
		font-size: 125%;
		margin-right: 0.5em;
		margin-bottom: 0.25em;
		vertical-align: baseline;
	}
	#salary_propose p{
		padding-left: 2em;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#salary_point [id^="salary_point_"] .salary_points h3{
		font-size: 125%;
	}
	#salary_point [id^="salary_point_"] .salary_points h3:before{
		left: 2.1em;
	}
	#salary_point [id^="salary_point_"] .salary_points h3:after{
		right: 2.1em;
	}
	#salary_propose:after{
		height: 14em;
		width: 10.5em;
	}
	#salary_propose_br{
		display: none;
	}
}
@media screen and (min-width:1024px){
	#salary_point [id^="salary_point_"] .salary_points h3{
		font-size: 150%;
	}
	#salary_point [id^="salary_point_"] .salary_points h3:before{
		left: 1.833333333333333em;
	}
	#salary_point [id^="salary_point_"] .salary_points h3:after{
		right: 1.833333333333333em;
	}
	#salary_propose:after{
		height: 12em;
		width: 9em;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#salary_propose_wrap{
		font-size: 125%;
	}
}
@media screen and (min-width:1200px){
	#salary_propose_wrap{
		font-size: 150%;
	}
}


/**************************************************50
 * actual
 **************************************************/
#actual{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}
#actual > hr{
	background: -webkit-linear-gradient(left, #EFCC7E 0%, #E0BA6A 50%, #EFCC7E 100%);
	background: linear-gradient(to right, #EFCC7E 0%,  #E0BA6A 50%, #EFCC7E 100%);
}
@media screen and (max-width:767px){
	#container.lazyloaded #actual{
		background-image: url("https://matsusima-navi.com/images/user/actual/back_020.webp");
	}
	#actual > hr{
		height: 4px;
	}
}
@media screen and (min-width:768px){
	#container.lazyloaded #actual{
		background-image: url("https://matsusima-navi.com/images/user/actual/back_010.webp");
	}
	#actual > hr{
		height: 10px;
	}
}


/**************************************************50
 * statement
 **************************************************/
#statement{
}
#statement h2{
}
#statement h2 img{
}
#statements{
}
#statements dl{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	position: relative;
	vertical-align: top;
}
#statements dl:before{
	content: "";
	display: block;
	padding-top: 140%;
	pointer-events: none;
}
#container.lazyloaded #statements #statement_violet{
	background-image: url("https://matsusima-navi.com/images/user/statement/statements/violet.svg");
}
#container.lazyloaded #statements #statement_pink{
	background-image: url("https://matsusima-navi.com/images/user/statement/statements/pink.svg");
}
#container.lazyloaded #statements #statement_blue{
	background-image: url("https://matsusima-navi.com/images/user/statement/statements/blue.svg");
}
#container.lazyloaded #statements #statement_orange{
	background-image: url("https://matsusima-navi.com/images/user/statement/statements/orange.svg");
}
#container.lazyloaded #statements #statement_green{
	background-image: url("https://matsusima-navi.com/images/user/statement/statements/green.svg");
}
#statements dl dt{
	line-height: 1.4;
	position: absolute;
	top: 31.25%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
#statements dl dt span{
	color: #E83E70;
	font-size: 150%;
	line-height: 1;
}
#statements dl dd{
}
#statements dl dd img{
	position: absolute;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
#statements #statement_violet img{
	top: 69%;
}
#statements #statement_pink img{
	top: 69%;
}
#statements #statement_blue img{
	top: 61%;
}
#statements #statement_orange img{
	top: 61%;
}
#statements #statement_green img{
	top: 66%;
}
#statements dl dd p{
	line-height: 1.6;
	padding: 0 2.5em;
	position: absolute;
	bottom: 1.6em;
	left: 50%;
	-ms-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	width: 100%;
}
@media screen and (max-width:639px){
	#statements dl{
		width: 75%;
	}
	#statements dl dt{
		font-size: 5.1vw;
		font-size: 5.1dvw;
	}
	#statements dl dd{
		font-size: 3.4vw;
		font-size: 3.4dvw;
	}
}
@media screen and (min-width:480px) and (max-width:767px){
	#statements dl{
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
	#statements dl dt{
		font-size: 3.1875vw;
		font-size: 3.1875dvw;
	}
	#statements dl dd{
		font-size: 2.125vw;
		font-size: 2.125dvw;
	}
}
@media screen and (max-width:767px){
	#statement{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#statement h2{
	}
	#statement h2 img{
		width: 93.75%;
	}
	#statements{
	}
	#statements dl{
		margin: 3.125% 1.5625% 0;
	}
}
@media screen and (min-width:768px){
	#statement{
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#statement h2{
	}
	#statement h2 img{
		width: 100%;
	}
	#statements{
	}
	#statements dl{
		margin-top: 3.125em;
		width: 29.5%;
	}
	#statements dl:not(:nth-child(3n+1)){
		margin-left: 5.75%;
	}
}
@media screen and (min-width:768px) and (max-width:1279px){
	#statements dl dt{
		font-size: 1.875vw;
		font-size: 1.875dvw;
	}
	#statements dl dd{
		font-size: 1.25vw;
		font-size: 1.25dvw;
	}
}
@media screen and (min-width:1280px){
	#statements dl dt{
		font-size: 150%;
	}
	#statements dl dd{
	}
}


/**************************************************50
 * example
 **************************************************/
#example{
	text-align: center;
}
#example .example{
	background-position: center top, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% auto, 100% auto;
	position: relative;
}
#example .example:before,
#example .example:after{
	content: "";
	display: block;
	pointer-events: none;
}
#example .example .example_box{
	background-position: center center;
	background-repeat: repeat-y;
	background-size: 100% auto;
}
#example .example .example_box:after{
	background-position: center bottom;
	background-repeat:no-repeat;
	background-size: contain;
	content: "";
	display: block;
	pointer-events: none;
	position: absolute;
	bottom: 0;
}
#container.lazyloaded #example_violet .example_box:after{
	background-image: url("https://matsusima-navi.com/images/user/example/figure/violet.svg");
}
#container.lazyloaded #example_pink .example_box:after{
	background-image: url("https://matsusima-navi.com/images/user/example/figure/pink.svg");
}
#container.lazyloaded #example_blue .example_box:after{
	background-image: url("https://matsusima-navi.com/images/user/example/figure/blue.svg");
}
#container.lazyloaded #example_orange .example_box:after{
	background-image: url("https://matsusima-navi.com/images/user/example/figure/orange.svg");
}
#container.lazyloaded #example_green .example_box:after{
	background-image: url("https://matsusima-navi.com/images/user/example/figure/green.svg");
}
#example .example .example_box h3{
}
#example .example .example_box h3{
}
#example .example .example_box h3 b{
}
#example .example .example_box h3 b:before{
	background-position: center center;
	background-repeat:no-repeat;
	background-size: contain;
	content: "";
	padding-top: 1em;
	pointer-events: none;
}
#container.lazyloaded #example .example .example_box h3 b:before{
	background-image: url("https://matsusima-navi.com/images/user/example/ribbon.svg");
}
#example .example .example_box h3 span{
}
#example .example .example_box h3 + strong{
	background-color: #32B9DE;
	border-radius: 1000em;
	color: #FFFFFF;
	display: inline-block;
}
#example .example .example_box figure{
}
#example .example .example_box figure .example_img{
}
#example .example .example_box figure .example_img img{
	width: 100%;
}
#example .example .example_box figure figcaption{
}
#example .example .example_box figure figcaption p{
	text-align: left;
}
#example .example .example_box figure{
}
#example_violet .toggle_button [class^="toggle_"]{
	background-color: #B0B0D9;
}
#example_pink .toggle_button [class^="toggle_"]{
	background-color: #FFABC1;
}
#example_blue .toggle_button [class^="toggle_"]{
	background-color: #9ECCEC;
}
#example_orange .toggle_button [class^="toggle_"]{
	background-color: #E0CA86;
}
#example_green .toggle_button [class^="toggle_"]{
	background-color: #DDD;
}
@media screen and (max-width:767px){
	#example{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#statement + #example{
		padding-top: 0;
	}
	#example .example{
		margin-top: 6.25%;
		margin-left: auto;
		margin-right: auto;
		padding: 10% 0;
		width: 93.75%;
	}
	#example .example:first-child{
		margin-top: 0;
	}
	#example .example:before,
	#example .example:after{
	}
	#example .example .example_box{
		margin: -3.333333333333333% 0;
		padding: 0 3.333333333333333%;
	}
	#example .example .example_box h3{
	}
	#example .example .example_box h3 b{
		font-size: 150%;
	}
	#example .example .example_box h3 b:before{
		display: block;
	}
	#example .example .example_box h3 span{
		font-size: 125%;
	}
	#example .example .example_box h3 + strong{
	}
	#example .example .example_box figure{
		margin-top: 5.357142857142857%;
	}
	#example .example .example_box figure .example_img{
		margin-top: 1.785714285714286%;
	}
	#example .example .example_box figure .example_img > * + picture{
		margin-top: 3.333333333333333%;
	}
	#example .example .example_box figure figcaption{
	}
	#example .example .example_box figure figcaption p{
	}
	#example .example_box .toggle_button .toggle_more{
		margin-top: 1.785714285714286%;
	}
}
@media screen and (min-width:768px){
	#example{
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#statement + #example{
		padding-top: 0;
	}
	#example .example{
		margin-top: 3.125em;
		margin-left: auto;
		margin-right: auto;
		width: -webkit-calc(100% - (2em * 2));
		width: calc(100% - (2em * 2));
		max-width: 62.5em;
	}
	#example .example:first-child{
		margin-top: 0;
	}
	#example .example:before,
	#example .example:after{
	}
	#example .example .example_box{
	}
	#example .example .example_box h3{
	}
	#example .example .example_box h3 b{
		font-size: 200%;
	}
	#example .example .example_box h3 b:before{
	}
	#example .example .example_box h3 span{
		font-size: 150%;
	}
	#example .example .example_box h3 + strong{
	}
	#example .example .example_box figure{
	}
	#example .example .example_box figure .example_img{
	}
	#example .example .example_box figure figcaption{
	}
	#example .example .example_box figure figcaption p{
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#example .example{
		padding: 8% 0;
	}
	#example .example .example_box{
		margin: -2% 0;
		padding: 0 2em;
	}
	#example .example .example_box figure .example_img{
		margin-top: 1.5em;
		margin-bottom: 1.5em;
	}
	#example .example .example_box figure .example_img picture:first-child{
		display: inline-block;
		vertical-align: middle;
		width: 46.875%;
	}
	#example .example .example_box figure .example_img picture:last-child{
		display: inline-block;
		margin-left: 3.125%;
		vertical-align: middle;
		width: 50%;
	}
}
@media screen and (max-width:1023px){
	#container.lazyloaded #example .example{
		background-image: url("https://matsusima-navi.com/images/user/example/frame/t_upper.svg"), url("https://matsusima-navi.com/images/user/example/frame/t_lower.svg");
	}
	#example .example .example_box:after{
		padding-top: 8%;
		right: 5%;
		width: 28%;
	}
	#container.lazyloaded #example .example .example_box{
		background-image: url("https://matsusima-navi.com/images/user/example/frame/t_middle.svg");
	}
	#example .example .example_box h3{
		line-height: 1.4;
	}
	#example .example .example_box h3 b:before{
		display: block;
	}
	#example .example .example_box h3 + strong{
		margin-top: 0.25em;
		width: 16em;
	}
	#example .example .example_box figure .example_img picture img[src*="salary_w_"]{
		display: none;
	}
	#example .example_box .toggle_content{
		display: none;
	}
	#example .example_box .toggle_button{
	}
	#example .example_box .toggle_button:not(.active) .toggle_less{
		display: none;
	}
	#example .example_box .toggle_button.active .toggle_more{
		display: none;
	}
}
@media screen and (min-width:1024px){
	#example .example{
		padding: 2.5em 0;
	}
	#container.lazyloaded #example .example{
		background-image: url("https://matsusima-navi.com/images/user/example/frame/w_upper.svg"), url("https://matsusima-navi.com/images/user/example/frame/w_lower.svg");
	}
	#container.lazyloaded #example .example .example_box{
		background-image: url("https://matsusima-navi.com/images/user/example/frame/w_middle.svg");
	}
	#example .example .example_box{
	}
	#example .example .example_box:after{
		padding-top: 4%;
		right: 2.5%;
		width: 14%;
	}
	#example .example .example_box h3{
		float: left;
		line-height: 1;
		margin-left: 3em;
	}
	#example .example .example_box h3 b{
	}
	#example .example .example_box h3 b:before{
		display: inline-block;
		margin-right: 0.25em;
		position: relative;
		top: 0.125em;
		vertical-align: baseline;
		width: 2em;
	}
	#example .example .example_box h3 span{
	}
	#example .example .example_box h3 + strong{
		float: right;
		margin-right: 3em;
		position: relative;
		top: 0.25em;
		width: 18em;
	}
	#example .example .example_box figure{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		margin: 1em auto 0;
		table-layout: fixed;
		width: -webkit-calc(100% - (3em * 2));
		width: calc(100% - (3em * 2));
	}
	#example .example .example_box figure .example_img{
		display: table-cell;
		padding-top: 0.5em;
		vertical-align: top;
		width: 43.75%;
	}
	#example .example .example_box figure .example_img > * + picture{
		margin-top: 3.25%;
	}
	#example .example .example_box figure .example_img picture img[src*="salary_t_"]{
		display: none;
	}
	#example .example .example_box figure figcaption{
		display: table-cell;
		padding-left: 2em;
		vertical-align: top;
	}
	#example .example_box .toggle_content{
		display: block !important;
	}
	#example .example_box .toggle_button{
		display: none !important;
	}
}


/**************************************************50
 * beginner
 **************************************************/
#beginner{
	background-position: center top;
	background-repeat: no-repeat;
	text-align: center;
}
#beginner_box{
	background-color: #FFFFFF;
	box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
	margin-left: auto;
	margin-right: auto;
}
#beginner_box h2{
}
#beginner_box h2 img{
}
#beginner_box > strong{
	display: block;
}
#beginner_box > strong:before,
#beginner_box > strong:after{
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	pointer-events: none;
	position: absolute;
}
#beginner_box > strong:before{
	background-position: center center;
	top: 0;
	left: 0;
}
#container.lazyloaded #beginner_box > strong:before{
	background-image: url("https://matsusima-navi.com/images/user/beginner/flower.webp");
}
#beginner_box > strong:after{
	background-position: center bottom;
	padding-top: 80%;
	bottom: 0;
	right: 0;
	-ms-transform: translate(25%, 0);yyy
	-webkit-transform: translate(25%, 0);
	transform: translate(25%, 0);
}
#container.lazyloaded #beginner_box > strong:after{
	background-image: url("https://matsusima-navi.com/images/user/beginner/chara.webp");
}
#beginner_box p{
}
#beginner_box p strong{
	color: #FF75BF;
}
#beginner > strong{
	display: block;
}
#beginner_point{
}
#beginner_point [id^="beginner_point_"]{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	position: relative;
	vertical-align: top;
}
#container.lazyloaded #beginner_point #beginner_point_violet{
	background-image: url("https://matsusima-navi.com/images/user/beginner/point/violet.svg");
}
#container.lazyloaded #beginner_point #beginner_point_pink{
	background-image: url("https://matsusima-navi.com/images/user/beginner/point/pink.svg");
}
#container.lazyloaded #beginner_point #beginner_point_blue{
	background-image: url("https://matsusima-navi.com/images/user/beginner/point/blue.svg");
}
#container.lazyloaded #beginner_point #beginner_point_orange{
	background-image: url("https://matsusima-navi.com/images/user/beginner/point/orange.svg");
}
#beginner_point [id^="beginner_point_"]:before{
	content: "";
	display: block;
	padding-top: 90%;
	pointer-events: none;
}
#beginner_point [id^="beginner_point_"] p{
	line-height: 1.5;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
@media screen and (max-width:319px){
	#beginner_point [id^="beginner_point_"]{
		width: 93.75%;
	}
	#beginner_point [id^="beginner_point_"] p{
		font-size: 8vw;
		font-size: 8dvw;
	}
}
@media screen and (min-width:320px) and (max-width:639px){
	#beginner_point{
		padding: 0 1.5625%;
	}
	#beginner_point [id^="beginner_point_"]{
		width: 50%;
	}
	#beginner_point [id^="beginner_point_"] p{
		font-size: 4vw;
		font-size: 4dvw;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#beginner_point{
		padding: 0 1.5625%;
	}
	#beginner_point [id^="beginner_point_"]{
		width: 25%;
	}
	#beginner_point [id^="beginner_point_"] p{
		font-size: 2vw;
		font-size: 2dvw;
	}
}
@media screen and (max-width:767px){
	#beginner{
		background-size: 200% auto;
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#container.lazyloaded #beginner{
		background-image: url("https://matsusima-navi.com/images/user/beginner/back_020.webp");
	}
	#beginner_box{
		margin-bottom: 6.25%;
		padding: 3.125% 3.125%;
		width: 93.75%;
	}
	#beginner_box h2{
	}
	#beginner_box h2 img{
		width: 62.5%;
	}
	#beginner_box > strong:before,
	#beginner_box > strong:after{
	}
	#beginner_box > strong:before{
	}
	#beginner_box > strong:after{
		margin-bottom: -webkit-calc(-1px - 0.5em);
		margin-bottom: calc(-1px - 0.5em);
	}
	#beginner_box hr{
		margin: 0.5em auto;
	}
	#beginner_box p{
		text-align: left;
	}
	#beginner > strong{
		position: relative;
	}
	#beginner > strong img{
		width: 93.75%;
	}
	#beginner_box hr{
		width: 100%;
	}
	#beginner_point{
	}
	#beginner_point [id^="beginner_point_"]{
		margin: 3.125% 0 0;
	}
}
@media screen and (min-width:768px){
	#beginner{
		background-size: 100% auto;
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#container.lazyloaded #beginner{
		background-image: url("https://matsusima-navi.com/images/user/beginner/back_010.webp");
	}
	#beginner_box{
		margin-bottom: 3.125em;
		width: -webkit-calc(100% - (2em * 2));
		width: calc(100% - (2em * 2));
		max-width: 58.5em;
	}
	#beginner_box h2{
	}
	#beginner_box h2 img{
	}
	#beginner_box > strong{
		font-size: 125%;
	}
	#beginner_box > strong:before,
	#beginner_box > strong:after{
	}
	#beginner_box > strong:before{
	}
	#beginner_box > strong:after{
	}
	#beginner_box hr{
		margin: 1em auto;
	}
	#beginner_box p{
		font-size: 125%;
	}
	#beginner > strong{
	}
	#beginner > strong img{
		width: 60%;
	}
	#beginner_point{
	}
	#beginner_point [id^="beginner_point_"]{
		margin: 3.125em 0.5% 0;
		width: 24%;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#beginner_box{
		padding: 2em 0;
	}
	#beginner_box h2 img{
		width: 56.25%;
	}
	#beginner_box > strong{
		padding: 0 3em;
	}
	#beginner_box > strong:after{
		margin-bottom: -webkit-calc(-1px - 0.8em);
		margin-bottom: calc(-1px - 0.8em);
	}
	#beginner_box p{
		padding: 0 3em;
	}
	#beginner_box hr{
		width: -webkit-calc(100% - (3em * 2));
		width: calc(100% - (3em * 2));
	}
}
@media screen and (min-width:768px) and (max-width:1199px){
	#beginner_point [id^="beginner_point_"] p{
		font-size: 2vw;
		font-size: 2dvw;
	}
}
@media screen and (max-width:1023px){
	#beginner_box > strong{
		margin-top: 0.5em;
		position: relative;
	}
	#beginner_box > strong:before{
		padding-top: 23.4375%;
		-ms-transform: translate(-25%, -70%);
		-webkit-transform: translate(-25%, -70%);
		transform: translate(-25%, -70%);
		width: 31.25%;
	}
	#beginner_box > strong:after{
		width: 25%;
	}
}
@media screen and (min-width:1024px){
	#beginner_box{
		position: relative;
	}
	#beginner_box > strong:before{
		padding-top: 19.3125%;
		-ms-transform: translate(-37.5%, -43.75%);
		-webkit-transform: translate(-37.5%, -43.75%);
		transform: translate(-37.5%, -43.75%);
		width: 25.75%;
	}
	#beginner_box > strong:after{
		width: 25%;
	}
	#beginner_box hr{
		width: 80%;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#beginner_box{
		padding: 2em 18%;
	}
	#beginner_box h2 img{
		width: 83.3333333333333%;
	}
}
@media screen and (min-width:1200px){
	#beginner_box{
		padding: 2em 14%;
	}
	#beginner_box h2 img{
		width: 83.3333333333333%;
	}
	#beginner_point [id^="beginner_point_"] p{
		font-size: 162.5%;
	}
}

/** - message - **/
#beginner_message{
}
#beginner_message picture{
}
#beginner_message picture img{
	width: 100%;
}
#beginner_message figcaption{
	text-align: left;
}
#beginner_message figcaption p{
}
#beginner_message figcaption p + p{
	margin-top: 1em;
}
#beginner_message figcaption p strong{
	color: #FF75BF;
}
@media screen and (max-width:767px){
	#beginner_message{
		margin-top: 6.25%;
	}
	#beginner_message picture{
		margin-bottom: 1em;
		padding: 0 3.125%;
	}
	#beginner_message figcaption{
	}
	#beginner_message figcaption p{
		padding: 0 3.125%;
	}
}
@media screen and (min-width:768px){
	#beginner_message{
		margin-top: 3.125em;
	}
	#beginner_message picture{
	}
	#beginner_message figcaption{
	}
	#beginner_message figcaption p{
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#beginner_message picture{
		margin-bottom: 1.5em;
		padding: 0 12.5%;
	}
}
@media screen and (max-width:1023px){
}
@media screen and (min-width:1024px){
	#beginner_message{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#beginner_message picture{
		display: table-cell;
		padding-right: 1em;
		vertical-align: middle;
		width: 50%;
	}
	#beginner_message figcaption{
		background-color: #FFFFFF;
		border-radius: 15px;
		display: table-cell;
		font-size: 112.5%;
		padding-left: 1em;
		vertical-align: middle;
	}
}


/**************************************************50
 * separator
 **************************************************/
#separator{
	background-position: center center;
	background-repeat: repeat-y;
	background-size: 100% auto;
}
#separator:before{
	content: "";
	display: block;
	pointer-events: none;
}
@media screen and (max-width:767px){
	#container.lazyloaded #separator{
		background-image: url("https://matsusima-navi.com/images/user/separator/pattern_020.webp");
	}
	#separator:before{
		padding-top: 6.25%;
	}
}
@media screen and (min-width:768px){
	#container.lazyloaded #separator{
		background-image: url("https://matsusima-navi.com/images/user/separator/pattern_010.webp");
	}
	#separator:before{
		padding-top: 3.125em;
	}
}


/**************************************************50
 * faq
 **************************************************/
#faq{
	background-color: #FFFEF1;
	background-position: center top, center bottom, center center;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 100% auto, 100% auto, cover;
	text-align: center;
}
#faqs{
	position: relative;
}
#faqs:before{
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	top: 0;
	-ms-transform: translate(0, -100%);
	-webkit-transform: translate(0, -100%);
	transform: translate(0, -100%);
}
#container.lazyloaded #faqs:before{
	background-image: url("https://matsusima-navi.com/images/user/faq/chara.webp");
}
#faqs [class^="faqs_"]{
	background-color: #FFFFFF;
	border-style: solid;
	border-width: 1px;
}
#faqs .faqs_salary{
	border-color: #8B95EC;
}
#faqs .faqs_interview{
	border-color: #F489AE;
}
#faqs .faqs_work{
	border-color: #69CBFF;
}
#faqs .faqs_workplace{
	border-color: #46C896;
}
#faqs [class^="faqs_"] h3{
	font-weight: normal;
	position: relative;
	text-align: left;
}
#faqs .faqs_salary h3{
	color: #8B95EC;
}
#faqs .faqs_interview h3{
	color: #F489AE;
}
#faqs .faqs_work h3{
	color: #69CBFF;
}
#faqs .faqs_workplace h3{
	color: #46C896;
}
#faqs [class^="faqs_"] h3:before{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	line-height: 1;
	pointer-events: none;
	position: absolute;
}
#container.lazyloaded #faqs .faqs_salary h3:before{
	background-image: url("https://matsusima-navi.com/images/user/faq/icon/q_violet.svg");
}
#container.lazyloaded #faqs .faqs_interview h3:before{
	background-image: url("https://matsusima-navi.com/images/user/faq/icon/q_pink.svg");
}
#container.lazyloaded #faqs .faqs_work h3:before{
	background-image: url("https://matsusima-navi.com/images/user/faq/icon/q_blue.svg");
}
#container.lazyloaded #faqs .faqs_workplace h3:before{
	background-image: url("https://matsusima-navi.com/images/user/faq/icon/q_green.svg");
}
#faqs [class^="faqs_"] h3 b{
	font-weight: 400;
}
#faqs [class^="faqs_"] h3 span{
	border-radius: 1000em;
	display: block;
	line-height: 1.4;
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	right: 0;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	width: 5em;
}
#faqs .faqs_salary h3 span{
	background-color: #7A74B9;
}
#faqs .faqs_interview h3 span{
	background-color: #FF75BF;
}
#faqs .faqs_work h3 span{
	background-color: #69CBFF;
}
#faqs .faqs_workplace h3 span{
	background-color: #2FAC82;
}
#faqs [class^="faqs_"] p{
	position: relative;
	text-align: left;
}
#faqs [class^="faqs_"] p:before,
#faqs [class^="faqs_"] p:after{
	content: "";
	display: block;
	line-height: 1;
	pointer-events: none;
	position: absolute;
}
#faqs [class^="faqs_"] p:before{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
#container.lazyloaded #faqs .faqs_salary p:before{
	background-image: url("https://matsusima-navi.com/images/user/faq/icon/a_violet.svg");
}
#container.lazyloaded #faqs .faqs_interview p:before{
	background-image: url("https://matsusima-navi.com/images/user/faq/icon/a_pink.svg");
}
#container.lazyloaded #faqs .faqs_work p:before{
	background-image: url("https://matsusima-navi.com/images/user/faq/icon/a_blue.svg");
}
#container.lazyloaded #faqs .faqs_workplace p:before{
	background-image: url("https://matsusima-navi.com/images/user/faq/icon/a_green.svg");
}
#faqs [class^="faqs_"] p:after{
	height: 100%;
	top: 0;
	left: 0;
}
#faqs .faqs_salary p:after{
	background-color: #7A74B9;
}
#faqs .faqs_interview p:after{
	background-color: #FF75BF;
}
#faqs .faqs_work p:after{
	background-color: #69CBFF;
}
#faqs .faqs_workplace p:after{
	background-color: #2FAC82;
}
@media screen and (max-width:767px){
	#faq{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#container.lazyloaded #faq{
		background-image: url("https://matsusima-navi.com/images/user/faq/back_040.webp"), url("https://matsusima-navi.com/images/user/faq/back_050.webp"), url("https://matsusima-navi.com/images/user/faq/back_060.webp");
	}
	#faqs{
	}
	#faqs:before{
		padding-top: 15em;
		right: 0;
		width: 27.5%;
	}
	#faqs [class^="faqs_"]{
		border-radius: 7px;
		margin: 6.25% auto 0;
		padding: 3.125% 0;
		width: -webkit-calc(93.75% + (1px * 2));
		width: calc(93.75% + (1px * 2));
	}
	#faqs [class^="faqs_"] h3{
		line-height: 1.4;
		margin-bottom: 1em;
		padding: 0 4.25em 0 3em;
	}
	#faqs [class^="faqs_"] h3:before{
		height: 1.875em;
		top: -0.125em;
		left: 0.75em;
		width: 2.5em;
	}
	#faqs [class^="faqs_"] h3 b{
		font-size: 125%;
	}
	#faqs [class^="faqs_"] h3 span{
		font-size: 62.5%;
		margin-right: -1.5em;
	}
	#faqs [class^="faqs_"] p{
		padding: 0 4em;
	}
	#faqs [class^="faqs_"] p:before{
		height: 1.5625em;
		top: 0.25em;
		left: 0.5em;
		width: 3.125em;
	}
	#faqs [class^="faqs_"] p:after{
		left: 3.25em;
		width: 0.125em;
	}
}
@media screen and (min-width:768px){
	#faq{
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#container.lazyloaded #faq{
		background-image: url("https://matsusima-navi.com/images/user/faq/back_010.webp"), url("https://matsusima-navi.com/images/user/faq/back_020.webp"), url("https://matsusima-navi.com/images/user/faq/back_030.webp");
	}
	#faqs{
		margin-left: auto;
		margin-right: auto;
		width: -webkit-calc(100% - (4em * 4) + (1px * 2));
		width: calc(100% - (4em * 4) + (1px * 2));
		max-width: -webkit-calc(52.5em + (1px * 2));
		max-width: calc(52.5em + (1px * 2));
	}
	#faqs:before{
		padding-top: 15em;
		right: -1em;
		width: 24%;
	}
	#faqs [class^="faqs_"]{
		border-radius: 15px;
		margin-top: 3.125em;
		padding: 1.5em 0;
	}
	#faqs [class^="faqs_"] h3{
		line-height: 1.2;
		margin-bottom: 1.5em;
	}
	#faqs [class^="faqs_"] h3:before{
		height: 3em;
		width: 4em;
	}
	#faqs [class^="faqs_"] h3 b{
	}
	#faqs [class^="faqs_"] p{
	}
	#faqs [class^="faqs_"] p:before{
		height: 2.5em;
		top: 0.25em;
		width: 5em;
	}
	#faqs [class^="faqs_"] p:after{
		width: 0.1875em;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#faqs [class^="faqs_"] h3{
		padding: 0 6em;
	}
	#faqs [class^="faqs_"] h3:before{
		top: -0.75em;
		left: 2em;
	}
	#faqs [class^="faqs_"] h3 b{
		font-size: 150%;
	}
	#faqs [class^="faqs_"] h3 span{
		font-size: 75%;
	}
	#faqs [class^="faqs_"] p{
		padding: 0.5em 7em;
	}
	#faqs [class^="faqs_"] p:before{
		left: 2em;
	}
	#faqs [class^="faqs_"] p:after{
		left: 6.25em;
	}
}
@media screen and (min-width:1024px){
	#faqs [class^="faqs_"] h3{
		padding: 0 8em;
	}
	#faqs [class^="faqs_"] h3:before{
		top: -0.25em;
		left: 4em;
	}
	#faqs [class^="faqs_"] h3 b{
		font-size: 200%;
	}
	#faqs [class^="faqs_"] p{
		padding: 0.5em 9em;
	}
	#faqs [class^="faqs_"] p:before{
		left: 4em;
	}
	#faqs [class^="faqs_"] p:after{
		left: 8.25em;
	}
}


/**************************************************50
 * nakai
 **************************************************/
#nakai{
	border-color: #BC87C0;
	border-style: solid;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	text-align: center;
}
#nakai figure{
	background-color: #FFFFFF;
	border: 1px solid #CDA7D0;
}
#nakai figure > div{
	position: relative;
}
#nakai figure > div picture{
}
#nakai figure > div picture img{
	width: 100%;
}
#nakai figure > div img[src$="caption_010.svg"],
#nakai figure > div img[src$="caption_020.svg"]{
	position: absolute;
	bottom:0;
}
#nakai figure > div img[src$="caption_010.svg"]{
	right: 0;
}
#nakai figure > div img[src$="caption_020.svg"]{
	left: 0;
}
#nakai figure figcaption{
}
#nakai figure figcaption h2{
}
#nakai figure figcaption h2 img{
}
#nakai figure figcaption p{
	text-align: left;
}
#nakai figure figcaption p strong{
	color: #F57CA7;
	background: -webkit-linear-gradient(top, transparent 0%, transparent 60%, #FFFFD8 60%, #FFFFD8 100%);
	background: linear-gradient(to bottom, transparent 0%, transparent 60%, #FFFFD8 60%, #FFFFD8 100%);
}
#nakais{
}
#nakais .nakais{
	background-color: #BC87C0;
	color: #FFFFFF;
	border-radius: 1000em;
	color: #FFFFFF;
	display: inline-block;
	margin-bottom: 0.5em;
}
#nakai .toggle_button [class^="toggle_"]{
	background-color: #BC87C0;
}
@media screen and (max-width:359px){
	#nakais .nakais{
		width: 100%;
	}
}
@media screen and (min-width:360px) and (max-width:767px){
	#nakais .nakais{
		width: -webkit-calc((100% - 3.571428571428571%) / 2);
		width: calc((100% - 3.571428571428571%) / 2);
	}
	#nakais .nakais:nth-child(even){
		margin-left: 3.571428571428571%;
	}
}
@media screen and (min-width:360px) and (max-width:413px){
	#nakais .nakais{
		font-size: 75%;
	}
}
@media screen and (min-width:414px) and (max-width:479px){
	#nakais .nakais{
		font-size: 87.5%;
	}
}
@media screen and (max-width:767px){
	#nakai{
		border-width: 4px 0;
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#container.lazyloaded #nakai{
		background-image: url("https://matsusima-navi.com/images/user/nakai/back_020.webp");
	}
	#nakai figure{
		border-radius: 7px;
		margin: 0 auto;
		padding: 3.125% 3.125% 6.25%;
		width: -webkit-calc(93.75% + (1px * 2));
		width: calc(93.75% + (1px * 2));
	}
	#nakai figure > div{
		margin-bottom: 3.571428571428571%;
	}
	#nakai figure > div picture{
	}
	#nakai figure > div picture img{
		border-radius: 7px;
	}
	#nakai figure > div img[src$="caption_020.svg"]{
		width: 31.25%;
	}
	#nakai figure figcaption{
	}
	#nakai figure figcaption h2{
		margin-bottom: 1.785714285714286%;
	}
	#nakai figure figcaption h2 img{
		width: 100%;
	}
	#nakai figure figcaption p{
	}
	#nakais{
	}
	#nakais .nakais{
	}
	#nakai .toggle_content{
		display: none;
	}
	#nakai .toggle_button:not(.active) .toggle_less{
		display: none;
	}
	#nakai .toggle_button .toggle_more{
		margin-top: 0.5em;
	}
	#nakai .toggle_button.active .toggle_more{
		display: none;
	}
}
@media screen and (min-width:768px){
	#nakai{
		border-width: 0.625em 0;
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#container.lazyloaded #nakai{
		background-image: url("https://matsusima-navi.com/images/user/nakai/back_010.webp");
	}
	#nakai figure{
		border-radius: 15px;
		padding: 2em 3em;
	}
	#nakai figure > div{
	}
	#nakai figure > div picture{
	}
	#nakai figure > div picture img{
		border-radius: 15px;
	}
	#nakai figure figcaption{
	}
	#nakai figure figcaption h2{
		margin-bottom: 1em;
	}
	#nakai figure figcaption h2 img{
		width: 100%;
	}
	#nakai figure figcaption p{
	}
	#nakais{
	}
	#nakais .nakais{
		width: -webkit-calc(50% - 0.5em);
		width: calc(50% - 0.5em);
	}
	#nakais .nakais:nth-child(even){
		margin-left: 1em;
	}
	#nakai .toggle_content{
		display: block !important;
	}
	#nakai .toggle_button{
		display: none;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#nakai figure > div{
		margin-bottom: 1.5em;
	}
	#nakai figure > div img[src$="caption_020.svg"]{
		width: 25%;
	}
}
@media screen and (max-width:1023px){
	#nakai figure > div img[src$="caption_020.svg"]{
		-ms-transform: translate(-18.75%, 12.5%);
		-webkit-transform: translate(-18.75%, 12.5%);
		transform: translate(-18.75%, 12.5%);
	}
}
@media screen and (min-width:1024px){
	#nakai figure{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#nakai figure > div{
		display: table-cell;
		padding-left: 2em;
		vertical-align: top;
		width: 50%;
	}
	#nakai figure > div img[src$="caption_010.svg"]{
		-ms-transform: translate(18.75%, 12.5%);
		-webkit-transform: translate(18.75%, 12.5%);
		transform: translate(18.75%, 12.5%);
		width: 43.75%;
	}
	#nakai figure figcaption{
		background-color: #FFFFFF;
		display: table-cell;
		vertical-align: top;
	}
}
@media screen and (min-width:1200px){
	#nakai figure figcaption{
		font-size: 125%;
	}
}