@charset "utf-8";


/************************************
#obu-ulala
************************************/
@media screen and (min-width: 1200px) {
	#obu-ulala {
		width: 100%;
		padding-top: 100px;
	}
	
	#obu-ulala h3 {
		color: var(--bw1);
		font-size: 30px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		margin-bottom: 50px;
	}
	
	#obu-ulala .main {
		position: relative;
		background: url("../img/about/obu-ulala.webp") no-repeat;
		background-size: 2000px 690px;
		background-position: center center;
		width: 100%;
		height: 690px;
		margin-bottom: -170px;
	}
	
	#obu-ulala .main::before {
		position: absolute;
		display: block;
		content: "";
		background: linear-gradient(to right, var(--bw6) 0%, var(--bw6) 10%, transparent 100%);
		width: 200px;
		height: 690px;
		top: 50%;
		left: calc(50% - (2000px / 2));
		transform: translateY(-50%);
		z-index: 1;
	}
	
	#obu-ulala .main::after {
		position: absolute;
		display: block;
		content: "";
		background: linear-gradient(to left, var(--bw6) 0%, var(--bw6) 10%, transparent 100%);
		width: 200px;
		height: 690px;
		top: 50%;
		right: calc(50% - (2000px / 2));
		transform: translateY(-50%);
		z-index: 1;
	}
	
	#obu-ulala .main h4 {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--bw6);
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		color: var(--bw1);
		font-size: 33px;
		line-height: 46px;
		font-weight: var(--bold);
		text-align: left;
		width: 122px;
		height: 386px;
		top: 50px;
		right: calc(50% - (1080px / 2));
		z-index: 1;
	}
	
	#obu-ulala .main .gradation {
		position: absolute;
		display: block;
		content: "";
		background: linear-gradient(to top, rgba(32, 162, 171, 0.5) 0%, transparent 100%);
		width: 2000px;
		height: 340px;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	
	#obu-ulala .wrapper {
		position: relative;
		box-sizing: border-box;
		background: var(--bw6);
		border-radius: 20px;
		width: 1080px;
		padding: 50px 0 55px;
		margin: 0 auto;
	}
	
	#obu-ulala .wrapper .text {
		display: flex;
		justify-content: space-between;
		width: 960px;
		margin: 0 auto;
	}
	
	#obu-ulala .wrapper .text .en {
		flex-grow: 1;
		font-family: "Quicksand", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		font-size: 60px;
		line-height: 75.5px;
		text-align: left;
	}
	
	#obu-ulala .wrapper .text .en .lightblue1 {
		color: var(--lightblue1);
	}
	
	#obu-ulala .wrapper .text .en .yellow1 {
		color: var(--yellow1);
	}
	
	#obu-ulala .wrapper .text .en .green4 {
		color: var(--green4);
	}
	
	#obu-ulala .wrapper .text .message {
		color: var(--bw1);
		font-size: 16px;
		line-height: 26px;
		font-weight: var(--regular);
		text-align: justify;
		width: 720px;
	}
	
	#obu-ulala .wrapper .text .message span {
		font-weight: var(--bold);
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	#obu-ulala {
		width: 100%;
		padding-top: calc(100vw / var(--tablet));
	}
	
	#obu-ulala h3 {
		color: var(--bw1);
		font-size: calc(30vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		margin-bottom: calc(50vw / var(--tablet));
	}
	
	#obu-ulala .main {
		position: relative;
		background: url("../img/about/obu-ulala.webp") no-repeat;
		background-size: calc(2000vw / var(--tablet)) calc(690vw / var(--tablet));
		background-position: center center;
		width: 100%;
		height: calc(690vw / var(--tablet));
		margin-bottom: calc(-170vw / var(--tablet));
	}
	
	#obu-ulala .main h4 {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--bw6);
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		color: var(--bw1);
		font-size: calc(33vw / var(--tablet));
		line-height: calc(46vw / var(--tablet));
		font-weight: var(--bold);
		text-align: left;
		width: calc(122vw / var(--tablet));
		height: calc(386vw / var(--tablet));
		top: calc(50vw / var(--tablet));
		right: calc(50% - ((1080vw / var(--tablet)) / 2));
		z-index: 1;
	}
	
	#obu-ulala .main .gradation {
		position: absolute;
		display: block;
		content: "";
		background: linear-gradient(to top, rgba(32, 162, 171, 0.5) 0%, transparent 100%);
		width: calc(2000vw / var(--tablet));
		height: calc(340vw / var(--tablet));
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	
	#obu-ulala .wrapper {
		position: relative;
		box-sizing: border-box;
		background: var(--bw6);
		border-radius: calc(20vw / var(--tablet));
		width: calc(1080vw / var(--tablet));
		padding: calc(50vw / var(--tablet)) 0 calc(55vw / var(--tablet));
		margin: 0 auto;
	}
	
	#obu-ulala .wrapper .text {
		display: flex;
		justify-content: space-between;
		width: calc(960vw / var(--tablet));
		margin: 0 auto;
	}
	
	#obu-ulala .wrapper .text .en {
		flex-grow: 1;
		font-family: "Quicksand", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		font-size: calc(60vw / var(--tablet));
		line-height: calc(75.5vw / var(--tablet));
		text-align: left;
	}
	
	#obu-ulala .wrapper .text .en .lightblue1 {
		color: var(--lightblue1);
	}
	
	#obu-ulala .wrapper .text .en .yellow1 {
		color: var(--yellow1);
	}
	
	#obu-ulala .wrapper .text .en .green4 {
		color: var(--green4);
	}
	
	#obu-ulala .wrapper .text .message {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: calc(26vw / var(--tablet));
		font-weight: var(--regular);
		text-align: justify;
		width: calc(720vw / var(--tablet));
	}
	
	#obu-ulala .wrapper .text .message span {
		font-weight: var(--bold);
	}
}

