@charset "UTF-8";
html{
	overflow-x: hidden;
}


body{
	font-family: "Zen Kaku Gothic New", sans-serif;
	/*-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;*/
	color: #000000;
	overflow-x: clip;
}

a{
	color: inherit;
	text-decoration: none;
	outline: none;
}

img{
	width: 100%;
	height: auto;
}

a:hover{
	text-decoration: none;
	color: inherit;
}
.sp_only{
	display: none;
}
@media ( max-width : 740px ) {
.pc_only{
	display: none;
}
.sp_only{
	display: inherit;
}
}

/* ヘッダー */
#header{
	width: 100%;
	height: 100px;
	display: flex;
	z-index: 10;
	position: relative;
	margin: 0 auto;
	top: 0;
	position: absolute;
	justify-content: center;
}

#header .headerNavi{
	position: absolute;
	right: 120px;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
}

#header .headerNavi .naviList{
	display: flex;
	margin-bottom: 0;
	gap: 0px 40px;
	align-items: center;
}

#header .headerNavi .naviList .snsarea .insta {
	content: "";
	width: 40px;
  height: 40px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	transition: .3s;
}

#header .headerNavi .naviList .snsarea li {
  background-color: #54B7D0;
  height: 22px;
  width: 22px;
  -webkit-mask: url("../img/common/insta.svg");
  mask: url("../img/common/insta.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  transition: .3s;
  position: relative;
  display: inline-block;
}

@media ( min-width : 740px ) {
#header .headerNavi .naviList .snsarea .insta:hover {
  background-color: #8FC045;
}
#header .headerNavi .naviList .snsarea .insta:hover li{
  background-color: #fff;
}
}

/* ハンバーガーメニュー */
.fullscreenmenu{
	position: fixed;
	top: 0;
	right: 0;
}

.menu, .menu span {
  display: inline-block;
  -webkit-transition: all .4s;
  transition: all .4s;
  box-sizing: border-box;
}

.menu {
	position: absolute!important;
	/*top: 45px!important;*/
	right: 30px !important;
	left: auto!important;
	width: 60px;
	height: 70px;
	z-index: 10;
	background: unset;
	cursor: pointer;
}

.menu span {
	position: absolute!important;
	left: 0!important;
	height: 4px!important;
	background-color: #fff;
	z-index: 10;
	width: 60px;
}

.menu span:nth-of-type(1) {
	top: 30px !important;
	left: 0!important;
	right: 0!important;
	margin: auto;
}

.menu span:nth-of-type(2) {
	top: 47px!important;
	left: 0px;
	right: 0;
	margin: auto;
}

.menu span:nth-of-type(3) {
	top: 64px!important;
	left: 0px;
	right: 0;
	margin: auto;
}

.menu.active {
	position: fixed;
}

.menu.active span:nth-of-type(1) {
  transform: translateY(16px) rotate(30deg);
}

.menu.active span:nth-of-type(2) {
  display: none;
}

.menu.active span:nth-of-type(3) {
	transform: translateY(-18px) rotate(-30deg);
	left: 0;
}

#hnav {
  position: fixed;
  top: 0px;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
	background-color: #8FC045;
	filter: blur(10px);
	padding-top: 80px;
	display: flex;
	flex-direction: column;
	overflow: scroll;
}

#hnav h1{
	content: url("../img/common/logo.svg");
	width: 500px;
	margin: 0 auto 98px;
}

#hnav .snsarea{
	margin-bottom: 0;
	position: absolute;
	right: 120px;
  top: 30px;
}

#hnav .snsarea li {
  background-color: #8fc045;
  height: 22px;
  width: 22px;
  -webkit-mask: url("../img/common/insta.svg");
  mask: url("../img/common/insta.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  transition: .3s;
  position: relative;
  display: inline-block;
	transition: .3s;
}

#hnav .insta {
	content: "";
	width: 40px;
	height: 40px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	transition: .3s;
}

#hnav.active {
  right: 0;
  opacity: 1;
  visibility: visible;
	filter: blur(0px);
	transform: translateX(00%);
}

button {
    border: none;
    outline: none;
}

button:focus {
    border: none;
    outline: none;
}

.accordion-container {
    width: 100%;
    margin: 0 auto;
    display: block;
	padding-bottom: 40px;
}

#accordion .lump {
    width: 100%;
    display: block;
    margin: 0;
	position: relative;
	margin-bottom: 42px;
	text-align: center;
}

