@charset "UTF-8";
:root {
  --main-color: #264a64;
  --sub-color: #00afec;
  --bg-color: #fff;
}
body {
  color: #333;
}
#wrapper {
  max-width: 100%;
  background-color: var(--bg-color);
}
#content {
  padding: 0;
    #pagetitle {
        font-size: 2rem;
        font-weight: bold;
    }
}
.forminator-ui.forminator-design--default .forminator-label {
    font-size: 1.2rem!important;
}
.inner {
  max-width: 1400px;
  margin: 0 auto;
}
.indent {
  text-indent: -1em;
  padding-left: 1em;
}
p.entry {
  padding: 30px;
  & a {
    display: block;
    width: 80%;
    margin: 30px auto;
    padding: 20px;
    text-align: center;
    background-color: #f00;
    color: #fff;
    font-size: 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    &:hover {
      transform: translateY(-5px);
      transform: scale(1.05);
    }
  }
}
main {
  position: relative;
  z-index: 7;
  .mainimage {
    gap: 10px;
    .bt {
      transition: all 0.3s ease;
      &:hover {
        transform: translateY(-5px);
        transform: scale(1.05);
      }
    }
  }
  .topics {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 50px 10px;
    margin: 50px 0;
    h3 {
      border-bottom: 2px solid #000;
      width: fit-content;
      margin: 0 auto;
      font-size: 1.5rem;
      padding: 0px 20px;
      margin-bottom: 20px;
    }
    .inner {
      max-height: 200px;
      overflow-y: auto;
      .topi_grid {
        border-top: solid 1px #ccc;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px 0 17px;
        display: grid;
        grid-template-columns: auto 10em;
        font-size: 1rem;
        & a {
          color: #333;
        }
      }
      .topi_grid:nth-of-type(1) {
        border: none;
      }
    }
  }
  section {
    padding: 30px;
    & h2 {
      color: var(--main-color);
      font-size: 2rem;
      border-bottom: solid 1px #ccc;
      margin-bottom: 10px;
    }
    & ul {
      margin: 20px 0;
      & li {
        padding-left: 1em;
        font-size: 1.2rem;
      }
    }
    & figure {
      margin-top: 20px;
    }
    .date {
      font-size: 2rem;
    }
    .pdf a {
      background-color: var(--main-color);
      color: #fff;
      padding: 10px 20px 7px;
      border-radius: 10px;
      display: inline-block;
      margin-top: 10px;
      & i {
        margin-right: 10px;
      }
    }
    &.event {
      & h2 {
        border: none;
      }
    }
  }
}
.eventnote {
    margin-top: 30px;
    text-align: center;
    margin-bottom: -40px;
    & span {
        display: inline-block;
    }
}
.forminator-ui {
  max-width: 800px;
  margin: 0 auto !important;
  padding: 30px !important;
}
header.top {
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--bg-color);
  padding-bottom: 30px;
  & h1 {
    padding: 0;
    margin:  0;
  }
  .sakai_logo {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 120px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
  }
  #mainnav {
    & ul {
      justify-content: flex-end;
      & li {
        border: none;
        flex: initial;
        & a {
          background-color: transparent;
          color: #333;
        }
      }
    }
  }
}
.cont.flex {
    gap: 20px;
    font-size: 1.3rem;
    & div {
        flex: 0 1 50%;
        padding: 10px;
    }
}
.profile {
    font-size: 1.2rem;
}
.event_block {
    flex: 0 1 50%;
border: solid 10px #45b035;
    border-radius: 20px;
    margin: 30px;
    padding: 30px;
    max-width: 1400px;
    & h2 {
        background-color: #45b035;
        text-align: center;
        color: #fff;
        font-size: 2rem;
        border-radius: 50px;
        padding: 7px 10px 0px;
        font-weight: bold;
        
    }
    .ico {
        text-align: center;
        max-width: 250px;
        margin: 0 auto;
    }   
    .taiken {
        flex: 0 1 55%;
    }
    .tokuten {
        flex: 0 1 45%;
        margin: 40px 0 20px;
    }
    .eventlist {
        margin-top: 20px;
        & h3 {
            color: #333;
            font-weight: bold;
            font-size: 1.8rem;
            & i {
                color: #45b035;
                margin-right: 10px;
            }
            
           /* &::after {
                content: "▼";
                margin-left: 10px;
                transform:rotate(-90deg); 
                display: inline-block;
                transition: all 300ms 0s ease;
                position: relative;
                top: -1px;
                color: #ff0;
            }
            &.active::after {
                transform:rotate(0deg); color: #fff;
            }*/
            & span {
                margin-left: 1em;
                font-size: 1.2rem;
                color: #fff;
               
            }
            &.active {
                & i {
                    color: #f60;
                }
            }
        }
        
        & div.flex {
            
            background-color: #fff;
            padding: 10px;
            border-radius: 10px;
            gap: 20px;
            margin-bottom: 20px;
            & figure {
                flex: 0 1 400px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            & p {
                font-size: 1.2rem;
                margin-bottom: 10px;
            }
            & table {
                font-size: 0.9rem;
                margin: 10px 0;
                width: 90%;
                & thead {
                    & tr {
                        background-color: #31b698;
                        color: #fff;
                    }
                }
            }
            & dl {
                display: grid;
                grid-template-columns: 7em 1fr;
                font-size: 1.2rem;
                & dt {
                    font-weight: bold;
                } 
            }
            & section {
                flex: 0 1 600px;
                & h4 {
                    font-weight: bold;
                    font-size: 1.2rem;
                    border-bottom: solid 1px #ccc;
                    margin-bottom: 10px;
                }
            }
        }
        
    }
}
.soudan {
    flex: 0 1 50%;
   border: solid 10px #ed6d1f;
       margin: 30px;
    border-radius: 20px;
    padding: 30px;
     & h2 {
        background-color: #ed6d1f;
        text-align: center;
        color: #fff;
        font-size: 2rem;
        border-radius: 50px;
        padding: 7px 10px 0px;
        font-weight: bold;
        
    }
    .ico {
        text-align: center;
        max-width: 250px;
        margin: 0 auto;
    }
    .catch {
        font-size: 1.7rem;
        color: #333;
        margin-top: 1rem;
    }
    & h3 {
        font-size: 1.5rem;
        
        color: #ed6d1f;
        text-align: center;
        margin: 20px 10px -40px;
    }
    .entry {
        & a {
            margin-bottom: 0px;
        }
    }
    .small {
        text-align: center;
    }
}
.floamap {
    padding: 30px 10px;
    & h3 {
        background-color: #00B31A;
        text-align: center;
        color: #fff;
        font-size: 2rem;
        border-radius: 50px;
        padding: 7px 10px 0px;
        font-weight: bold;
    }
}
.page_footer {
  background-color: #fff;
  padding: 50px 0;
  & figure {
    padding: 0 50px;
  }
}
.slidein, .slidein2 {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.0s;
  &.slidein-left {
    transform: translate(-100%, 0);
  }
  &.slidein-right {
    transform: translate(100%, 0);
  }
  &.slidein-up {
    transform: translate(0, -100%);
  }
  &.slidein-bottom {
    transform: translate(0, 50%);
  }
  &.scrollin {
    transform: translate(0, 0) !important;
    opacity: 1 !important;
  }
}


.fixed-button {
  position: fixed;
  top: 80px;
  right: 0px;
  background-color: #28a745;
  color: white;
  border: none;
  padding: 15px 10px;
  font-size: 16px;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
  z-index: 50;
  font-size: 1.2rem;
  writing-mode: vertical-rl; /* 縦書きの設定 */
  text-orientation: upright; /* 文字の方向を直立に */
  letter-spacing: 2px;
}
.fixed-button.contact {
  top: 220px;
  background-color: #f90;
}
.fixed-button:hover {
  background-color: #218838;
  text-decoration: none;
}
.fixed-button.contact:hover {
  background-color: #c70;
  text-decoration: none;
}
#confirmation {
  border: solid 1px #ccc;
  background-color: #fff;
  margin: 5px;
  padding: 10px;
  height: 200px;
  overflow-y: auto;
  & dl {
    margin-top: 10px;
    & dd {
      margin-bottom: 0.5em;
      padding-left: 1em;
    }
  }
}
#content.topics.flex {
  padding: 10px;
  gap: 20px;
  #mainbox {
    flex: 0 1 1000px;
    & article.post {
      margin-bottom: 20px;
      & h1 {
        font-size: 2rem;
        border-bottom: solid 1px #999;
      }
      .newsdate {
        text-align: right;
        margin-bottom: 10px;
      }
    }
  }
  #subbox {
    flex: 0 1 400px;
    .wp-block-group {
      border: solid 1px #999;
      border-radius: 10px;
      padding: 20px;
      & h2 {
        font-size: 1.5rem;
        border-bottom: dotted 1px #999;
        margin-bottom: 10px;
      }
    }
  }
}
.privacy {
  & h3 {
    font-size: 1.5rem;
    margin: 30px 0 10px;
  }
  & p {
    margin: 10px;
  }
  & ul {
    margin: 20px;
  }
}
div.catch {
  display: grid;
  grid-template-columns: 45% auto;
  gap: 20px;
  & figure.text1 {
    grid-column: 1/2;
    grid-row: 1/3;
  }
  & figure.illust {
    grid-column: 2/3;
  }
  & filter.text2 {
    grid-column: 2/3;
  }
}
.pagelink {
  justify-content: space-around;
  margin: 50px;
  & li {
    flex: 0 1 40%;
    gap: 20px;
    border: solid 5px #ccc;
    border-radius: 10px;
    margin-bottom: 20px;
    &:hover {
      background-color: #ece0e7;
    }
    & figure img {
      height: 100px;
      width: auto;
    }
    & a {
      display: block;
      padding: 20px 10px;
      height: 100%;
      text-align: center;
      color: #333;
      font-size: 2rem;
      font-weight: bold;
      &:hover {
        text-decoration: none;
      }
      & ul {
        display: flex;
        gap: 10px;
        justify-content: space-around;
        & li {
          border: none;
          flex: 0 1 45%;
        }
      }
    }
  }
}
footer {
  background-color: #fff;
  color: #333;
  padding: 50px;
    .flex {
        gap: 20px;
        text-align: left;
        & div {flex: 0 1 50%;}
        & dl {
            
            & dt {
                width: 7em;
                background-color: #004190;
                color: #fff;
                border-radius: 5px;
                text-align: center;
            }
            & dd {
                font-size: 1.5rem;
                color: #333;
                & a {
                    color: #333;
                }
            }
        }
    }
    .grid {
        display: grid;
        grid-template-columns: 2.8fr 1fr;
        & a {
            display: block;
            flex: 0 1 30%;
            &:hover {
                opacity: 0.8;
            }
        }
    }
  & a {
    color: #fff;
  }
  & h3 {
    display: inline-block;
    background-color: #fff;
    padding: 5px 20px 3px;
    margin: 10px auto;
    color: #333;
    border-radius: 10px;
  }
    & figure {
        margin-bottom: 50px;
    }
}
@media screen and (max-width: 559px) {
  .alignright {
    float: none;
    margin: 0;
  }
  header {
    & h1 {
      text-align: center;
      & a {
        & img {

        }
      }
    }
  }
  .homeimgbt {
    & .btbox {
      & li {
        line-height: 1.3em;
        & a {
          padding: 8px 5px 5px;
          margin-bottom: 10px;
        }
      }
    }
  }
  span.bt {
    position: fixed;
    display: block;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 100;
    text-align: center;
    padding-top: 10px;
    & a {
      position: static;
      display: inline-block;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
      border-radius: 10px;
    }
  }
  a.pagetop {
    bottom: 90px;
  }
  #content {
    & table {
      & tr:nth-child(odd) {
        background-color: transparent;
      }
    }
  }
  .text {
    & h2 {
      padding-bottom: 30px;
    }
    & p {
      padding: 0px 30px 20px;
      font-size: 0.7rem;
    }
  }
  .courses {
    & archive {
      & ul.flex {
        display: flex;
        justify-content: flex-start;
      }
      & header {
        position: static;
        & h3 {
          font-size: 1.5rem;
        }
      }
      & .details {
        & tr {
          & th {
            width: auto;
            padding-bottom: 10px;
            clip-path: polygon(0% 0%, /* 左上 */ 100% 0%, /* 右上 */ 100% 80%, /* 右の中央を少し右に */ 50% 100%, /* 右下 */ 0% 80% /* 左下 */ );
          }
          & td {
            padding: 20px 0;
            font-size: 1rem;
            text-align: center;
          }
        }
      }
      .itpasport {
        word-break: break-all;
        margin: 20px 0;
      }
    }
  }
  .text2 {
    .caution {
      margin: 20px 10px;
      font-size: 1rem;
    }
  }
    .event_block {
        & .eventlist {
            & div.flex {
                & p {
                    padding: 10px;
                }
                & section.text {
                    & table {
                        border-bottom: dotted 1px #999!important;
                        & thead {
                            display: none;
                        }
                        & tr {
                            border-top: dotted 1px #999!important;
                            padding-top: 5px;
                            margin-top: 5px;
                            & td {
                                padding: 3px;
                            }
                            & td:nth-of-type(1)::before {
                                content: '対象：';
                            }
                            & td:nth-of-type(2)::before {
                                content: '時間：';
                            }
                            & td:nth-of-type(3)::before {
                                content: '定員：';
                            }
                        }
                    }
                    & dl {
                        font-size: 1em;
                    }
                }
            }
        }
    }
  .slidein, .slidein2 {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1.0s;
    &.slidein-left {
      transform: translate(-100%, 0);
    }
    &.slidein-right {
      transform: translate(100%, 0);
    }
    &.slidein-up {
      transform: translate(0, -100%);
    }
    &.slidein-bottom {
      transform: translate(0, 50px);
    }
    &.scrollin {
      transform: translate(0, 0) !important;
      opacity: 1 !important;
    }
  }
  footer {
    padding: 20px 20px 70px;
      .grid {
          display: block;
      }
  }
  main {
    & section {
      padding: 20px 10px;
      & h2 {
        font-size: 1.5rem;
      }
      & p {
        font-size: 0.9rem;
      }
      & ul {
        & li {
          font-size: 0.9rem;
        }
      }
      .date {
        font-size: 1.5rem;
      }
    }
  }
  .detail {
    & .steps {
      grid-template-columns: 1fr;
      .step1, .step2 {
        grid-column: 1/2;
      }
      & .step {
        & .flex {
          & div {
            margin: 10px 0;
          }
        }
      }
    }
  }
  .page_footer {
    padding: 10px;
    & figure {
      padding: 0;
    }
  }
  header.top {
    & h1 {
      margin-top: 0;
    }
  }
}