@charset "utf-8";

/*CSS Variables*/
:root {
	/* text bg */
	--subtitle-sfokinawa: url(/okinawa/community/img/h2_community_contribution.svg);
}

/* common.css上書き */
/* CSRページ (.page-csr) だけに背景とパディングを適用 */
.page-csr .container {
  max-width: 1920px;
  margin: 0 auto;
  /* padding: 46px 0 0; */
  background: #0065BD url(../img/bg_minsa.svg) repeat-x left 8px top 6px / auto 30px;
}

/* 767px以上（タブレット〜PC）の設定 */
@media (min-width: 767px) {
  /* CSRページ以外 (:not(.page-csr)) は背景なし・パディング0 */
  body:not(.page-csr) .container {
    padding-top: 0;
    background: none;
  }

  /* CSRページ以外 (:not(.page-csr)) のパンくずスタイル */
  body:not(.page-csr) .breadcrumbs {
    width: 1200px;
    margin: 16px auto 0;
    padding: 0;
    background: none;
    color: white;
  }

  body:not(.page-csr) .breadcrumbs li {
    font-size: 14px;
    color: white;
  }

  body:not(.page-csr) .breadcrumbs li a {
    color: white;
  }

  body:not(.page-csr) .breadcrumbs li a::after {
    content: "";
    width: 6px;
    height: 10px;
    background-color: white;
    -webkit-mask: var(--icon-breadcrumb-separator);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 5px);
    right: -17px;
  }
}

/* ヘッダー */

.header_community {
	padding: 0 20px;
}

.header > .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.header_community_logo.logo--header{
  display: flex;
  align-items: center;
  gap: 5px;
}

.header_community_logo.logo--header a{
  display: block;
}

.header_community_logo.logo--header img{
  display: block;
  height: auto;
}

.logo--header{ display:block; }
.logo--nav{ display:none; }

.header_community_logo.logo--header .header_logo_first img{
	max-width: 100px;
	width: 100%;
	margin-top: 13px;
}

.header_community_logo.logo--header .header_logo_second img{
  height: auto;
  max-width: 160px;
  width: 100%;
}

@media (max-width: 767px){
  .logo--nav{ display:block; }

  .main_nav .header_community_logo{
    text-align:center;
    margin:0 0 16px;
  }
  .main_nav .header_community_logo img{
    width:min(320px, 80vw);
    height:auto;
    margin:0 auto;
  }
}


/* フッター */

.footer .inner {
  padding: 36px 40px 0px;
}

@media (max-width: 767px) {
  .footer .inner {
	padding: 0px 20px 0px;
  }
}

.footer .logo_container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer_community_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.333333333vw;
  margin: 0 auto 2.8vw;
}

.footer_community_logo a {
  display: block;
  flex: 0 0 auto;
}

.footer_community_logo img {
  display: block;
  width: 115px;
  height: auto;
}

.footer_community_logo--second img {
  width: 120px;
  margin-top: -2px;
}

.community_sp-only {
	display: none;
}

@media (min-width: 768px) {
#community_top section .inner {
	width: 1200px;
	margin: 0 auto;
}
}


@media (max-width: 768px) {

  .footer_community_logo {
    flex-direction: column;
    gap: 4vw;
    align-items: center;
  }

  .footer_community_logo a:nth-of-type(1) {
    width: 105px;
  }

  .footer_community_logo a:nth-of-type(2) {
    width: 108px;
  }

  .footer_community_logo a img {
    width: 100%;
  }

.community_copyright {
    text-align: center;
  }

  .community_copyright .separator {
    display: none;
  }

  .community_copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center; 
  }
  .community_sp-only {
	display: block;
  }
}


/*==================================================
[sp] Base community TOP
================================================== */

#community_top .bgframe {
	width: 100%;
	margin: 0;
	position: relative;
}

.container .main {
	width: 100%;
	padding: 0;
	background-color: white;
}

/*==================================================
[sp] COMMON community TOP
================================================== */
section p.subtitle_rec {
	display: block;
	width: fit-content;
	height: 7.466666667vw;
	padding: 2vw;
	margin: 0 auto 4vw;
	border-radius: 1.066666667vw;
	background: var(--bg-texture) no-repeat center center / auto 7.466666667vw;
}

section p.subtitle_rec span {
	display: block;
	height: 3.466666667vw;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	color: var(--color-transparent);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
}

section h2.rec_h2_title {
	font-size: 5.333333333vw;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	color: var(--color-black);
	margin-bottom: 10.66666667vw;
}

/*==================================================
[sp] #community_hero
================================================== */

section#community_hero {
	padding: 0;
}