.accordion-container .accordion-title2 {
    margin: 0;
	font-family: "Prompt", sans-serif;
    font-weight: 600;
    pointer-events: inherit;
	font-size: 48px;
	text-align: center;
	color: #fff;
	line-height: 38px;
	transition: .3s;
	display: inline-block;
	position: relative;
}

.accordion-container .accordion-title2 span{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
	font-size: 16px;
	display: block;
}

.accordion-container .accordion-title2 span.linkIco {
	position: absolute;
	width: 28px;
	height: 28px;
	background: #fff;
	position: absolute;
	right: -45px;
	top: 4px;
	transition: .3s;
	mask-image: url("../img/common/link.svg");
	pointer-events: none;
	mask-repeat: no-repeat;
}


@media ( min-width : 740px ) {
#accordion .lump a:hover h4{
	color: #000;
	}
#accordion .lump a:hover .accordion-title2 span.linkIco{
	background: #000;
	}

#hnav .insta:hover {
	background: rgb(60, 188, 216);
}

#hnav .insta:hover li{
	background: #fff;
}
}


@media ( max-width : 740px ) {
#header{
	height: calc(100vw * 65 / 375);
}

#header .headerNavi{
	right: calc(100vw * 90 / 375);
}

#header .headerNavi .naviList{
	gap: 0px 0px;
}

#header .headerNavi .naviList .snsarea .insta {
	width: calc(100vw * 30 / 375);
	height: calc(100vw * 30 / 375);
}

#header .headerNavi .naviList .snsarea li {
  height: calc(100vw * 20 / 375);
  width: calc(100vw * 20 / 375);
}
	
.menu {
  /*top: calc(100vw * 16 / 375)!important;*/
  right: calc(100vw * 17 / 375)!important;
  width: calc(100vw * 50 / 375);
  height: calc(100vw * 46 / 375) !important;
}

.menu span {
	height: 3px!important;
	width: calc(100vw * 50 / 375);
}

.menu span:nth-of-type(1) {
	top: calc(100vw * 19 / 375)!important;
}

.menu span:nth-of-type(2) {
	top: calc(100vw * 30 / 375)!important;
}

.menu span:nth-of-type(3) {
	top: calc(100vw * 41 / 375)!important;
}

.menu.active span:nth-of-type(1) {
  transform: translateY(calc(100vw * 10 / 375)) rotate(30deg);
}
	
.menu.active span:nth-of-type(3) {
	transform: translateY(calc(100vw * -12 / 375)) rotate(-30deg);
}

#hnav {
	padding-top: calc(100vw * 80 / 375);
}

#hnav h1{
	width: calc(100vw * 240 / 375);
	margin: 0 auto calc(100vw * 40 / 375);
}

#hnav .snsarea{
	right: calc(100vw * 90 / 375);
  top: calc(100vw * 18 / 375);
}

#hnav .snsarea li {
  height: calc(100vw * 20 / 375);
  width: calc(100vw * 20 / 375);
}

#hnav .insta {
	width: calc(100vw * 30 / 375);
	height: calc(100vw * 30 / 375);
}

.accordion-container {
	padding-bottom: 40px;
}

#accordion .lump {
	margin-bottom: calc(100vw * 25 / 375);
}

.accordion-container .accordion-title2 {
	font-size: calc(100vw * 36 / 375);
	line-height: calc(100vw * 36 / 375);
}

.accordion-container .accordion-title2 span{
	font-size: calc(100vw * 14 / 375);
}

.accordion-container .accordion-title2 span.linkIco {
	width: calc(100vw * 23 / 375);
	height: calc(100vw * 23 / 375);
	right: calc(100vw * -36 / 375);
	top: calc(100vw * 4 / 375);
}
}




/*MV*/
#mv{
	width: 100%;
	background-image: url("../img/top/mv.jpg");
	height: calc(100vw * 1250 / 1366);
	background-size: cover;
}
#mv p{
	font-size: calc(100vw * 25 / 1366);
	font-weight: 700;
	letter-spacing: 0.1em;
	position: absolute;
	color: #fff;
	top: calc(100vw * 132 / 1366);
	text-align: center;
	left: 0;
	right: 0;
	margin: auto;
}
#mv h1{
	position: absolute;
	font-size: 0;
	content: url("../img/common/logo.svg");
	top: calc(100vw * 200 / 1366);
	width: calc(100vw * 500 / 1366);
	left: 0;
	right: 0;
	margin: auto;
}


@media ( max-width : 740px ) {
#mv{
	background-image: url("../img/top/mv_sp.jpg");
	height: calc(100vw * 650 / 375);
}
#mv p{
	font-size: calc(100vw * 13 / 375);
	top: calc(100vw * 121 / 375);
}
#mv h1{
	top: calc(100vw * 155 / 375);
	width: calc(100vw * 250 / 375);
}
}




