@charset "utf-8";

/*//////////////////// topセクション ////////////////////*/
#top {
  background-image: url(/img/hero.jpg);
  background-position: center;
  background-size: cover;
  min-height: 500px;
  max-height: 600px;
  display: flex;
  align-items: center;
  /* 上下中央 */
}
#top::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
  top: 0;
  left: 0;
}
.top_img {
  width: 100%;
  position: relative;
  /* 「#top::before」とセットで使う */
}
.top_inner {
  z-index: 2;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
  text-shadow:
  5px  5px 7px #745399,
  -5px  5px 7px #745399,
  5px -5px 7px #745399,
  -5px -5px 7px #745399,
  5px  0px 7px #745399,
  0px  5px 7px #745399,
  -5px  0px 7px #745399,
  0px -5px 7px #745399;
}
.top_inner p {
  font-size: clamp(0.75rem, 0.596rem + 0.71vw, 1.125rem);
  font-weight: 500;
  margin-bottom: 10px;
}
.top_inner h1 {
  font-size: 2.625rem;
  font-weight: 700;
  margin-bottom: 30px;
}

.top_hidden_br {
  display: none;
}

@media screen and (max-width: 770px) {
  .top_hidden_br {
    display: block;
  }
}

@media screen and (max-width: 860px) {
  .top_inner h1 {
    font-size: 2.25rem;
  }
}

@media screen and (max-width: 480px) {
  .top_inner h1 {
    font-size: 2rem;
  }
}

/*//////////////////// historyセクション ////////////////////*/
#history {
  margin-bottom: 120px;
}
#history h3 {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}
.column-2 {
  width: 100%;
}
.history-img {
  background-image: url(/img/history.jpg);
  background-position: center;
  background-size: cover;
  height: 300px;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.text {
  line-height: 1.5;
  text-align: center;
}

/*//////////////////// recommendセクション ////////////////////*/
.reco_bn {
  text-align: center;
}

.reco_bn img {
  width: 970px;
  height: auto;
}

@media screen and (max-width: 980px) {
  .reco_bn img {
    width: 90%;
    height: auto;
  }
}


/*//////////////////// listセクション ////////////////////*/
#list {
  margin-bottom: 120px;
}

.list_text {
  text-align: center;
  margin-bottom: 30px;
}

.list_hidden_br {
  display: none;
}

@media screen and (max-width: 980px) {
  .list_hidden_br {
    display: block;
  }
}

@media screen and (max-width: 450px) {
  .list_hidden_br {
    display: none;
  }
}

#list details{
  border-radius: 10px;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

#list summary {
  display: block;
}
#list summary::-webkit-details-marker {
  display: none;
}

.list_summary_content {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  align-items: center;
  height: 80px;
  padding: 0px 20px;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: right;
  text-shadow : 
  3px  3px 3px #ffffff,
  -3px  3px 3px #ffffff,
  3px -3px 3px #ffffff,
  -3px -3px 3px #ffffff,
  3px  0px 3px #ffffff,
  0px  3px 3px #ffffff,
  -3px  0px 3px #ffffff,
  0px -3px 3px #ffffff;
}

@media screen and (max-width: 770px) {
  .list_summary_content {
    height: 50px;}
}

#list h3 {
  font-size: 1.4rem;
  font-weight: 700;
  padding-left: 20px;
}

@media screen and (max-width: 770px) {
  #list h3 {
    font-size: 1.2rem;
    font-weight: 700;
    padding-left: 10px;
  }
}

.list_details_content {
  padding: 25px;
  align-items: center;
  margin: 0;
}

.list_details_content_link{
  display: flex;
  flex-wrap: wrap;
}

.list_details_content_link p {
  padding-right: 30px;
}

.list_details_content_link span {
  font-size: 0.75rem;
}

.list_details_content_link a {
  color: #000000;
  text-decoration: none;
  transition: 0.3s;
}

.list_details_content_link :hover a {
  transition: 0.3s;
  opacity: 0.5;
}

@media screen and (max-width: 770px) {
  .list_details_content_link p {
    width: 210px;
    font-size: 1.125rem;
    padding-right: 0;
  }
}

/* アコーディオンオープン・アニメーション */
#list details[open] .list_summary_content {
  border-radius: 10px 10px 0px 0px;
  border-bottom: none;

}
#list details[open] .list_details_content {
  border: 1px solid #dddddd;
  border-radius: 0px 0px 10px 10px;
}

.toggle_button_color {
  width: 28px;
  height: 28px;
  border-radius: 15px;
  background-color: #FFFFFF;
  border: 1px solid #cccccc;
  margin: 0;
  position: relative;
  margin-left: 8px;

}

/* 三角ボタン */
.toggle_button {
  display: block;
  position: relative;
  width: 20px;
  flex-shrink: 0;
  transform-origin: center 45%;
  transition: transform 0.5s;
  top: 12px;
  left: 4px;
}