section#community_hero .bgframe {
	/* padding: 5.333333333vw 0 21.33333333vw; */
}

section#community_hero .inner {
	width: 100%;
}

#community_hero .scroll_down {
	display: block;
	position: relative;
	width: 43.2vw;
	height: 10.66666667vw;
	padding: 0 10.66666667vw 0 0;
	margin: 5.333333333vw auto;
	color: var(--color-transparent);
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
	background: var(--img-scroll) no-repeat left center / 29.86666667vw auto;
}

#community_hero .scroll_down::before {
	content: "";
	display: block;
	width: 10.66666667vw;
	height: 10.66666667vw;
	border-radius: 5.333333333vw;
	border: 0.72vw solid var(--color-primary);
	background: var(--color-white);
	position: absolute;
	right: 0;
	top: 0;
}

#community_hero .scroll_down::after {
	content: '';
	display: block;
	width: 3.2vw;
	height: 3.2vw;
	position: absolute;
	top: 3.733333333vw;
	right: 3.733333333vw;
	background: var(--icon-arrow-down);
	animation: scrollArrow 3s ease-in-out infinite;
}

@keyframes scrollArrow {

	0%,
	80%,
	100% {
		transform: translateY(0);
	}

	8% {
		transform: translateY(0.8vw);
	}

	16% {
		transform: translateY(0);
	}

	24% {
		transform: translateY(0.8vw);
	}

	32% {
		transform: translateY(0);
	}
}

#community_hero .text_part {
	width: 89.33333333vw;
	margin: 0 auto;
}

#community_hero .text_part p {
	font-size: 4.266666666666667vw;
	font-weight: 600;
	line-height: 1.75;
	color: var(--color-black);
}

#community_hero .text_part p+p {
	margin: 2.4vw 0 0;
}

/*==================================================
[sp] #about_sfo recruit TOP
================================================== */

#about_sfo {
    padding: 10.26666667vw 0 0;
    background: url(/okinawa/assets/img/bg_group_sp.webp) no-repeat center top / contain;
}

@media (min-width: 768px) {
    #about_sfo {
        padding: 80px 0 0;
        background: url(/okinawa/assets/img/bg_group_pc.webp) no-repeat center top / 1920px auto;
    }
	

}

#about_sfo .bgframe{
        padding: 90px 0 100px;
        background-color: var(--color-bg-blue);
    }

#about_sfo p.subtitle_rec span {
	width: 82vw;
	background-image: var(--subtitle-sfokinawa);
}

#about_sfo .panel_grid {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	gap: 10.66666667vw;
}

#about_sfo .panel a {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	border-radius: var(--bd-radius);
}

#about_sfo .title_part {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	width: 100%;
	height: 18.66666667vw;
	padding: 0 5.333333333vw;
	background: var(--gradation2);
}

#about_sfo .title_part p {
	color: var(--color-white);
	font-size: 5.6vw;
	line-height: 1;
	font-weight: 600;
}

#about_sfo .title_part::before {
	content: "";
	display: block;
	width: 10.66666667vw;
	height: 10.66666667vw;
	border-radius: var(--bd-radius);
	border: 0.72vw solid var(--color-white);
	background: var(--color-transparent);
	position: absolute;
	right: 5.333333333vw;
	top: calc(50% - 5.333333333vw);
}

#about_sfo .title_part::after {
	content: '';
	display: block;
	width: 3.2vw;
	height: 3.2vw;
	position: absolute;
	top: calc(50% - 1.6vw);
	right: 8.8vw;
	background: var(--icon-arrow-right-white);
}

@media (min-width: 768px) {
    .subpage_body section h2.subpage_h2 {
        font-size: 36px;
        padding: 0 0 32px;
        margin: 40px 0 40px;
        background-size: auto 12px;
    }
}

@media (max-width: 768px) {
	.subpage_body section h2.subpage_h2 {
	margin-top: 40px;
}
}