/*コンセプト*/
#concept{
	width: 100%;
	background : #3CBCD8;
	color: #fff;
	padding: 145px 20px 110px;
}
#concept .conceptWrap{
	width: 100%;
	max-width: 1103px;
	margin: 0 auto;
}

.commonTit{
	font-size: 80px;
	font-weight: 700;
	color: #fff;
	font-family: "Prompt", sans-serif;
	text-align: center;
	line-height: 65px;
	margin-bottom: 74px;
}

.commonTit span{
	font-size: 20px;
	font-weight: 700;
	font-family: "Zen Kaku Gothic New", sans-serif;
	display: block;
}

#concept .conceptWrap h3{
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 99px;
}

#concept .conceptWrap .conceptBox{
	display: flex;
	gap:0 45px;
}

#concept .conceptWrap .conceptBox .txtBox{
	width: 100%;
	max-width: 508px;
	margin-top: -20px;
}

#concept .conceptWrap .conceptBox .txtBox p{
	font-size: 20px;
	font-weight: 500;
	line-height: 55px;
	white-space: nowrap;
	margin-bottom: 19px;
}

#concept .conceptWrap .conceptBox .txtBox a{
	font-size: 30px;
	font-weight: 400;
	font-family: "Prompt", sans-serif;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	display: flex;
	transition: .3s;
	margin-right: 38px;
}

#concept .conceptWrap .conceptBox .txtBox a .arrow{
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	display: inline-block;
	margin-left: 16px;
	position: relative;
	transition: .3s;
	overflow: hidden;
}
#concept .conceptWrap .conceptBox .txtBox a .arrow span{
	mask-image:url("../img/common/arrow.svg");
	mask-repeat: no-repeat;
	width: 20px;
	height: 14px;
	background: rgb(60, 188, 216);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: .3s;
}
#concept .conceptWrap .conceptBox .txtBox a .arrow span::before{
	content: "";
	mask-image:url("../img/common/arrow.svg");
	mask-repeat: no-repeat;
	width: 20px;
	height: 14px;
	background: #fff;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: .3s;
	z-index: 2;
	transform: translateX(-20px);
}

#concept .conceptWrap .conceptBox .imgBox{
	width: 100%;
	max-width: 550px;
}

#concept .conceptWrap .conceptBox .imgBox img{
	border-radius: 25px;
}

@media ( min-width : 740px ) {
#concept .conceptWrap .conceptBox .txtBox a:hover{
	color: #000;
}
#concept .conceptWrap .conceptBox .txtBox a:hover .arrow{
	background: #000;
}
#concept .conceptWrap .conceptBox .txtBox a:hover .arrow span::before{
	background: #fff;
	transform: translateX(0px);
}
}


@media ( max-width : 950px ) {
#concept .conceptWrap .conceptBox{
	flex-wrap: wrap;
	gap:45px;
}

#concept .conceptWrap .conceptBox .txtBox{
	max-width: 100%;
}

#concept .conceptWrap .conceptBox .imgBox{
	width: 100%;
	max-width: 100%;
}
}
@media ( max-width : 740px ) {
#concept{
	padding: calc(100vw * 50 / 375) calc(100vw * 14 / 375) calc(100vw * 48 / 375);
}
.commonTit{
	font-size: calc(100vw * 40 / 375);
	line-height: calc(100vw * 40 / 375);
	margin-bottom: calc(100vw * 23 / 375);
}

.commonTit span{
	font-size: calc(100vw * 13 / 375);
}

#concept .conceptWrap h3{
	font-size: calc(100vw * 24 / 375);
	line-height: calc(100vw * 40 / 375);
	max-width: calc(100vw * 296 / 375);
	margin: 0 auto calc(100vw * 18 / 375);
	white-space: nowrap;
}

#concept .conceptWrap .conceptBox{
	gap:calc(100vw * 38 / 375);
}

#concept .conceptWrap .conceptBox .txtBox{
	max-width: calc(100vw * 285 / 375);
	margin: 0 auto;
}

#concept .conceptWrap .conceptBox .txtBox p{
	font-size: calc(100vw * 16 / 375);
	line-height: calc(100vw * 37 / 375);
	margin-bottom: calc(100vw * 24 / 375);
}

#concept .conceptWrap .conceptBox .txtBox a{
	font-size: calc(100vw * 30 / 375);
	justify-content: center;
	margin-right: 0;
}