@media screen and (max-width: 767px) {
	#obu-ulala {
		width: 100%;
		padding-top: calc(70vw / var(--sp));
	}
	
	#obu-ulala .main {
		position: relative;
		background: url("../img/about/obu-ulala.webp") no-repeat;
		background-size: calc(936vw / var(--sp)) calc(338vw / var(--sp));
		background-position: top left calc(-240vw / var(--sp));
		width: 100%;
		height: calc(310vw / var(--sp));
		margin-bottom: calc(-40vw / var(--sp));
	}
	
	#obu-ulala .main h4 {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--bw6);
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		color: var(--bw1);
		font-size: calc(22vw / var(--sp));
		line-height: calc(32vw / var(--sp));
		font-weight: var(--bold);
		text-align: left;
		width: calc(81vw / var(--sp));
		height: calc(257vw / var(--sp));
		top: calc(-70vw / var(--sp));
		right: calc(10vw / var(--sp));
		z-index: 1;
	}
	
	#obu-ulala .main .gradation {
		position: absolute;
		display: block;
		content: "";
		background: linear-gradient(to top, rgba(32, 162, 171, 0.5) 0%, transparent 100%);
		width: 100%;
		height: calc(195vw / var(--sp));
		bottom: 0;
	}
	
	#obu-ulala .wrapper {
		position: relative;
		box-sizing: border-box;
		background: var(--bw6);
		border-radius: calc(10vw / var(--sp));
		width: calc(340vw / var(--sp));
		padding: calc(30vw / var(--sp)) 0 calc(45vw / var(--sp));
		margin: 0 auto;
	}
	
	#obu-ulala .wrapper .text {
		width: 100%;
	}
	
	#obu-ulala .wrapper .text .en {
		flex-grow: 1;
		font-family: "Quicksand", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		font-size: calc(44vw / var(--sp));
		line-height: calc(55vw / var(--sp));
		text-align: center;
		width: 100%;
		margin-bottom: calc(30vw / var(--sp));
	}
	
	#obu-ulala .wrapper .text .en .lightblue1 {
		color: var(--lightblue1);
	}
	
	#obu-ulala .wrapper .text .en .yellow1 {
		color: var(--yellow1);
	}
	
	#obu-ulala .wrapper .text .en .green4 {
		color: var(--green4);
	}
	
	#obu-ulala .wrapper .text .message {
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: calc(26vw / var(--sp));
		font-weight: var(--regular);
		text-align: justify;
		width: 100%;
	}
	
	#obu-ulala .wrapper .text .message span {
		font-weight: var(--bold);
	}
}