@media (min-width: 768px) {


	/*==================================================
  [PC] COMMON recruit TOP
================================================== */


	section p.subtitle_rec {
		height: 46px;
		padding: 12.5px;
		margin: 0 auto 20px;
		border-radius: 4px;
		background: url(/okinawa/community/img/bg_texture_top.png) no-repeat center center / auto 46px;
	}

	section p.subtitle_rec span {
		height: 21px;
	}

	section h2.rec_h2_title {
		width: 100%;
		font-size: 24px;
		margin-bottom: 50px;
	}

}

	/*==================================================
[PC] #community_hero
================================================== */
	#community_hero .main_part picture,
	#community_hero .main_part img {
	display: block;
	width: 100%;
	}

	#community_hero .main_part img {
	height: auto;/
	}

	#community_hero .scroll_down {
		display: none;
	}

	#community_hero .text_part {
		width: 1200px;
		margin: 90px auto;
	}

	@media (max-width:768px) {
		#community_hero .text_part {
			width: 100%;
			margin: 30px auto;
			padding: 0 20px;
		}
	}

	#community_hero .text_part p {
		font-size: 18px;
		text-align: center;
		line-height: 2;
	}

	#community_hero .text_part p+p {
		margin: 20px 0 0;
	}


	/*==================================================
[PC] #about_sfo recruit TOP
================================================== */




	#about_sfo p.subtitle_rec span {
		width: 511px;
		background-image: var(--subtitle-sfokinawa);
	}

	#about_sfo .panel_grid {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		position: relative;
		gap: 30px;
	}

	#about_sfo .panel a {
		width: 380px;
		border-radius: var(--bd-radius-s);
	}

	#about_sfo .panel a::after {
		border-radius: var(--bd-radius-s);
		border-width: 8px;
	}

	#about_sfo .panel a::hover::after {
		border-color: var(--color-primary);
	}

	#about_sfo .title_part {
		height: 70px;
		padding: 0 30px;
	}

	#about_sfo .title_part p {
		font-size: 22px;
	}

	#about_sfo .title_part::before {
		width: 32px;
		height: 32px;
		border-radius: 16px;
		border-width: 2px;
		right: 30px;
		top: calc(50% - 16px);
		transition: var(--transition-normal);
	}

	#about_sfo .panel a:hover .title_part::before {
		background: var(--color-white);
	}

	#about_sfo .panel a:hover .title_part::after {
		background: var(--icon-arrow-right);
		right: 35px;
	}

	#about_sfo .title_part::after {
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		position: absolute;
		top: calc(50% - 5px);
		right: 41px;
		transition: var(--transition-normal);
	}


	.subpage_body section p.name {
		font-size: 40px;
	}

	.name::after {
		margin-left: 8px;
		font-size: var(--font-base);
	}



/*==================================================
[sp] #com_md
================================================== */
#com_md .deco.seahorse {
	right: -1.066666667vw;
	top: 21.86666667vw;
}

#com_md .img_center {
	margin-top: var(--value-sp32);
}

#com_md .img_center .fig {
	margin: 0;
	width: 100%;
}

#com_md .img_right .fig {
	width: 63.2vw;
}


#com_md .img_right {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: var(--value-sp32);
	width: 100%;
}

#com_md .img_right .fig {
	width: 63.2vw;
}

	/*==================================================
[PC] #com_md
================================================== */
	#com_md .deco.seahorse {
		right: -10px;
		top: 27px;
	}

	#com_md .img_center {
		margin-top: 32px;
	}

	#com_md .img_center .fig {
		margin: 0 auto;
		width: 574px;
	}
	
	#com_md .img_right .fig {
		width: 240px;
		height: 160px;
		flex-shrink: 0;
	}
	
	#com_md .img_right {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 40px;
		width: 912px;
		margin: 0 auto;
	}

	#com_md .img_right .fig {
		width: 240px;
		height: 160px;
		flex-shrink: 0;
	}


#about_sfo p.subtitle_rec span {
	width: 82vw;
	background-image: var(--subtitle-sfokinawa);
}

#about_sfo .panel_grid {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	gap: 10.66666667vw;
}

#about_sfo .panel a {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	border-radius: var(--bd-radius);
}

#about_sfo .title_part {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	width: 100%;
	height: 18.66666667vw;
	padding: 0 5.333333333vw;
	background: var(--gradation2);
}

#about_sfo .title_part p {
	color: var(--color-white);
	font-size: 5.6vw;
	line-height: 1;
	font-weight: 600;
}

#about_sfo .title_part::before {
	content: "";
	display: block;
	width: 10.66666667vw;
	height: 10.66666667vw;
	border-radius: var(--bd-radius);
	border: 0.72vw solid var(--color-white);
	background: var(--color-transparent);
	position: absolute;
	right: 5.333333333vw;
	top: calc(50% - 5.333333333vw);
}

#about_sfo .title_part::after {
	content: '';
	display: block;
	width: 3.2vw;
	height: 3.2vw;
	position: absolute;
	top: calc(50% - 1.6vw);
	right: 8.8vw;
	background: var(--icon-arrow-right-white);
}


.subpage_body section.sec_small_interview {
	margin: 15.2vw 0 0;
	padding: 6.4vw 0 0;
}

.subpage_body section.sec_small_interview::before {
	content: "";
	width: 82.4vw;
	height: var(--value-sp40);
	position: absolute;
	left: -5.333333333vw;
	top: 0;
	background: var(--bg-sec-interview) no-repeat left top / auto var(--value-sp40);
}

