@charset "UTF-8";

svg {
  font-size: 1rem;
}

/* トップ写真 */
#top-photo-wrap {
  background-color: #FFF;
}
#top-photo {
  margin: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}
#top-photo-txt {
  display: block;
  text-align: center;
  padding: 10px 0 50px;
  font-family: "myfont3";
  position: relative;
}
#top-photo-txt p {
	font-size: min(5vw, 300%);
	line-height: 1.5;
}
#top-photo-txt p span {
	transition-duration: 1.0s;
	display: inline-block;
}
#top-photo-txt p.popupReady span {
	opacity: 0;
	transform: translateY(0.5em);
}

@media screen and (min-width: 980px) {
 header#header {
	top: 0px;
 }
 header#header::after {
	background-image: url(aiai-images/header-after-home.png);
 }
 #top-photo::after {
  content: "";
  width: 110%;
  height: 160px;
  display: block;
  position: absolute;
  bottom: -100px;
  left: -5%;
  background-color: #FFF;
  z-index: 1;
  border-radius: 50%;
 }
}
@media screen and (max-width: 979px) {
 #top-photo-txt {
	padding: 40px 0;
 }
}
@media screen and (min-width: 640px) {
 #top-photo {
  height: 95vh;
  max-height: 900px;
 }
}
@media screen and (max-width: 639px) {
 #top-photo {
   height: 50vh;
 }
}

.swiper-container {
  width: 100%;
  height: 100%;
  background: #FFF;
}
.swiper-wrapper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}


/* コンテンツ見出し */
h2 {
  text-align: center;
  background: #F4F5F7;
  margin: 0;
  font-size: 360%!important;
  border: none;
}
h2.home-ttl-news  { color: rgb(255, 187,   0); }
h2.home-ttl-intro { color: rgb(  0,  64, 255); }
h2.home-ttl-bosyu { color: rgb(  0,  150, 50); }

h3.subttl {
  margin: 0;
  font-size: 220%!important;
  padding-bottom: 10px;
}


section {
	width: 100%;
	max-width: 100%;
}

.post_box {
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px 0;
}




/* information
------------------------------ */
#home-news {
  background-image: url(aiai-images/home-news-bg.jpg);
  background-size: cover;
  background-position: center;
}
#home-news ul {
  list-style: none!important;
  display: flex;
  gap: 10px;
  justify-content: space-around;
  margin: 0 10px 30px;
  padding-left: 0;/* リスト用の余白リセット */
}
#home-news ul li {
	list-style-type: none!important;
	margin-left: 0;
	margin-bottom: 50px;
}
@media screen and (min-width: 800px) {
 #home-news ul { flex-wrap: nowrap; }
 #home-news ul li { width: 100%; max-width: 360px; }
}
@media screen and (min-width: 800px) and (max-width: 1079px) {
 #home-news ul li:nth-child(4) { display: none; }
}
@media screen and (min-width: 640px) and (max-width: 799px) {
 #home-news ul { flex-wrap: wrap; }
 #home-news ul li { width: 45%; }
}
@media screen and (max-width: 639px) {
 #home-news ul { flex-wrap: wrap; }
 #home-news ul li { width: 90%; max-width: 400px; }
 #home-news ul li:nth-child(4) { display: none; }
}
#home-news ul li a {
  border: 2px solid #999;
  border-radius: 40px;
  transition: all 0.5s;
  background: #FFF;/*rgba(255,255,255,0.4);*/
  display: block;
  padding: 40px 30px;
  text-decoration: none;
  color: #000;
}
#home-news ul li a:hover {
  background: rgba(255, 230, 200, 0.9);
}
#home-news ul li a span {
  display: block;
}
#home-news ul li a span.news {
  font-size: 115%;
  text-align: center;
  line-height: 1.2;
  padding-bottom: 10px;
  font-weight: bold;
  display: inline-block;
  white-space: normal;
}
#home-news ul li img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: auto;
}
#home-news .news-all {
  text-align: right;
  margin-top: 10px;
  margin-right: 50px;
}
#home-news .news-all a {
  text-decoration: none;
  color: #000;
}
#home-news .news-all a:hover {
  color: red;
}


/* introduction
------------------------------ */
#home-introduction {
  background: transparent;
}
#home-introduction::after {/* 固定背景 */
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(aiai-images/home-introduction-bg.jpg);
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.7);
  background-blend-mode: lighten;
  z-index: -1;
}