/************************************
#vision
************************************/
@media screen and (min-width: 1200px) {
	#vision {
		position: relative;
		box-sizing: border-box;
		background: var(--green2);
		border-radius: 20px;
		width: 1080px;
		padding: 95px 0 50px;
		margin: 0 auto 50px;
	}
	
	#vision .en_corner p {
		color: var(--green1);
	}
	
	#vision .wrapper {
		display: flex;
		justify-content: space-between;
		width: 960px;
		margin: 0 auto;
	}
	
	#vision .wrapper>.title {
		flex-grow: 1;
	}
	
	#vision .wrapper>.title h3 {
		color: var(--bw1);
		font-size: 30px;
		line-height: 40px;
		font-weight: var(--bold);
		text-align: left;
		width: 100%;
	}
	
	#vision .wrapper .text {
		background: var(--bw6);
		border-radius: 20px;
		width: 720px;
		padding: 50px 0;
	}
	
	#vision .wrapper .text h4 {
		display: block;
		align-content: center;
		color: var(--green1);
		font-size: 22px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		border-top: 1px solid var(--green1);
		border-bottom: 1px solid var(--green1);
		width: 620px;
		height: 80px;
		margin: 0 auto 20px;
	}
	
	#vision .wrapper .text ol {
		display: flex;
		flex-direction: column;
		gap: 10px 0;
		width: 620px;
		margin: 0 auto;
	}
	
	#vision .wrapper .text ol li {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	
	#vision .wrapper .text ol li h5 {
		display: block;
		align-content: center;
		background: var(--green2);
		font-family: "Quicksand", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: var(--green1);
		font-size: 36px;
		line-height: 1em;
		text-align: center;
		border-radius: calc(44px / 2);
		width: 44px;
		height: 44px;
	}
	
	#vision .wrapper .text ol li p {
		display: block;
		align-content: center;
		color: var(--bw1);
		font-size: 16px;
		line-height: 26px;
		font-weight: var(--regular);
		text-align: left;
		width: 567px;
		min-height: 44px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	#vision {
		position: relative;
		box-sizing: border-box;
		background: var(--green2);
		border-radius: calc(20vw / var(--tablet));
		width: calc(1080vw / var(--tablet));
		padding: calc(95vw / var(--tablet)) 0 calc(50vw / var(--tablet));
		margin: 0 auto calc(50vw / var(--tablet));
	}
	
	#vision .en_corner p {
		color: var(--green1);
	}
	
	#vision .wrapper {
		display: flex;
		justify-content: space-between;
		width: calc(960vw / var(--tablet));
		margin: 0 auto;
	}
	
	#vision .wrapper>.title {
		flex-grow: 1;
	}
	
	#vision .wrapper>.title h3 {
		color: var(--bw1);
		font-size: calc(30vw / var(--tablet));
		line-height: calc(40vw / var(--tablet));
		font-weight: var(--bold);
		text-align: left;
		width: 100%;
	}
	
	#vision .wrapper .text {
		background: var(--bw6);
		border-radius: calc(20vw / var(--tablet));
		width: calc(720vw / var(--tablet));
		padding: calc(50vw / var(--tablet)) 0;
	}
	
	#vision .wrapper .text h4 {
		display: block;
		align-content: center;
		color: var(--green1);
		font-size: calc(22vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		border-top: calc(1vw / var(--tablet)) solid var(--green1);
		border-bottom: calc(1vw / var(--tablet)) solid var(--green1);
		width: calc(620vw / var(--tablet));
		height: calc(80vw / var(--tablet));
		margin: 0 auto calc(20vw / var(--tablet));
	}
	
	#vision .wrapper .text ol {
		display: flex;
		flex-direction: column;
		gap: calc(10vw / var(--tablet)) 0;
		width: calc(620vw / var(--tablet));
		margin: 0 auto;
	}
	
	#vision .wrapper .text ol li {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	
	#vision .wrapper .text ol li h5 {
		display: block;
		align-content: center;
		background: var(--green2);
		font-family: "Quicksand", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: var(--green1);
		font-size: calc(36vw / var(--tablet));
		line-height: 1em;
		text-align: center;
		border-radius: calc((44vw / var(--tablet)) / 2);
		width: calc(44vw / var(--tablet));
		height: calc(44vw / var(--tablet));
	}
	
	#vision .wrapper .text ol li p {
		display: block;
		align-content: center;
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: calc(26vw / var(--tablet));
		font-weight: var(--regular);
		text-align: left;
		width: calc(567vw / var(--tablet));
		min-height: calc(44vw / var(--tablet));
	}
}