.sec_small_schedule h3.emp_subtitle {
	display: block;
	position: relative;
	font-size: var(--value-sp24);
	font-weight: 600;
	line-height: 1.75;
}

p.notice {
	margin: var(--value-sp40) 0 0;
	font-size: 3.733333333vw;
	line-height: 1.75;
}

#entory_common .inner {
	width: 89.33333333vw;
	margin: 0 auto;
	padding: 0;
	position: relative;
}



@media (min-width: 768px) {


	/*==================================================
  [PC] COMMON recruit TOP
================================================== */


	section p.subtitle_rec {
		height: 46px;
		padding: 12.5px;
		margin: 0 auto 20px;
		border-radius: 4px;
		background: var(--bg-texture) no-repeat center center / auto 46px;
	}

	section p.subtitle_rec span {
		height: 21px;
	}

	section h2.rec_h2_title {
		width: 100%;
		font-size: 24px;
		margin-bottom: 50px;
	}


	/*==================================================
[PC] #community_hero
================================================== */
	#community_hero .main_part picture,
	#community_hero .main_part img {
	display: block;
	width: 100%;
	}

	#community_hero .main_part img {
	height: auto;/
	}

	#community_hero .scroll_down {
		display: none;
	}

	#community_hero .text_part {
		width: 1200px;
		margin: 60px auto 60px;
	}

	#community_hero .text_part p {
		font-size: 18px;
		text-align: center;
		line-height: 2;
	}

	#community_hero .text_part p+p {
		margin: 20px 0 0;
	}


	/*==================================================
[PC] #about_sfo recruit TOP
================================================== */




	#about_sfo p.subtitle_rec span {
		width: 511px;
		background-image: var(--subtitle-sfokinawa);
	}

	#about_sfo .panel_grid {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		position: relative;
		gap: 30px;
	}

	#about_sfo .panel a {
		width: 380px;
		border-radius: var(--bd-radius-s);
	}

	#about_sfo .panel a::after {
		border-radius: var(--bd-radius-s);
		border-width: 8px;
	}

	#about_sfo .panel a::hover::after {
		border-color: var(--color-primary);
	}

	#about_sfo .title_part {
		height: 70px;
		padding: 0 30px;
	}

	#about_sfo .title_part p {
		font-size: 22px;
	}

	#about_sfo .title_part::before {
		width: 32px;
		height: 32px;
		border-radius: 16px;
		border-width: 2px;
		right: 30px;
		top: calc(50% - 16px);
		transition: var(--transition-normal);
	}

	#about_sfo .panel a:hover .title_part::before {
		background: var(--color-white);
	}

	#about_sfo .panel a:hover .title_part::after {
		background: var(--icon-arrow-right);
		right: 35px;
	}

	#about_sfo .title_part::after {
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		position: absolute;
		top: calc(50% - 5px);
		right: 41px;
		transition: var(--transition-normal);
	}


	/*==================================================
[PC] #rec_group recruit TOP
================================================== */
	#rec_group p.subtitle_rec span {
		width: 358px;
	}

	.subpage_body section p.name {
		font-size: 40px;
	}

	.name::after {
		margin-left: 8px;
		font-size: var(--font-base);
	}

	.sec_small_schedule h3.emp_subtitle {
		margin: 0 0 0 auto;
		width: 830px;
		font-size: 30px;
	}

	p.notice {
		margin: var(--value-pc40) 0 0;
		font-size: 14px;
	}

}

/*==================================================
[sp] #com_md
================================================== */
#com_md .deco.seahorse {
	right: -1.066666667vw;
	top: 21.86666667vw;
}

#com_md .img_center {
	margin-top: var(--value-sp32);
}

#com_md .img_center .fig {
	margin: 0;
	width: 100%;
}

#com_md .img_right .fig {
	width: 63.2vw;
}


#com_md .img_right {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: var(--value-sp32);
	width: 100%;
}

#com_md .img_right .fig {
	width: 63.2vw;
}


@media (min-width: 768px) {


	/*==================================================
[PC] #com_md
================================================== */
	#com_md .deco.seahorse {
		right: -10px;
		top: 27px;
	}

	#com_md .img_center {
		margin-top: 32px;
	}

	#com_md .img_center .fig {
		margin: 0 auto;
		width: 574px;
	}
	
	#com_md .img_right .fig {
		width: 240px;
		height: 160px;
		flex-shrink: 0;
	}
	
	#com_md .img_right {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 40px;
		width: 912px;
		margin: 0 auto;
	}

	#com_md .img_right .fig {
		width: 240px;
		height: 160px;
		flex-shrink: 0;
	}

}