#concept .conceptWrap .conceptBox .txtBox a .arrow{
	width: calc(100vw * 40 / 375);
	height: calc(100vw * 40 / 375);
	margin-left: calc(100vw * 16 / 375);
}
#concept .conceptWrap .conceptBox .txtBox a .arrow span{
	width: calc(100vw * 20 / 375);
	height: calc(100vw * 14 / 375);
}
#concept .conceptWrap .conceptBox .txtBox a .arrow span::before{
	display: none;
}

#concept .conceptWrap .conceptBox .imgBox{
	max-width: 100%;
}
}







/*できること*/
#what{
	width: 100%;
	padding: 150px 0px 0;
}

#what .whatWrap{
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

#what .whatWrap .commonTit{
	color: #8FC045;
}

#what .whatWrap .titTxt{
	font-size: 18px;
	line-height: 40px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-align: center;
	margin-bottom: 0;
}

#what .noWrap{
	width: 100%;
	padding: 100px 20px 95px;
}

#what .noBox{
	width: 100%;
	max-width: 930px;
	margin: 0 auto;
	display: flex;
	gap:0 10px;
}

#what .noBox .titArea{
	
}

#what .noBox .titArea h4{
	font-size: 0;
	content: url("../img/top/no1.svg");
	width: 300px;
	margin-bottom: 0;
}

#what .noBox .txtArea img{
	max-width: 298px;
	margin: 0 auto 43px;
	display: block;
}

#what .noBox .txtArea .tit{
	font-size: 20px;
	font-weight: 700;
	line-height: 38px;
	color: rgb(60, 188, 216);
	margin-bottom: 7px;
}

#what .noBox .txtArea .txt{
	font-size: 16px;
	font-weight: 700;
	line-height: 36px;
	margin-bottom: 0;
}

#what .noWrap.green{
	background: #FFFAF0;
}

#what .noWrap.green .noBox .txtArea .tit{
	color: #8FC045;
}

#what .noWrap.no2 .noBox .titArea h4{
	content: url("../img/top/no2.svg");
}

#what .noWrap.no2 .noBox .txtArea img{
	max-width: 477px;
}

#what .noWrap.no3 .noBox .titArea h4{
	content: url("../img/top/no3.svg");
}

#what .noWrap.no3 .noBox .txtArea img{
	max-width: 462px;
}

#what .noWrap.no4 .noBox .titArea h4{
	content: url("../img/top/no4.svg");
}

#what .noWrap.no4 .noBox .txtArea img{
	max-width: 353px;
	margin-left: 82px;
}


@media ( max-width : 740px ) {
#what{
	padding: calc(100vw * 50 / 375) 0px 0;
}

#what .whatWrap .titTxt{
	font-size: calc(100vw * 16 / 375);
	line-height: calc(100vw * 38 / 375);
	max-width: calc(100vw * 295 / 375);
	margin: 0 auto;
}

#what .noWrap{
	padding: calc(100vw * 50 / 375) calc(100vw * 0 / 375) calc(100vw * 63 / 375);
}

#what .noBox{
	flex-wrap: wrap;
	gap:calc(100vw * 25 / 375);
}

#what .noBox .titArea{
	width: 100%;
}

#what .noBox .txtArea{
	width: 100%;
}

#what .noBox .titArea h4{
	width: calc(100vw * 200 / 375);
	margin: 0 auto;
}

#what .noBox .txtArea img{
	max-width: calc(100vw * 248 / 375);
	margin: 0 auto calc(100vw * 26 / 375);
	margin-left: auto;
}

#what .noBox .txtArea .tit{
	font-size: calc(100vw * 20 / 375);
	line-height: calc(100vw * 30 / 375);
	text-align: center;
	white-space: nowrap;
	letter-spacing: -0.07em;
	margin-bottom: calc(100vw * 14 / 375);
}

#what .noBox .txtArea .txt{
	font-size: calc(100vw * 16 / 375);
	line-height: calc(100vw * 32 / 375);
	max-width: calc(100vw * 280 / 375);
	margin: 0 auto;
	text-align: justify;
}

#what .noWrap.no2 .noBox .txtArea img{
	max-width: calc(100vw * 318 / 375);
}

#what .noWrap.no3 .noBox .txtArea img{
	max-width: calc(100vw * 308 / 375);
	margin-left: auto;
}

#what .noWrap.no4 .noBox .txtArea img{
	max-width: calc(100vw * 294 / 375);
	margin-left: calc(100vw * 32 / 375);
}
}





/*インスタグラム*/
#insta{
	width: 100%;
	padding: 150px 20px 100px;
}

#insta .instaWrap{
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

#insta .instaWrap .commonTit{
	color: #8FC045;
}


