﻿@charset "utf-8";
.main > h1 {
  z-index: 10;
  position: absolute;
  max-width: 150rem;
  width: 96%;
  left: 50%;
  margin: auto;
  top: 35%;
  transform: translateX(-50%);
  font-family: 'Urbanist';
  color: var(--color--white);
  text-shadow: 0px 0px 4px #4c4c4c;
  /*  line-height: 5rem;*/
}
.main {
  position: relative;
}
.main > h1 span:first-child {
  font-size: 6rem;
  font-weight: bold;
  display: block;
  margin-bottom: .25em
}
.main > h1 span:last-child {
  font-size: 2.2rem;
  background-color: rgb(23 23 23 / 60%);
  padding: .2em .5em;
  line-height: 1.8;
}
.slick li {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 50rem;
  max-height: 120rem;
  background-position: center;
  height: calc(100vh - 160px);
}
.slick .bg-1 {
  background-image: url("../images/slide1.jpg");
}
.slick .bg-2 {
  background-image: url("../images/slide2.jpg");
}
.slick .bg-3 {
  background-image: url("../images/slide3.jpg");
}
.slick .bg-1::after,
.slick .bg-2::after {
	content: '©Osaka Convention & Tourism Bureau';
	position: absolute;
	bottom: 120px;
	right: 2em;
	padding: 0 .5em;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 4px black;
}
.external .color {
  background-image: linear-gradient(90deg, #c0e3eb, #d4daf8);
  padding: 2.5em;
  border-radius: 1rem;
}
.external .small_banner {
  display: flex;
  justify-content: center;
  padding: 2.5em;
}
.external .color > ul {
  display: flex;
  justify-content: center;
	max-width: 100rem;
	margin: auto;
}
.external .color > ul > li {
  margin-right: 1.25em;
}
.external .color > ul > li:last-child {
  margin: 0;
}
.external .color a {
  border: solid 1px var(--color--gray);
	display: block;
	overflow: hidden;
}
.external .color a:hover {
  border: solid 1px var(--color--blue);
}
.external .color img {
	opacity: 1;
}
.external .small_banner > a {
  margin-right: 1.8em;
	height: 40px;
	width: 46px;
	display: inline-block;
}
.external .small_banner > a:last-child {
  margin: 0;
	width: 53px;
}
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓SP↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
@media only screen and (max-width: 768px) {
	.main > h1 {
		text-align: center;
	}
  .main > h1 span:first-child {
    font-size: 3.6rem;
    line-height: 4.2rem;
  }
  .main > h1 span:last-child {
    font-size: 1.6rem;
  }
  .slick li {
    height: auto;
    min-height: 80vh;
  }
.slick .bg-1 {
  background-image: url("../images/slide1_sp.jpg");
}
.slick .bg-2 {
  background-image: url("../images/slide2_sp.jpg");
}
.slick .bg-3 {
  background-image: url("../images/slide3_sp.jpg");
}
.slick .bg-1::after,
.slick .bg-3::after {
	bottom: 100px;
	right: 1em;
	}
}
@media only screen and (max-width: 959px) {
  .external .color {
    padding: 4vw 2.5vw 2.6vw 2.5vw;
  }
  .external .color > ul {
    flex-wrap: wrap;
    justify-content: center;
		max-width: 60rem;
  }
  .external .color > ul > li {
    margin-right: 4%;
    margin-bottom: 1.4vw;
    flex-basis: 48%;
    max-width: 23rem;
  }
  .external .color > ul > li:nth-of-type(even) {
    margin-right: 0;
  }
}

/* about/index.html */
/* =================================================================================== */
.list-about {
  justify-content: flex-start !important;
}
.list-about li {
  border: 1px solid var(--color--gray);
  text-align: center;
  min-width: 8em;
  width: 20%;
  margin-left: -1px;
  margin-top: -1px;
  padding: 1em;
}
@media only screen and (max-width: 768px) {
.list-about li {
  min-width: inherit;
  width: 25%;
  }
}

/* /about/expand.html　矢印周りのCSS*/
/* =================================================================================== */
.expand_box {
  max-width: 1200px;
  margin: 2em auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.expand_box > section:first-child:before, .expand_box > section:nth-child(2):before, .expand_box > section:nth-child(2):after {
  content: "";
  width: 5em;
  height: 3.5em;
  background: var(--color--blue);
  clip-path: polygon(0 63.2%, 31% 63.2%, 31% 0, 69% 0, 69% 63.2%, 100% 63.2%, 50% 100%);
  position: absolute;
}
.expand_box > section:first-child:before {
  content: "";
  bottom: -4em;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.expand_box > section:nth-child(2):before {
  content: "";
  left: 3em;
  bottom: -4em;
}
.expand_box > section:nth-child(2):after {
  content: "";
  right: 3em;
  bottom: -4em;
}
.expand_box section {
  border: .5em solid var(--color--lightparple);
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 480px;
}
.expand_box div > section:first-child {
  margin-right: 1em;
}
.expand_box div > section:last-child {
  margin-left: 1em;
}
.expand_box .heading-2 {
  background: var(--color--lightparple);
  text-align: center;
  padding: .25em .25em .5em .25em;
  margin-bottom: 0;
}
.expand_box .heading-2 span {
  display: block;
  font-weight: normal;
  font-size: 1.6rem;
}
.expand_box div:last-child p {
  padding: .75em;
}

/* /about/interview.html　矢印周りのCSS*/
/* =================================================================================== */
.about-interview {
  background: var(--color--lightparple);
  padding: 2em;
  margin-top: 2em;
}
.about-interview:nth-child(odd) {
  background: var(--color--lightblue);
}
.about-interview figcaption {
  background: var(--color--white);
  padding: .5em .25em;
}
@media only screen and (max-width: 768px) {
  .about-interview {
    padding: 1em;
  }
.about-interview figure {
  margin: 0 auto 1em;
  max-width: 400px;
  }
}

/* /setup/index.html　*/
/* =================================================================================== */
.setup-flow {
  margin: 4em auto 7.5em !important;
}
.setup-flow h2 {
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.3;
  background: var(--color--parple);
  color: var(--color--white);
}

.setup-flow h2.w-max {
	width: 100% !important;
	align-items: flex-start !important;
}


.setup-flow h2 span {
  color: var(--color--parple);
  background: var(--color--white);
  font-size: .5em;
  padding: .25em .5em;
  margin-bottom: .5em;
}



.setup-flow h3 {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: .5em;
}
.setup-flow > section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4em;
  position: relative;
}
.setup-flow > section:not(:last-child)::after {
  content: '';
  width: 5em;
  height: 3.5em;
  background: var(--color--parple);
  clip-path: polygon(0 50%, 31% 50%, 31% 0, 69% 0, 69% 50%, 100% 50%, 50% 100%);
  position: absolute;
  bottom: -3.5em;
  left: calc(20rem - 2.5em);
}
.setup-flow > section > * {
  padding: 2.4rem;
}
.setup-flow > section > *:nth-child(1) {
  width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
}
.setup-flow > section > *:nth-child(2) {
  width: calc(100% - 40rem);
  background: var(--color--lightparple);
}
.setup-flow > section > *:nth-child(4) {
  width: calc(((100% - 32rem) / 10) * 3.6);
  background: var(--color--lightblue);
}
.setup-flow > section > *:nth-child(3) {
  background: var(--color--lightgray);
  width: calc(((100% - 32rem - 4px) / 10) * 2.8);
  margin: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.setup-flow a.common {
  padding: 1em 1em;
  min-width: inherit;
}
.setup-file {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.setup-file > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22%;
  margin-top: 3em;
}
.setup-file > *:not(:nth-child(4n)) {
  margin-right: 3%;
}
@media only screen and (max-width: 959px) {
  .setup-flow .pc-only {
    display: none !important;
  }
.setup-flow h2 {
  font-size: 2.2rem;
  }
.setup-flow h3 {
  font-size: 1.8rem;
  }
  .setup-flow > section {
    display: block;
    max-width: 480px;
    margin: 0 auto 4em;
  }
  .setup-flow > section > * {
    width: 100% !important;
    padding: 1.2rem;
  }
.setup-flow > section:not(:last-child)::after {
  left: calc(50% - 2.5em);
  margin-right: 0;
  background: var(--color--blue);
  }
.setup-flow > section > *:nth-child(3) {
  margin: 2px 0;
  }
  .setup-file {
    justify-content: space-between;
  }
.setup-file > * {
  width: 48%;
/*  max-width: inherit !important;*/
  }
.setup-file > *:not(:nth-child(4n)) {
  margin-right: 0;
}
}
@media only screen and (max-width: 768px) {
.setup-file > * {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto !important;
  }
}

/* /profile/index.html */
/* =================================================================================== */
.profile01 .wrap-row > * {
  display: flex;
  flex-direction: column;
}
.profile01 .wrap-row > * figure {
 margin: auto;
}
.profile02 .wrap-row {
  flex-direction: row-reverse;
}
@media only screen and (max-width: 768px) {
.profile02 .wrap-row {
  flex-direction: column-reverse;
}
  .profile02 .wrap-row > *:first-child {
    margin-top: 1.5em;
    margin-bottom: 0;
  }
}

/* /profile/beyond.html */
/* =================================================================================== */
.icon-flag {
	display: flex;
	vertical-align: middle;
}
.icon-flag > *:first-child {
	border: 1px solid #ccc;
	width: 30px;
	height: 20px;
	margin-right: 10px;
}
.icon-flag > *:last-child {
	width: calc(100% - 40px);
}

/* /profile/expo.html */
/* =================================================================================== */
.profile-expo02 > * {
  width: 32%;
  margin-top: 2em;
}
.profile-expo02 a p {
  background: var(--color--blue);
  color: var(--color--white);
  margin-bottom: 0;
  padding: .5em;
  font-size: 2rem;
}
.profile-expo02 a:hover p {
  background: var(--color--parple);
}
.profile-expo02 a,
.profile-expo02 a:hover {
  text-decoration: none;
}
.profile-expo02 a figcaption {
  color: var(--color--black);
}
@media only screen and (max-width: 768px) {
.profile-expo02 > * {
  width: 100%;
  margin: 2em auto 0;
  max-width: 400px;
}
}


/* /partner/*/
/* =================================================================================== */
.list-partner-index {
	margin-bottom: -1.5em;
}
.list-partner-index > li {
	margin-top: -1px;
	font-weight: bold;
	margin-bottom: 1.5em;
}
.list-partner-index > li a {
	border: 1px solid var(--color--blue);
	display: flex;
	justify-content: center;
	padding: 1em .5em;
	align-items: center;
	text-decoration: none;
	height: 100%;
}
.list-partner-index > li a:hover {
	color:  var(--color--white);
	background:  var(--color--blue);
}
.list-partner {
	margin-bottom: -1.5em;
}
.list-partner > li {
	border-left: 3px solid var(--color--gray);
	margin-top: -1px;
	font-weight: bold;
	display: flex;
	margin-bottom: 1.5em;
	align-items: center;
}
.list-partner > li a {
	display: block;
	padding: 0 .5em 0 .75em;
}
	
/* /studies/index.html */
/* =================================================================================== */
.wrap-studies-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2em;
	border: solid 1px var(--color--gray);
	width: 19%;
}
.wrap-studies-logo img {
	width: 100%;
	max-width: 220px;
}
@media only screen and (max-width: 768px) {
.wrap-studies-logo {
	width: 100%;
	padding: 1em;
	margin-bottom: 1.5em !important;
	}
}

/* /sitemap/index.html */
/* =================================================================================== */
.list-sitemap {
	max-width: 100rem !important;
	flex-wrap: wrap;
	margin-bottom: 5.5em !important;
}
.list-sitemap > li {
	width: 48%;
	font-size: 2rem;
	margin-bottom: 2em !important;
}
.list-sitemap > li > ul {
	margin-top: .75em;
	font-size: initial;
}
@media only screen and (max-width: 768px) {
.list-sitemap > li {
	width: 100%;
	}
}
	
	