@media screen and (max-width: 767px) {
	#vision {
		position: relative;
		box-sizing: border-box;
		background: var(--green2);
		border-radius: calc(20vw / var(--sp));
		width: calc(340vw / var(--sp));
		padding: calc(60vw / var(--sp)) 0 calc(45vw / var(--sp));
		margin: 0 auto calc(30vw / var(--sp));
	}
	
	#vision .en_corner p {
		color: var(--green1);
	}
	
	#vision .wrapper {
		width: 100%;
	}
	
	#vision .wrapper>.title {
		width: 100%;
	}
	
	#vision .wrapper>.title h3 {
		color: var(--bw1);
		font-size: calc(30vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		margin-bottom: calc(30vw / var(--sp));
	}
	
	#vision .wrapper .text {
		background: var(--bw6);
		border-radius: calc(10vw / var(--sp));
		width: calc(280vw / var(--sp));
		padding: calc(30vw / var(--sp)) 0 calc(25vw / var(--sp));
		margin: 0 auto;
	}
	
	#vision .wrapper .text h4 {
		display: block;
		align-content: center;
		color: var(--green1);
		font-size: calc(22vw / var(--sp));
		line-height: calc(32vw / var(--sp));
		font-weight: var(--bold);
		text-align: center;
		border-top: calc(1vw / var(--sp)) solid var(--green1);
		border-bottom: calc(1vw / var(--sp)) solid var(--green1);
		width: calc(230vw / var(--sp));
		height: calc(146vw / var(--sp));
		margin: 0 auto calc(30vw / var(--sp));
	}
	
	#vision .wrapper .text ol {
		display: flex;
		flex-direction: column;
		gap: calc(20vw / var(--sp)) 0;
		width: calc(230vw / var(--sp));
		margin: 0 auto;
	}
	
	#vision .wrapper .text ol li {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	
	#vision .wrapper .text ol li h5 {
		display: block;
		align-content: center;
		background: var(--green2);
		font-family: "Quicksand", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: var(--green1);
		font-size: calc(36vw / var(--sp));
		line-height: 1em;
		text-align: center;
		border-radius: calc((44vw / var(--sp)) / 2);
		width: calc(44vw / var(--sp));
		height: calc(44vw / var(--sp));
	}
	
	#vision .wrapper .text ol li p {
		display: block;
		align-content: center;
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: calc(26vw / var(--sp));
		font-weight: var(--regular);
		text-align: left;
		width: calc(175vw / var(--sp));
	}
}


/************************************
#clinic
************************************/
@media screen and (min-width: 1200px) {
	#clinic {
		width: 1080px;
		margin: 0 auto 50px;
	}
	
	#clinic .wrapper {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 50px;
	}
	
	#clinic .wrapper h3 {
		color: var(--bw1);
		font-size: 26px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
	}
	
	#clinic .wrapper table {
		width: 780px;
	}
	
	#clinic .wrapper table tr {
		display: block;
		border-bottom: 1px solid var(--bw4);
		padding: 25px 0;
	}
	
	#clinic .wrapper table tr:first-child {
		border-top: 1px solid var(--bw4);
	}
	
	#clinic .wrapper table tr th {
		color: var(--bw1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		width: 115px;
	}
	
	#clinic .wrapper table tr td {
		color: var(--bw1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
	}
	
	#clinic .map {
		width: 100%;
	}
	
	#clinic .map iframe {
		width: 100%;
		height: 500px;
		margin-bottom: 20px;
	}
	
	#clinic .map .attention {
		color: var(--bw1);
		font-size: 16px;
		line-height: 1em;
		font-weight: var(--regular);
		text-align: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	#clinic {
		width: calc(1080vw / var(--tablet));
		margin: 0 auto calc(50vw / var(--tablet));
	}
	
	#clinic .wrapper {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: calc(50vw / var(--tablet));
	}
	
	#clinic .wrapper h3 {
		color: var(--bw1);
		font-size: calc(26vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
	}
	
	#clinic .wrapper table {
		width: calc(780vw / var(--tablet));
	}
	
	#clinic .wrapper table tr {
		display: block;
		border-bottom: calc(1vw / var(--tablet)) solid var(--bw4);
		padding: calc(25vw / var(--tablet)) 0;
	}
	
	#clinic .wrapper table tr:first-child {
		border-top: calc(1vw / var(--tablet)) solid var(--bw4);
	}
	
	#clinic .wrapper table tr th {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		width: calc(115vw / var(--tablet));
	}
	
	#clinic .wrapper table tr td {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
	}
	
	#clinic .map {
		width: 100%;
	}
	
	#clinic .map iframe {
		width: 100%;
		height: calc(500vw / var(--tablet));
		margin-bottom: calc(20vw / var(--tablet));
	}
	
	#clinic .map .attention {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: center;
	}
}

