@charset "utf-8";

/* css Document
*****************************************************************/
@import "_variable.css";

/* 全ページ共通 スタイル
*****************************************************************/

.pconly{
  @media (width < 896px) {
    display: none;
  }
}
.sponly{
  display: none;
  @media (width < 896px) {
    display: block;
  }
}
.portraitonly{
  display: none;
  @media (width < 480px) {
    display: block;
  }
}
.portraitnone{
  @media (width < 480px) {
    display: none;
  }
}
.tabonly{
  display: none;
  @media (width < 1025px){
    display: block;
  }
}
.tabnone{
  @media (width < 1025px){
    display: none;
  }
}

.contents{
  overflow: hidden;
  padding: 80px 0;
  @media (width < 896px){
    padding: 50px 0;
  }
}

.mt10{
	margin-top: 10px!important;
}
.mt15{
	margin-top: 15px!important;
}
.mt20{
	margin-top: 20px!important;
}
.mt30{
  margin-top: 30px!important;
}

.pb80 {
  padding-bottom: 6vw;
  @media (width < 896px){
    padding-bottom: 50px;
  }
}

small {
  font-size:80%;
}

.span_br{
	display: inline-block;
}

.fitimg{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* common
*****************************************************************/

.w_1240 {
  max-width: 1240px;
  margin: auto;
  width: calc(100% - 40px);
  container-type: inline-size;
}

.w_1170 {
  max-width: 1170px;
  margin: auto;
  width: calc(100% - 40px);
  container-type: inline-size;
}

.wrapper1240 { 
  max-width: 1240px;
  margin: 2% auto;
  width: 90%;
  text-align:left;
  font-size:16px;
  container-type: inline-size;
  img {
    max-width:100%;
  }
}

.wrapper1600 { 
  max-width: 1600px;
  margin: 2% auto;
  width: 90%;
  text-align:left;
  font-size:16px;
  container-type: inline-size;
  img {
    max-width:100%;
  }
}

.wrapper1180 { 
  max-width: 1180px;
  margin: 2% auto;
  width: 90%;
  text-align:left;
  font-size:16px;
  container-type: inline-size;
}

.width {
  display:block;
}

.pink {
  color: var(--pink);
}

.linkbtn-area {
  padding-top:40px;
  padding-bottom:30px;
  background-image: linear-gradient(to top, #FFEE71 0%, #FEDC5E 100%);
  .buttonArea {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin:0 auto;
    &::after, &::before {
      display: block;
      content:"";
      width: calc(100% / 4);
      @media (width < 896px) {
        width: calc(100% / 2);
      }
    }
    &::before {
      order: 1;
    }
    li {
      width: calc(100% / 4 - 20px);
      background-color:#fff;
      margin:0 10px 20px 10px;
      position:relative;
      transition: .5s;
      @media (width < 1025px) {
        width: calc(100% / 2 - 20px);
      }
      @media (width < 600px) {
        width: 100%;
        margin:0 auto 20px;
      }
      &:hover {
        background-color:var(--point_c);
      }
      a {
        display:block;
        color: var(--point02);
        text-decoration: none;
        padding:20px 10px;
        text-align:center;
        font-size:1.2rem;
        font-weight: 500;
        @media (width < 1025px) {
          font-size:1.1rem;
        }
        &:hover {
          color:#fff;
        }
      }
      &.soon{
        pointer-events: none;
        a {
          color: #AFAFAF;
        }
      }
    }
  }
}
.info-area {
  .topmsg {
    margin-bottom:40px;
    span {
      font-size:90%;
    }
  }
}

.title-area {
  background: linear-gradient(to right, 
  #84C5B1 0%, 
  #C5E1D7 52%, 
  #E3D54F 74%, 
  #E8D336 100%
);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  @media (width < 896px) {
    height: 120px;
  }
  .page-ttl {
    color: var(--font_c);
    text-align: center;
    font-size: 2.4rem;
    position: relative;
    font-weight: 400;
    letter-spacing: 0.1em;
    font-family: var(--font-min);
    span {
      font-size:40%;
      display:block;
    }
    @media (width < 896px) {
      font-size: 2rem;
    }
    @media (width < 480px) {
      font-size: 1.8rem;
    }
  }
}

#pankuzu {
  margin: 30px 0;
  .wrapper {
    max-width: 1240px;
    margin:0 auto;
  }
  .pankuzu-list {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    li {
      font-size: 0.9rem;
      color: #333;
      list-style: none;
      margin: 0 5px;
      a {
        color: var(--point_c);
        position: relative;
        &::before {
          position: absolute;
          content: "";
          border-bottom: 1px solid var(--point_c);
          bottom: 0;
          width: 100%;
          transition: all 0.5s ease-out;
        }
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}

.nextArea {
  margin: 30px 0 80px;
  text-align: center;
  @media (width < 896px) {
    margin: 20px 0 40px;
  }
  .wrapper1240 {
    text-align:center;
  }
  .next_btn {
    background-color:var(--point_c2);
    display: inline-block;
    text-align:center;
    transition: 0.2s;
    margin:0 auto;
    padding:5px 15px 15px;
    text-decoration: none;
    min-width:380px;
    @media (width < 896px) {
      min-width:300px;
    }
    p {
      color: var(--point02);
      text-decoration: none;
      text-align:center;
      font-size:2rem;
      font-family: var(--font-min);
      span {
        font-size:0.9rem;
        display:block;
      }
    }
    &:hover {
      background-color:#B1F476;
      transition: 0.2s;
      text-decoration: none;
    }
  }
  .next_btn2 {
    background-color: var(--main_c);
    display: inline-block;
    text-align:center;
    transition: 0.2s;
    margin:0 auto;
    padding:5px 15px 15px;
    text-decoration: none;
    min-width:380px;
    @media (width < 896px) {
      min-width:300px;
    }
    p {
      color: var(--font_c);
      text-decoration: none;
      text-align:center;
      font-size:0.9rem;
      line-height:1.5;
      margin:6px auto 0;
      font-family: var(--font-min);
      span {
        font-size:2rem;
        display:block;
      }
    }
    &:hover {
      background-color:#B1F476;
      transition: 0.2s;
      text-decoration: none;
    }
  }
}

.scrolldown {
  position: relative;
  width: 100%;
  height: 60px;
  &::before {
    animation: scroll 2s infinite;
    background-color: var(--point02);
    bottom: 25px;
    content: "";
    height: 50px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
  }
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
}

#back_toppage {
  margin:20px auto;
  text-align:center;
  a {
    display:block;
    margin:0 auto;
    text-decoration: none;
    max-width:280px;
    padding:20px 15px;
    color: #000;
    background: #fff;
    border: 1px solid #555;
    letter-spacing: 0.05em;
    transition: .5s;
    &:hover {
      background:var(--main_c);
    }
  }
}

#t_article {
  margin: auto;
}