@charset "UTF-8";
@media (max-width: 1180px) {
	.flow-arrow::before {
		border-top: 8px solid var(--blue);
		border-right: 8px solid var(--blue);
	}
	.flow-arrow::after {
		height: 8px;
	}
}

@media (max-width: 960px) {
	/* HEADER (mobile: always use the fixed-header shape) */
	.header {
		display: none;
	}
	.header--fixed {
		position: fixed;
		transform: translateY(0);
		transition: none;
	}


	/* HEADER (fixed) */
	.header--fixed__logo img {
		height: 28px;
	}
	.header--fixed__logo-txt svg {
		height: 25px;
	}
	.header--fixed .header__join-reserve.lnkbtn,
	.header--fixed .header__join-line.lnkbtn {
		width: 34px;
		height: 34px;
	}
	.hamburger {
		width: 100px;
		height: 34px;
	}
	.hamburger span:nth-child(1) { top: 10px; }
	.hamburger span:nth-child(2) { top: 50%; transform: translate(-50%, -50%); }
	.hamburger span:nth-child(3) { top: 22px; }



	/* HERO */
	.hero {
		padding-top: 80px;
	}
	.heroimg-wrap {
		width: 80%;
		aspect-ratio: 6.5 / 3.5;
	}
	.hero__circles {
		top: 12vw;
		left: 6vw;
	}
	.hero__txt {
		margin-top: 3em;
	}
	.hero__txt-main {
		top: calc(26.5vw + 85px);
	}
	.hero__txt-sub span:not(.hero-char) {
		display: inline;
	}
	.hero__txt dl {
		padding: 1.5em 0;
	}


	/* INTRO */
	.worries {
		display: block;
		padding: 0 10%;
	}
	.worries__title {
		width: 100%;
		padding: 5vw 0;
	}
	.worries__title .lnkbtn {
		width: 100%;
	}
	.worries__list {
		width: 100%;
		margin: auto;
		padding-right: 0;
	}


	/* ABOUT */
	.important.-flex {
		display: block;
	}
	.important__box {
		margin-top: 5.5vw;
		padding-bottom: 6vw;
		width: 100%;
	}


	/* SERVICE */
	#SERVICE h2 span.jpn, #FLOW h2 span.jpn {
		display: block;
		margin-left: 0;
		margin-top: .5em;
	}
	.service-content.-flex {
		display: block;
	}
	.service-content__box {
		width: 100%;
		margin-bottom: 20px;
	}
	.service-content__box .image {
		aspect-ratio: 16 / 9;
	}
	.service-content__box  .texts {
		padding-left: 8vw;
	}
	.service-content__box .texts--title::before {
		top: .1em;
		left: -4.5vw;
	}
	#SERVICE .lnkbtn {
		width: 90%;
		margin-top: 8vw;
	}
	


	/* FLOW */
	.flow-content.-flex {
		position: relative;
		flex-wrap: wrap;
	}
	.flow-box {
		width: calc(50% - 3vw);
		margin-bottom: 5vw;
	}
	.flow-content .flow-arrow:nth-child(4) {
		position: absolute;
		left: -4vw;
		bottom: 25%;
	}
	.flow-arrow::before {
		top: calc(50% - 20px);
		border-top: 3px solid var(--blue);
		border-right: 3px solid var(--blue);
	}
	.flow-arrow::after {
		top: calc(50% - 20px);
		height: 3px;
	}
	.important__box h4 {
		padding: 0 .8vw;
	}


	/* STAFF & MESSAGE */
	.staff-mess::after {
		display: none;
	}
	#STAFF h2 {
		position: relative;
		width: 100%;
		top: auto;
		left: auto;
		margin-bottom: 5.5vw;
	}
	#STAFF h2 span.en {
		position: relative;
		display: inline-block;
		top: auto;
		left: auto;
		transform: rotate(0);
	}
	#STAFF h2::after {
		content: '';
		position: absolute;
		top: 50%;
		right: calc(50% - 50vw);
		width: 100%;
		height: 1px;
		background: var(--blue);
		transform: translateY(-50%);
	}
	.staff-content__photo {
		order: inherit;
		width: 100%;
		margin-bottom: 4vw;
	}
	.staff-content__photo p {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 6;
	}
	.staff-content__photo p::before {
		left: 50%;
		bottom: -1px;
		width: 20px;
		height: 30px;
		background: var(--brown);
  		clip-path: polygon(0 100%, 50% 0, 100% 100%);
		transform: translateX(-50%);
	}
	.staff-content__txt {
		width: 90%;
		margin: auto;
	}
	.staff-content__txt-history ul {
		margin: 0 2vw;
	}
	.staff-content__txt-comment {
		padding: 2vw 0;
		margin: 2vw;
	}

	.message-balloon {
		display: block;
	}
	.message-balloon .content {
		margin: 6vw 0 0;
		padding: 5vw 0 0;
		border-top: 2px solid var(--blue);
		border-left: none;
	}



	/* FOOTER */
	.footer__inner {
		display: block;
		justify-content: space-between;
		padding-top: 6.5vw;
		border-top: 1px solid #FFF;
	}
	.footer__navs {
		width: 100%;
		min-width: initial;
	}
	.footer__navs-logo {
		width: 20%;
		margin: auto;
	}
	.footer__navs .globalnav ul {
		margin:8vw auto 0;
		display: flex;
		justify-content: center;
	}
	.footer__navs .globalnav ul li {
		padding: 0 1em;
	}
	.footer__join {
		display: flex;
		justify-content: center;
		width: 75%;
		margin: 10px auto 5vw;
	}
	.footer__join .lnkbtn {
		margin: 0 .5em;
	}
	.footer__access-content {
		flex-wrap: wrap;
		padding: 5vw 0 0;
		border-top: 1px solid #FFF;
	}
	.accessbox {
		padding-left: 0;
		margin-left: 0;
		border-left: none;
		min-width: initial;
		width: 47.5%;
	}
	.accessmap {
		width: 47.5%;
	}
	.accessway {
		width: 100%;
		margin-top: 5vw;
		padding-top: 5vw;
		border-top: 1px solid #FFF;
	}


	.copyright {
		text-align: center;
		padding: 8vw 0 10px;
	}

}