@media screen and (max-width: 767px) {
	#clinic {
		width: 100%;
		margin: 0 auto calc(55vw / var(--sp));
	}
	
	#clinic .wrapper {
		width: 100%;
		margin-bottom: calc(50vw / var(--sp));
	}
	
	#clinic .wrapper h3 {
		color: var(--bw1);
		font-size: calc(26vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		margin-bottom: calc(20vw / var(--sp));
	}
	
	#clinic .wrapper table {
		width: calc(300vw / var(--sp));
		margin: 0 auto;
	}
	
	#clinic .wrapper table tr {
		display: block;
		border-bottom: calc(1vw / var(--sp)) solid var(--bw4);
		padding: calc(22vw / var(--sp)) 0;
	}
	
	#clinic .wrapper table tr:first-child {
		border-top: calc(1vw / var(--sp)) solid var(--bw4);
	}
	
	#clinic .wrapper table tr th {
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: calc(26vw / var(--sp));
		font-weight: var(--regular);
		text-align: left;
		width: calc(86vw / var(--sp));
	}
	
	#clinic .wrapper table tr td {
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: calc(26vw / var(--sp));
		font-weight: var(--regular);
		text-align: left;
	}
	
	#clinic .map {
		width: calc(340vw / var(--sp));
		margin: 0 auto;
	}
	
	#clinic .map iframe {
		width: 100%;
		height: calc(320vw / var(--sp));
		margin-bottom: calc(15vw / var(--sp));
	}
	
	#clinic .map .attention {
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
	}
}