@media ( max-width : 740px ) {
#insta{
	padding: calc(100vw * 50 / 375) calc(100vw * 14 / 375) calc(100vw * 40 / 375);
}
}



/*バナー*/
#bn{
	width: 100%;
	padding: 85px 20px 85px;
}

#bn .bnWrap{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:40px;
}
#bn .bnWrap a{
	padding: 15px;
	transition: .3s;
}

#bn .bnWrap .sanfrecce{
	content: url("../img/common/sanfrecce.svg");
	width: 136px;
}

#bn .bnWrap .peacewing{
	content: url("../img/common/peacewing.svg");
	height: 150px;
}

#bn .bnWrap .ppone{
	content: url("../img/common/Sanfre_PP_ONE.png");
	height: 60px;
}

@media ( min-width : 740px ) {
#bn .bnWrap a:hover{
	/*background: rgba(141,144,147,0.15);*/
	opacity: .7;
}
}

@media ( max-width : 880px ) {
#bn{
	padding: calc(100vw * 40 / 375) 0px calc(100vw * 60 / 375);
}

#bn .bnWrap{
	gap:calc(100vw * 35 / 375) calc(100vw * 43 / 375);
	flex-wrap: wrap;
}
#bn .bnWrap a{
	padding: 0;
}

#bn .bnWrap .sanfrecce{
	width: calc(100vw * 92 / 375);
}

#bn .bnWrap .peacewing{
	width: calc(100vw * 147 / 375);
	height: auto;
}

#bn .bnWrap .ppone{
	content: url("../img/common/Sanfre_PP_ONE.png");
	height: calc(100vw * 40 / 375);
}
}


/*フッター*/
#footer{
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 100px 0 25px;
}

#footer .bg{
	position: absolute;
	content: url("../img/common/footer.svg");
	transform: translate(-50%, 0%);
	top: 0;
	left: 50%;
	width: 1583px;
}
#footer .footerWrap{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
#footer .footerWrap h1{
	font-size: 0;
	content: url("../img/common/logo.svg");
	width: 300px;
	margin: 0 auto 55px;
}

.contactBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 100px;
	background: #fff;
	border-radius: 50px;
	margin: 0 auto 44px;
	font-size: 24px;
	font-weight: 700;
	color: rgb(60, 188, 216);
	position: relative;
	transition: .3s;
}

.contactBtn .arrow{
	mask-image: url("../img/common/arrow.svg");
	width: 25px;
	height: 13px;
	background: rgb(60, 188, 216);
	mask-repeat: no-repeat;
	position: absolute;
	right: 38px;
	transition: .3s;
}
#footer .footerWrap p{
	font-size: 40px;
	font-weight: 700;
	font-family: "Prompt", sans-serif;
	color: #fff;
	text-align: center;
	margin-bottom: -2px;
}

.instaBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 50%;
	margin: 0 auto 34px;
	transition: .3s;
}

.instaBtn .instaIco{
	width: 32px;
	height: 32px;
	background: #8FC045;
	mask-image: url("../img/common/insta.svg");
	mask-repeat: no-repeat;
	transition: .3s;
}
#footer .footerWrap small{
	font-size: 12px;
	font-weight: 400;
	font-family: "Prompt", sans-serif;
	color: #fff;
	text-align: center;
	display: block;
	margin-bottom: 0;
}

@media ( min-width : 1366px ) {

#footer .bg{
	width: calc(100vw * 1583 / 1366);
}
}

@media ( min-width : 740px ) {
.contactBtn:hover{
	background: rgb(60, 188, 216);
	color: #fff;
}
.contactBtn:hover .arrow{
	background: #fff;
	right: 33px;
}

.instaBtn:hover{
	background: rgb(60, 188, 216);
}

.instaBtn:hover .instaIco{
	background: #fff;
}
}

@media ( max-width : 740px ) {
#footer{
	padding: calc(100vw * 50 / 375) 0 calc(100vw * 0 / 375);
}
#footer .footerWrap{
	background: #8FC045;
	padding-bottom: calc(100vw * 18 / 375);
}

#footer .bg{
	content: url("../img/common/footer_sp.svg");
	width: calc(100vw * 636 / 375);
}
#footer .footerWrap h1{
	width: calc(100vw * 250 / 375);
	margin: 0 auto calc(100vw * 42 / 375);
}

.contactBtn{
	width: calc(100vw * 200 / 375);
	height: calc(100vw * 66 / 375);
	border-radius: calc(100vw * 33 / 375);
	margin: 0 auto calc(100vw * 28 / 375);
	font-size: calc(100vw * 16 / 375);
}