.toggle_button::before,
.toggle_button::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 3px;
  background-color: #745399;
}
.toggle_button::before {
  left: 0;
  transform: rotate(-45deg);
}
.toggle_button::after {
  right: 0;
  transform: rotate(45deg);
}
/* 三角ボタン切り替え */
#list details[open] .toggle_button {
  transform: rotate(180deg);
  top: 16px;
}

/* カテゴリー名 背景画像 */
.list_summary_bg_img01 {
  background-image: url(/img/icon_01.jpg);
  background-size: auto 80px;
}
.list_summary_bg_img02 {
  background-image: url(/img/icon_02.jpg);
  background-size: auto 80px;
}
.list_summary_bg_img03 {
  background-image: url(/img/icon_03.jpg);
  background-size: auto 80px;
}

.list_summary_bg_img04 {
  background-image: url(/img/icon_04.jpg);
  background-size: auto 80px;
}

.list_summary_bg_img05 {
  background-image: url(/img/icon_05.jpg);
  background-size: auto 80px;
}

.list_summary_bg_img06 {
  background-image: url(/img/icon_06.jpg);
  background-size: auto 80px;
}

@media screen and (max-width: 770px) {
  .list_summary_bg_img01,
  .list_summary_bg_img02,
  .list_summary_bg_img03,
  .list_summary_bg_img04,
  .list_summary_bg_img05 {
    background-size: auto 50px;
  }
}

/*//////////////////// accessセクション ////////////////////*/
#access {
  margin-bottom: 120px;
}

#access dl {
  width: 100%;
  margin-left: auto;
  margin-bottom: 20px;
}
#access dt {
  font-size: 1.125rem;
  width: 20%;
  padding: 30px 0;
  font-weight: 700;
  text-align: right;
  margin: auto;
}
#access dd {
  font-size: 1.125rem;
  width: 80%;
  margin-left: auto;
  padding: 30px 0;
  padding-left: 40px;
  text-align: left;
  margin: auto;
}

@media screen and (max-width: 770px) {
  #access dt,
  #access dd {
    font-size: 1rem;
  }
}

@media screen and (max-width: 420px) {
  #access dt,
  #access dd {
    font-size: 0.875rem;
  }
}

.dt_dd_line {
  width: 100%;
  display: flex;
  border-bottom: solid 1px #eeeeee;
}

#access iframe {
  width: 100%;
  height: 500px;
}

#access p {
  margin: 0 0 20px;
}

.icon_link {
  width: auto;
  height: 16px;
  padding-bottom: 2px;
}

#access a {
  color: #000000;
  text-decoration: none;
  transition: 0.3s;
}

#access :hover a {
  transition: 0.3s;
  opacity: 0.5;
}

/*//////////////////// recruitセクション ////////////////////*/
#recruit {
  margin-bottom: 120px;
}
#recruit p {
  margin: 50px 0;
  text-align: center;
  font-size: 1.2rem;
}
.recruit_img {
  background-image: url(../img/recruit.jpg);
  background-position: top;
  background-size: cover;
  border-radius: 10px;
  height: 200px;
  display: flex;
  align-items: center;
  /* 上下中央 */
  margin-bottom: 60px;
  width: 100%;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.recruit_inner {
  z-index: 2;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
}
#recruit p {
  font-size: 1.125rem;
}
.recruit_inner h1 {
  font-size: 2.265rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-shadow:
  1px  1px 6px rgba(116, 83, 153, 0.47),
  -1px  1px 6px rgba(116, 83, 153, 0.47),
  1px -1px 6px rgba(116, 83, 153, 0.47),
  -1px -1px 6px rgba(116, 83, 153, 0.47),
  1px  0px 6px rgba(116, 83, 153, 0.47),
  0px  1px 6px rgba(116, 83, 153, 0.47),
  -1px  0px 6px rgba(116, 83, 153, 0.47),
  0px -1px 6px rgba(116, 83, 153, 0.47); 
}

.recruit-button {
  margin-top: 0px;
  width: 100%;
  height: 60px;
  border-radius: 30px;
  border: 1px solid #A68FC1;
  background-color: #A68FC1;
  color: #FFFFFF;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  text-decoration: none;
}
.recruit-button:hover {
  border: 1px solid #A68FC1;
  background-color: #FFFFFF;
  color: #A68FC1;
  transition: 0.3s;
}

/* リクルート h1改行・文字サイズ設定 */
.recruit_hidden_br{
  display: none;
}

@media screen and (max-width: 770px) {
  .recruit_hidden_br {
    display: block;
  }
}

@media screen and (max-width: 950px) {
  .recruit_inner h1 {
    font-size: 1.8rem;
  }
}

/* リクルート p文字サイズ設定 */
@media screen and (max-width: 770px) {
  #recruit p {
    text-align: left;
    font-size: 1rem;
  }

  .recruit_hidden_br_p {
    display: none;
  }
}

@media screen and (max-width: 390px) {
  #recruit p {
    font-size: 0.875rem;
  }
}