#home-introduction .img-photo {
  text-align: center;
  margin: 80px auto 0px;
}
#home-introduction .img-photo img {
  max-width: 90%;
  box-shadow: 15px 10px 10px rgba(0, 0, 0, 0.3);
}
#home-introduction p {
  text-align: center;
  padding: 20px 0 80px;
  font-size: 175%;;
}
#home-introduction > .post_box > ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}
#home-introduction > .post_box > ul li {
  width: 30%;
  text-align: center;
  line-height: 3.0;
  list-style-type: none!important;
  margin-left: 0;
}
@media screen and (max-width: 1079px) {
 #home-introduction > .post_box > ul li {
  width: 45%;
 }
}
@media screen and (max-width: 744px) {
 #home-introduction > .post_box > ul li {
  width: 100%;
 }
}
#home-introduction ul li a {
	margin-bottom: 30px;
}
#home-introduction ul li a img {
  max-width: 100%;
  border-radius: 50%;
  box-shadow: 15px 10px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s;
}
#home-introduction ul a:hover img {
  opacity: 0.6;
}
#home-introduction svg.txt-box {
  width: 90%;
  max-width: 480px;
  margin-top: 20px;
  padding: 30px 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 30px;
  border: 3px solid #ACF;
}

.priceless {
  overflow: hidden;
  margin-top: 50px;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,200,0.7) 10%, rgba(255,255,255,0.7) 75%, rgba(255,255,255,0) 100%);
}
.priceless > div {
  font-size: 200%!important;
  margin: 15px auto;
  text-shadow: 2px 2px 0 #FFF, -2px 2px #FFF, 2px -2px #FFF, -2px -2px #FFF,
	 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF;
}
.priceless > div > p {
	font-size: min(9vw, 140%)!important;*/
	line-height: 1.3;
	padding-bottom: 0!important;
}
.priceless div > p > span {
	display: inline-block;
	padding: 0 1.5em;
	text-indent: -0.5em;
	text-align: left!important;
}
.priceless div > p > span > span:first-child {
	font-size: 75%!important;
}
.priceless div ul { padding: 0!important; }
.priceless div ul li {
  margin: 0!important;
  list-style-type: none!important;
}

.priceless div ul li:nth-child(1) a { color: #F50; }
.priceless div ul li:nth-child(2) a { color: #3C7; }
.priceless div ul li:nth-child(3) a { color: #05C; }
.priceless a {
  display: block;
  padding: 0 0.5em;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  font-size: min(8vw, 110%);
}
.priceless a::after {
  content: "";
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition-duration: 1.0s;
  width: 0%;
  background: #FF0;
}
.priceless div ul li a:hover { color: #777; }
.priceless a:hover {}
.priceless a:hover::after {
  width: 100%;
  background: #F90;
}

@media screen and (min-width: 800px) {
 .priceless {
	display: flex;
	justify-content:space-around;
	align-items:center;
 }
 .priceless > div:nth-child(1) {
	width: 40%;
 }
 .priceless > div:nth-child(2) {
	width: 35%;
 }
}
@media screen and (max-width: 799px) {
 .priceless {
   display: block;
   background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,200,0.9) 10%, rgba(255,255,255,0.7) 90%, rgba(255,255,255,0) 100%);
 }
 .priceless > div:nth-child(1) { width: 100%; }
 .priceless > div:nth-child(2) { width: 80%; }
}


/* 募集
------------------------------ */
#home-bosyu {
  background-image: url(aiai-images/home-bosyu-bg.jpg);
  background-size: cover;
  background-position: center;
}
#home-bosyu .post_box {
  display: flex;
  padding: 80px 0 70px;
  justify-content: space-around;
  text-align: center;
  flex-wrap: wrap;
}
#home-bosyu .post_box > div {
  max-width: 90%;
  background: white;
  box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.3);
  border-radius: 80px;
  transition: all 0.5s;
  overflow: hidden;
  margin-bottom: 50px;
}
#home-bosyu .post_box > div:hover {
  transform: translateY(-15px);
  box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.5);
}
#home-bosyu .member {}
#home-bosyu .recruit {}
#home-bosyu .member:hover  { background: rgba(254, 242, 186, 0.789); }
#home-bosyu .recruit:hover { background: rgba(239, 218, 255, 0.647); }

#home-bosyu .post_box > div > a {
  padding: 30px;
  display: block;
  text-decoration: none;
  color: black;
}

#home-bosyu img {
  max-width: 100%;
  border-radius: 40px;
  margin-bottom: 1.0em;
}
#home-bosyu p {
  font-size: 115%;
}