.contactBtn .arrow{
	width: calc(100vw * 17 / 375);
	height: calc(100vw * 11 / 375);
	right: calc(100vw * 25 / 375);
}
#footer .footerWrap p{
	font-size: calc(100vw * 24 / 375);
	margin-bottom: calc(100vw * 5 / 375);
}

.instaBtn{
	width: calc(100vw * 50 / 375);
	height: calc(100vw * 50 / 375);
	margin: 0 auto calc(100vw * 35 / 375);
}

.instaBtn .instaIco{
	width: calc(100vw * 32 / 375);
	height:calc(100vw * 32 / 375);
}
#footer .footerWrap small{
	font-size: calc(100vw * 12 / 375);
}
}















#concept.under{
	padding: 200px 20px 110px;
}
#concept.under h1{
	content: url("../img/common/logo.svg");
	width: 500px;
	margin: 0 auto 133px;
}

#concept.under .conceptWrap .conceptBox {
	justify-content: space-between;
	margin-bottom: 34px;
}

#concept.under .conceptWrap p {
  font-size: 20px;
  font-weight: 700;
  line-height: 46px;
  margin-bottom: 41px;
}

#concept.under .conceptWrap .conceptBox .txtBox {
  max-width: 540px;
}

#concept.under .conceptWrap .conceptBox .imgBox {
  max-width: 500px;
}

#concept.under .conceptWrap img {
	border-radius: 29px;
}

#concept.under .conceptWrap .img1{
	max-width: 425px;
	margin-left: 151px;
	display: block;
	margin-bottom: 53px;
}

#concept.under .conceptWrap .txtBox2{
	margin-left: 319px;
	margin-bottom: 106px;
}

#concept.under .conceptWrap .img2{
	max-width: 600px;
  display: block;
  margin-bottom: 80px;
  margin-left: auto;
}

#concept.under .conceptWrap .img3{
	max-width: 500px;
  display: block;
  margin-left: 134px;
}


@media ( max-width : 740px ) {
#concept.under{
	padding: calc(100vw * 124 / 375) 0px calc(100vw * 100 / 375);
}
#concept.under h1{
	width: calc(100vw * 250 / 375);
	margin: 0 auto calc(100vw * 65 / 375);
}

#concept.under .conceptWrap .conceptBox {
	margin-bottom: calc(100vw * 15 / 375);
}

#concept.under .conceptWrap .conceptBox .txtBox p {
  font-size: calc(100vw * 16 / 375);
  font-weight: 500;
  line-height: calc(100vw * 32 / 375);
  margin-bottom: calc(100vw * 27 / 375);
	white-space: normal;
	text-align: justify;
	letter-spacing: -0.04em;
}

#concept.under .conceptWrap p {
  font-size: calc(100vw * 16 / 375);
  font-weight: 500;
  line-height: calc(100vw * 32 / 375);
  margin-bottom: calc(100vw * 27 / 375);
	white-space: normal;
	text-align: justify;
	letter-spacing: -0.04em;
}

#concept.under .conceptWrap .conceptBox .txtBox {
  max-width: calc(100vw * 260 / 375);
	order: 1;
}

#concept.under .conceptWrap .conceptBox .imgBox {
  max-width: 100%;
	text-align: center;
}

#concept.under .conceptWrap img {
	border-radius: calc(100vw * 20 / 375);
	max-width: calc(100vw * 350 / 375);
	margin: 0 auto;
}

#concept.under .conceptWrap .img1{
	max-width: calc(100vw * 350 / 375);
	margin-left: auto;
	margin-bottom: calc(100vw * 39 / 375);
}

#concept.under .conceptWrap .txtBox2{
	margin-left: auto;
	margin-right: auto;
	max-width: calc(100vw * 260 / 375);
	margin-bottom: calc(100vw * 33 / 375);
}

#concept.under .conceptWrap .img2{
	max-width: calc(100vw * 350 / 375);
  display: block;
  margin-bottom: calc(100vw * 20 / 375);
  margin-left: auto;
  margin-right: auto;
}

#concept.under .conceptWrap .img3{
	max-width: calc(100vw * 350 / 375);
  display: block;
  margin-left: auto;
}
}




.modelTrigger{
    opacity: 0;
}

.modelA{
  animation: 0.65s cubic-bezier(0.3, 1.06, 0.64, 1.19) 0.5s 1 normal both running model;
}

@keyframes model {
0% {
  transform: perspective(1000px) rotateY(-90deg);
    opacity: 0;
}
100% {
  transform: perspective(1000px) rotateY(0deg);
    opacity: 1;
}
}