/************************************
#gallery
************************************/
@media screen and (min-width: 1200px) {
	#gallery {
		width: 1080px;
		margin: 0 auto 50px;
	}
	
	#gallery h3 {
		color: var(--bw1);
		font-size: 26px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		width: 100%;
		margin-bottom: 55px;
	}
	
	#gallery ul {
		display: flex;
		flex-wrap: wrap;
		gap: 25px 22px;
		width: 100%;
		margin-bottom: 18px;
	}
	
	#gallery ul li {
		overflow: hidden;
		border-radius: 20px;
		width: 345px;
	}
	
	#gallery ul li img {
		width: 100%;
	}
	
	#gallery small {
		color: var(--bw1);
		font-size: 10px;
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
		width: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	#gallery {
		width: calc(1080vw / var(--tablet));
		margin: 0 auto calc(50vw / var(--tablet));
	}
	
	#gallery h3 {
		color: var(--bw1);
		font-size: calc(26vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: left;
		width: 100%;
		margin-bottom: calc(55vw / var(--tablet));
	}
	
	#gallery ul {
		display: flex;
		flex-wrap: wrap;
		gap: calc(25vw / var(--tablet)) calc(22vw / var(--tablet));
		width: 100%;
		margin-bottom: calc(18vw / var(--tablet));
	}
	
	#gallery ul li {
		overflow: hidden;
		border-radius: calc(20vw / var(--tablet));
		width: calc(345vw / var(--tablet));
	}
	
	#gallery ul li img {
		width: 100%;
	}
	
	#gallery small {
		color: var(--bw1);
		font-size: calc(10vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	#gallery {
		position: relative;
		width: 100%;
		margin-bottom: calc(120vw / var(--sp));
	}
	
	#gallery h3 {
		color: var(--bw1);
		font-size: calc(26vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		margin-bottom: calc(30vw / var(--sp));
	}
	
	#gallery .swiper {
		position: relative;
		width: 100%;
		height: calc(290vw / var(--sp));
	}
	
	#gallery .swiper ul li {
		overflow: hidden;
		border-radius: calc(20vw / var(--sp));
		width: calc(300vw / var(--sp));
		height: calc(220vw / var(--sp));
		margin: 0 calc(10vw / var(--sp));
	}
	
	#gallery .swiper ul li img {
		width: 100%;
	}
	
	#gallery .swiper .swiper-pagination {
		position: absolute;
		display: flex;
		gap: 0 calc(8vw / var(--sp));
		bottom: calc(12vw / var(--sp));
		left: calc(25vw / var(--sp));
	}
	
	#gallery .swiper .swiper-pagination .swiper-pagination-bullet {
		background: var(--bw3);
		border-radius: calc((16vw / 2) / var(--sp));
		width: calc(16vw / var(--sp));
		height: calc(16vw / var(--sp));
		margin: 0;
		opacity: 1;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}
	
	#gallery .swiper .swiper-pagination .swiper-pagination-bullet:hover, #gallery .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
		background: var(--lightblue1);
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}
	
	#gallery .swiper .swiper-button-prev {
		position: absolute;
		box-sizing: border-box;
		background: var(--bw6);
		border: calc(1vw / var(--sp)) solid var(--bw3);
		border-radius: calc((40vw / 2) / var(--sp));
		width: calc(40vw / var(--sp));
		height: calc(40vw / var(--sp));
		top: auto;
		bottom: 0;
		left: auto;
		right: calc(80vw / var(--sp));
	}
	
	#gallery .swiper .swiper-button-next {
		position: absolute;
		box-sizing: border-box;
		background: var(--bw6);
		border: calc(1vw / var(--sp)) solid var(--bw3);
		border-radius: calc((40vw / 2) / var(--sp));
		width: calc(40vw / var(--sp));
		height: calc(40vw / var(--sp));
		top: auto;
		bottom: 0;
		left: auto;
		right: calc(25vw / var(--sp));
	}
	
	#gallery .swiper .swiper-button-prev i, #gallery .swiper .swiper-button-next i {
		color: var(--bw1);
		font-size: 14px;
	}
	
	#gallery .swiper .swiper-button-prev::after, #gallery .swiper .swiper-button-next::after {
		display: none;
	}
	
	#gallery small {
		position: absolute;
		color: var(--bw1);
		font-size: calc(10vw / var(--sp));
		line-height: 1em;
		font-weight: var(--regular);
		text-align: left;
		width: calc(300vw / var(--sp));
		bottom: calc(-15vw / var(--sp));
		left: 50%;
		transform: translateX(-50%);
	}
}


