@charset "UTF-8";/* CSS変数の宣言 */
/* テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */

.img-visible > .intro-container > .intro-txt{
  width:60%;
  padding-right:2rem;
}
.img-visible > .intro-container > .intro-img{
  width:40%;
  max-width:100%;
  min-width:150px;
  padding: 2rem 1rem;
  padding-left:1rem;
}

@media (max-width:999px) {
  .img-visible > .intro-container > .intro-txt{
    width:60%;
    padding-right:1rem;
  }
  .img-visible > .intro-container > .intro-img{
    width:40%;
  }
}

@media (max-width:775px) {
  #intro{
    display:block;
  }
  .img-visible > .intro-container > .intro-txt{
    width:100%;
    padding-right:0;
  }
  .img-visible > .intro-container > .intro-img{
    width:100%;
    max-width:350px;
    min-width:150px;
    padding: 1rem 1rem;
    margin:0 auto;
  }
}

#cont1 h3::first-letter {
  font-size: 1.8em;
  color: var(--accentColor);
}

.list-design5.column5 li a{
  margin: 0;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 5%;
}

#cont1 {
  margin-bottom: 0;
  padding-bottom: 0;
}

#cont2 {
  margin-top: 0;
}
/*
.intro-study {
  position: relative;
  display: block;
  font-size: 1.8em;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
  text-decoration: none;
  margin-top: 2%;
  text-align: center;
}

.intro-study::after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 30px 30px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  transition: .3s;
}

.intro-study:hover::after {
  border-width: 0 0 50px 50px;
}

*/

.intro-study {
  position: relative;
  display: block;
  font-size: 1.8em;
  padding: 0.2em 0.5em;
  margin-top: 2%;
  background: #dfefff;
  text-decoration: none;
  border: dashed 2px white;
  box-shadow: 0px 0px 0px 5px #dfefff;
  text-align: center;
  border-radius: 0.3em;
}

.intro-study::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  left: -9px;
  top: -9px;
  background: linear-gradient(135deg,
    #fff 0%, #fff 50%, #a2c7ec 50%, #a8d4ff 60%);
  box-shadow: 0.1em 0.1em 0.1em #0000004d;
  transition: width 0.3s, height 0.3s;
  border-radius: 0.3em;
}

.intro-study:hover::before {
  width: 1.5em;
  height: 1.5em;
}

.intro-study:active {
  box-shadow: 0.2em 0.2em 0.3em #0000004d;
  transform: translate(0.1em, 0.1em);
}

.intro-study span:first-child {
  position: relative;
  letter-spacing: 0.1em;
}

.intro-study span:first-child::after {
  position: absolute;
  content: "";
  width: 3em;
  height: 3em;
  top: -1em;
  left: -3.2em;
  background: url(../images/viewbo.webp);
  background-size: cover;
}

.intro-study span.circle {
  background-color: #4d9bc1;
  color: #fff;
  margin: 0 0.03em;
  display: inline-block;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.7;
  border-radius: 9999px;
}

@media screen and (max-width: 1062px) {
  .intro-study {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 910px) {
  .intro-study {
    font-size: 1.3em;
  }

@media screen and (max-width: 550px) {
  .intro-study {
    font-size: 1.1em;
  }

@media screen and (max-width: 470px) {
  .intro-study {
    font-size: 0.8em;
  }