.blurTop{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
	animation-delay: .3s;
	opacity:0;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

.scaleUpTrigger2{
  animation-fill-mode: forwards;
	opacity: 0;
	transform: scale(0);
	transform-origin: 50% 50%;
}

@media only screen and (max-width: 768px) {
.mapArea.scaleUp2{
	animation-name: scaleUp3Anime;
  animation-duration: .5s;
	animation-delay: .6s;
}
}

.scaleUp2{
	animation-name: scaleUp2Anime;
  animation-duration: .5s;
	animation-delay: .6s;
}

@keyframes scaleUp2Anime{
  0% {
	  opacity: 0;
	  transform: scale(0);
}
100% {
	opacity: 1;
	  transform: scale(1);
}
}

.fadeUpTrigger{
	opacity: 0;
	  transform: translateY(30px);
}

.fadeUp{
animation-name: fadeUpAnime;
  animation-duration: .5s;
	animation-delay: .4s;
  animation-fill-mode: forwards;
}

@keyframes fadeUpAnime{
  0% {
	  opacity: 0;
	  transform: translateY(40px);
}
100% {
	opacity: 1;
	  transform: translateY(0px);
}
}
.blurTrigger{
	opacity: 0;
  filter: blur(10px);
}
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}












/*note*/
#blog{
	background: rgb(60, 188, 216);
	width: 100%;
	padding: 150px 0px 100px;
}

#blog .blogWrap{
	width: calc(100vw * 1234 / 1366);
	margin-left: auto;
}

#blog .card02 {
	width: calc(100%);
	position: relative;
}

#blog .card02 .blogSlide {
    overflow: visible;
}

#blog .l-inner {
    position: relative;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    margin: 0 auto;
	padding-right: 50px;
}

#blog .card02 .swiper-slide {
    width: 350px;
	padding: 22px 22px 25px;
	background: #fff;
	border:solid 3px #8FC045;
	border-radius : 30px;
}

  [class*=swiper]:focus {
    outline: none;
}

#blog .slide-media{
    position: relative;
	width: 300px;
	height: 200px;
	margin-bottom: 12px;
}

#blog .card02 .slide-media img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 20px;
}

#blog .card02 .slide {
    overflow: hidden;
}


#blog .card02 .slide-content {
	
}

#blog .card02 .slide-date {
    font-size: 13px;
	font-weight: 400;
	font-family: "Prompt", sans-serif;
	display: block;
  }
#blog .card02 .slide-title {
    font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	height: 48px;
	margin-bottom: 17px;
  }

#blog .card02 .swiper-controller {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 0 15px;
	z-index: 1;
	margin-top: 30px;
  }

#blog .swiper-button-prev,
#blog .swiper-button-next {
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 50%;
    cursor: pointer;
    transition: .3s;
	user-select: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

#blog .swiper-button-prev span,
#blog .swiper-button-next span {
	width: 20px;
	height: 13px;
	background: #3CBCD8;
	mask-image:url("../img/common/arrow.svg");
	transition: .3s;
}

#blog .swiper-button-prev span {
	transform: rotateZ(180deg);
}

#blog .swiper-button-prev{
	left: 0;
}

#blog .swiper-button-next {
	right: 0;
}
#blog .swiper-button-prev::after {
	content: none;
}
#blog .swiper-button-prev::before {
	content: none;
}
#blog .swiper-button-next::after {
	content: none;
}

#blog .card02 .swiper-button-prev,
#blog .card02 .swiper-button-next {
	position: relative;
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	margin: 0;
}

#blog .card02 .swiper-button-disabled {
    pointer-events: none;
    opacity: 0.5;
}

#blog .noteBtn{
	width: 200px;
	height: 50px;
	background: #fff;
	border-radius : 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: .3s;
	padding-right: 30px;
	border:solid 2px #fff;
	position: absolute;
	right: 132px;
	bottom: 0;
}

#blog .noteBtn span{
	width: 100px;
	content: url("../img/common/note.svg");
}

#blog .noteBtn .arrow{
	width: 20px;
	height: 13px;
	background: #3CBCD8;
	position: absolute;
	right: 20px;
	transition: .3s;
	mask-image:url("../img/common/arrow.svg");
}

@media only screen and (min-width: 740px) {
#blog .card02 .swiper-slide {
  transition: .3s;
  }
#blog .card02 .swiper-slide:hover {
  -webkit-transform: translateY(-16px);
		  transform: translateY(-16px);
}
	
#blog .swiper-button-prev:hover,
#blog .swiper-button-next:hover{
	background:#8FC045;
}
	