/************************************
#mascot
************************************/
@media screen and (min-width: 1200px) {
	#mascot {
		position: relative;
		box-sizing: border-box;
		background: var(--green3);
		border-radius: 20px;
		width: 1080px;
		padding: 95px 0 50px;
		margin: 0 auto 110px;
	}
	
	#mascot .en_corner p {
		color: var(--green1);
	}
	
	#mascot .wrapper {
		display: flex;
		justify-content: space-between;
		width: 960px;
		margin: 0 auto;
	}
	
	#mascot .wrapper>.title {
		flex-grow: 1;
	}
	
	#mascot .wrapper>.title h3 {
		color: var(--bw1);
		font-size: 30px;
		line-height: 40px;
		font-weight: var(--bold);
		text-align: left;
		width: 100%;
		margin-bottom: 30px;
	}
	
	#mascot .wrapper>.title p {
		color: var(--bw1);
		font-size: 16px;
		line-height: 26px;
		font-weight: var(--regular);
		text-align: left;
		width: 280px;
	}
	
	#mascot .wrapper .character {
		position: relative;
		background: var(--bw6);
		border-radius: 20px;
		width: 620px;
		height: 200px;
		margin-top: 105px;
	}
	
	#mascot .wrapper .character ul {
		position: absolute;
		display: flex;
		justify-content: space-between;
		width: 310px;
		top: -30px;
		left: 50%;
		transform: translateX(-50%);
	}
	
	#mascot .wrapper .character ul li {
		width: 109px;
	}
	
	#mascot .wrapper .character ul li img {
		width: 100%;
		height: 140px;
		margin-bottom: 15px;
	}
	
	#mascot .wrapper .character ul li h4 {
		color: var(--blue1);
		font-size: 18px;
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	#mascot {
		position: relative;
		box-sizing: border-box;
		background: var(--green3);
		border-radius: calc(20vw / var(--tablet));
		width: calc(1080vw / var(--tablet));
		padding: calc(95vw / var(--tablet)) 0 calc(50vw / var(--tablet));
		margin: 0 auto calc(110vw / var(--tablet));
	}
	
	#mascot .en_corner p {
		color: var(--green1);
	}
	
	#mascot .wrapper {
		display: flex;
		justify-content: space-between;
		width: calc(960vw / var(--tablet));
		margin: 0 auto;
	}
	
	#mascot .wrapper>.title {
		flex-grow: 1;
	}
	
	#mascot .wrapper>.title h3 {
		color: var(--bw1);
		font-size: calc(30vw / var(--tablet));
		line-height: calc(40vw / var(--tablet));
		font-weight: var(--bold);
		text-align: left;
		width: 100%;
		margin-bottom: calc(30vw / var(--tablet));
	}
	
	#mascot .wrapper>.title p {
		color: var(--bw1);
		font-size: calc(16vw / var(--tablet));
		line-height: calc(26vw / var(--tablet));
		font-weight: var(--regular);
		text-align: left;
		width: calc(280vw / var(--tablet));
	}
	
	#mascot .wrapper .character {
		position: relative;
		background: var(--bw6);
		border-radius: calc(20vw / var(--tablet));
		width: calc(620vw / var(--tablet));
		height: calc(200vw / var(--tablet));
		margin-top: calc(105vw / var(--tablet));
	}
	
	#mascot .wrapper .character ul {
		position: absolute;
		display: flex;
		justify-content: space-between;
		width: calc(310vw / var(--tablet));
		top: calc(-30vw / var(--tablet));
		left: 50%;
		transform: translateX(-50%);
	}
	
	#mascot .wrapper .character ul li {
		width: calc(109vw / var(--tablet));
	}
	
	#mascot .wrapper .character ul li img {
		width: 100%;
		height: calc(140vw / var(--tablet));
		margin-bottom: calc(15vw / var(--tablet));
	}
	
	#mascot .wrapper .character ul li h4 {
		color: var(--blue1);
		font-size: calc(18vw / var(--tablet));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	#mascot {
		position: relative;
		box-sizing: border-box;
		background: var(--green3);
		border-radius: calc(20vw / var(--sp));
		width: calc(340vw / var(--sp));
		padding: calc(55vw / var(--sp)) 0 calc(35vw / var(--sp));
		margin: 0 auto calc(60vw / var(--sp));
	}
	
	#mascot .en_corner p {
		color: var(--green1);
	}
	
	#mascot .wrapper {
		width: 100%;
	}
	
	#mascot .wrapper>.title {
		width: 100%;
	}
	
	#mascot .wrapper>.title h3 {
		color: var(--bw1);
		font-size: calc(30vw / var(--sp));
		line-height: calc(40vw / var(--sp));
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
		margin-bottom: calc(30vw / var(--sp));
	}
	
	#mascot .wrapper .character {
		background: var(--bw6);
		border-radius: calc(10vw / var(--sp));
		width: calc(280vw / var(--sp));
		padding: calc(30vw / var(--sp)) 0;
		margin: 0 auto calc(15vw / var(--sp));
	}
	
	#mascot .wrapper .character ul {
		display: flex;
		justify-content: space-between;
		width: calc(240vw / var(--sp));
		margin: 0 auto;
	}
	
	#mascot .wrapper .character ul li {
		width: calc(109vw / var(--sp));
	}
	
	#mascot .wrapper .character ul li img {
		width: 100%;
		height: calc(140vw / var(--sp));
		margin-bottom: calc(15vw / var(--sp));
	}
	
	#mascot .wrapper .character ul li h4 {
		color: var(--bw1);
		font-size: calc(18vw / var(--sp));
		line-height: 1em;
		font-weight: var(--bold);
		text-align: center;
		width: 100%;
	}
	
	#mascot .wrapper>p {
		color: var(--bw1);
		font-size: calc(16vw / var(--sp));
		line-height: calc(26vw / var(--sp));
		font-weight: var(--regular);
		text-align: left;
		width: calc(280vw / var(--sp));
		margin: 0 auto;
	}
}