#blog .swiper-button-prev:hover span,
#blog .swiper-button-next:hover span{
	background:#fff;
}

#blog .noteBtn:hover{
	background: #8FC045;
}

#blog .noteBtn:hover .arrow{
	background: #fff;
	right: 15px;
}
}


@media only screen and (max-width: 740px) {
#blog{
	padding: calc(100vw * 50 / 375) 0px calc(100vw * 48 / 375);
}

#blog .blogWrap{
	width: 100%;
	margin-left: calc(100vw * 17 / 375);
}

#blog .card02 {
	width: calc(100%);
	position: relative;
}

#blog .l-inner {
	padding-right: calc(100vw * 20 / 375);
}

#blog .card02 .swiper-slide {
    width: calc(100vw * 250 / 375);
	padding: calc(100vw * 12 / 375) calc(100vw * 12 / 375) calc(100vw * 20 / 375);
	background: #fff;
	border:solid 2px #8FC045;
	border-radius : calc(100vw * 21 / 375);
}

#blog .slide-media{
	width: calc(100vw * 220 / 375);
	height: calc(100vw * 145 / 375);
	margin-bottom: calc(100vw * 7 / 375);
}

#blog .card02 .slide-content {
	padding: 0 calc(100vw * 4 / 375);
}

#blog .card02 .slide-media img{
    border-radius: calc(100vw * 10 / 375);
}

#blog .card02 .slide-date {
    font-size: calc(100vw * 10 / 375);
  }
#blog .card02 .slide-title {
    font-size: calc(100vw * 13 / 375);
	line-height: calc(100vw * 18 / 375);
	margin-bottom: calc(100vw * 12 / 375);
	height: calc(100vw * 36 / 375);
  }

#blog .card02 .swiper-controller {
    gap: 0 calc(100vw * 10 / 375);
	margin-top: calc(100vw * 20 / 375);
  }

#blog .swiper-button-prev,
#blog .swiper-button-next {
	width: calc(100vw * 30 / 375);
	height: calc(100vw * 30 / 375);
}

#blog .swiper-button-prev span,
#blog .swiper-button-next span {
	width: calc(100vw * 12 / 375);
	height: calc(100vw * 8 / 375);
	mask-repeat: no-repeat;
	mask-size:contain;
}

#blog .noteBtn{
	width: calc(100vw * 120 / 375);
	height: calc(100vw * 30 / 375);
	border-radius : calc(100vw * 15 / 375);
	padding-right: calc(100vw * 12 / 375);
	border:none;
	right: calc(100vw * 25 / 375);
}

#blog .noteBtn span{
	width: calc(100vw * 60 / 375);
}

#blog .noteBtn .arrow{
	width: calc(100vw * 12 / 375);
	height: calc(100vw * 8 / 375);
	right: calc(100vw * 13 / 375);
}
}




.topBtn{
	position: fixed;
	right: 25px;
	bottom: 25px;
	margin-bottom: 0;
	z-index: 3;
	display: none;
}
.topBtn a{
	display:flex;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: solid 3px #3CBCD8;
	background-color: #3CBCD8;
	position: relative;
	justify-content: center;
	align-items: center;
	transition: .3s;
}
.topBtn a span{
  color: #fff;
  position: relative;
  width: 18px;
  height: 18px;
  transform: translateY(3px) rotate(-45deg);
	transition: .3s;
}
.topBtn a span::before,
.topBtn a span::after{
	content: '';
  position: absolute;
  background: currentColor;
  border-radius: 4px;
}
.topBtn a span::before{
	top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.topBtn a span::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
}

@media ( min-width : 740px ) {
.topBtn a:hover{
	background-color: #fff;
}
.topBtn a:hover span{
	color: #3CBCD8;
}
}



@media ( max-width : 740px ) {
.topBtn{
	right: calc(100vw * 20 / 640);
	bottom: calc(100vw * 50 / 640);
}
.topBtn a{
	width: calc(100vw * 70 / 375);
	height: calc(100vw * 70 / 375);
}
.topBtn a span{
  width: calc(100vw * 15 / 375);
  height: calc(100vw * 15 / 375);
  transform: translateY(3px) rotate(-45deg);
}
.topBtn a span::before,
.topBtn a span::after{
  border-radius: calc(100vw * 4 / 375);
}
.topBtn a span::before{
  height: calc(100vw * 4 / 375);
}
.topBtn a span::after {
  width: calc(100vw * 4 / 375);
}
}





.menu span .white{
  background-color: #3cbcd8; 
}

.menu.active span .white{
  background-color: #fff; 
}