/*
Theme Name: 鉄緑会 大阪校
Description:鉄緑会 大阪校のHP
Theme URI: 
Author: ifdesign inc
Author URI: https://ifdesign.jp
Version: 1.00
*/


/*default clear設定*/

abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent
}

body {
  line-height: 1
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}

nav ul {
  list-style: none
}

blockquote, q {
  quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent
}

ins {
  text-decoration: none
}

ins, mark {
  background-color: #ff9;
  color: #000
}

mark {
  font-style: italic;
  font-weight: 700
}

del {
  text-decoration: line-through
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0
}

input, select {
  vertical-align: middle
}

*, :after, :before {
  box-sizing: border-box
}

button {
  cursor: pointer;
  cursor: hand
}

img {
  vertical-align: bottom
}

li {
  list-style-type: none
}

input, textarea {
  -webkit-appearance: none
}

h1 {
  font-size: 1em;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: nomal
}

h2, h3, h4 {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: 400
}

.bl {
  color: #0038DB;
}

.rd {
  color: #D30000;
}


/*a href 設定*/

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

a {
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}

a {
  text-decoration: none;
}

a:hover, a:focus, a:active {
  text-decoration: none;
}


/*端末別設定*/

.pc {
  display: block!important;
}

.sp {
  display: none!important;
}

@media screen and (max-width: 896px) {
  .pc {
    display: none!important;
  }
  .sp {
    display: block!important;
  }
}

@media screen and (max-width: 480px) {
  .pc {
    display: none!important;
  }
  .sp {
    display: block!important;
  }
}


/*基本設定*/

body, html {
  margin-top: 0px!important;
}

body {
  -webkit-print-color-adjust: exact;
  border: none;
  padding: 0px;
  margin: 0px;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: medium;
  color: #000000;
  line-height: 1.6em;
  -webkit-text-size-adjust: 100%;
  background-color: #FFFFFF;
}

#body-wrap {
  overflow-x: hidden;
}

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


/*--------------------------
共通項目
---------------------------*/


/*共通*/

section {
  padding-top: 80px;
  padding-bottom: 50px;
}

section .section-wrap {
  width: 90%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

section .section-wrap h2 {
  font-size: 22pt;
  line-height: 1.8em;
  margin-bottom: 50px;
  color: #0B3A81;
  text-align: center;
  font-weight: bold;
  position: relative;
}

section .section-wrap h2::after {
  content: '';
  width: 110px;
  height: 4px;
  display: inline-block;
  background-color: #0B3A81;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 55px)
}

@media screen and (max-width: 480px) {
  section .section-wrap h2 {
    font-size: 18pt;
  }
}


/*ヘッダー*/

header {
  background-color: #0B3A81;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #FFFFFF;
  font-weight: bold;
}

header section {
  padding-top: 0px;
  padding-bottom: 0px;
}

header .section-wrap {
  display: flex;
}

header .section-wrap .left {}

header .section-wrap .left a {
  color: #FFFFFF;
  text-decoration: none;
}

header .section-wrap .left a p {
  font-size: 15pt;
  line-height: 1em;
  padding-top: 10px;
  margin-bottom: 5px;
}

header .section-wrap .left a h1 {
  font-size: 40pt;
  line-height: 1em;
}

header .section-wrap .right {
  text-align: right;
  margin-left: auto;
}

header .section-wrap .right p {
  font-size: 12pt;
  line-height: 1.6em;
}

header .section-wrap .right p.tel {
  font-size: 20pt;
}

header .section-wrap .right p a {
  color: #FFFFFF;
  text-decoration: none;
}

@media screen and (max-width: 480px) {
  header .section-wrap .left a p {
    font-size: 8pt;
  }
  header .section-wrap .left a h1 {
    font-size: 22pt;
    white-space: nowrap;
  }
  header .section-wrap .right p {
    font-size: 8pt;
  }
  header .section-wrap .right p.tel {
    font-size: 14pt;
  }
}


/*フッター*/

footer {
  background-color: #0B3A81;
  padding-top: 20px;
  padding-bottom: 20px;
}

footer .copyright {
  text-align: center;
  font-size: small;
  color: #FFFFFF;
}

@media screen and (max-width: 480px) {}


/*GOTOP*/

.gotop {
  position: fixed;
  right: 15px;
  bottom: 150px;
  z-index: 99;
}

.gotop a {
  color: #FFFFFF;
  padding-left: 13px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 23px;
  background-color: #0B3A81;
}

.gotop a img {
  width: 20px;
  height: auto;
}

@media screen and (max-width: 480px) {}


/*スライダー*/

section.slider {
  width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
}

section.slider .wrap {
  width: 100%;
}

section.slider .wrap div {}

section.slider .wrap div img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 480px) {}


/*2022年度合格実績*/

section.achievement {
  padding-top: 50px;
}

section.achievement .section-wrap {
  text-align: center;
}

section.achievement .section-wrap h2 {
  display: inline-block;
  color: #FFFFFF;
  font-size: 30pt;
  line-height: 1em;
  border-radius: 10px;
  font-weight: bold;
  background-color: #0B3A81;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 30px;
}

section.achievement .section-wrap h2::after {
  display: none;
}

section.achievement dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 10px;
  text-align: left;
  border-bottom: 2px solid #0B3A81;
}

section.achievement dl dt {
  width: 70%;
  line-height: 1.4em;
  color: #0B3A81;
  font-weight: bold;
  display: flex;
  align-items: flex-end;
}

section.achievement dl dd {
  width: 30%;
  text-align: right;
  line-height: 1.4em;
  color: #E60012;
  font-weight: bold;
  font-size: 20pt;
  display: flex;
  align-items: flex-end;
  justify-content: end;
  padding-right: 10px;
}

section.achievement dl dd span {
  font-size: 10pt;
  line-height: 2em;
}

section.achievement dl dt.half {
  width: 40%;
}

section.achievement .hosoku {
  width: 50%;
  font-size: 10pt;
  justify-content: flex-end;
}

section.achievement dl dd.half {
  width: 10%;
}

section.achievement dl .strong {
  font-size: 30pt;
}

section.achievement dl .strong span {
  font-size: 15pt;
}

section.achievement .hosoku {
  color: #0B3A81;
}

section.achievement .left {
  width: 46%;
  margin-right: 4%;
}

section.achievement .right {
  width: 50%;
}

section.achievement .right dl {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

section.achievement .right .col2 {
  width: 100%;
}

section.achievement .right .col2 dl {
  width: 50%;
  margin-bottom: 6px;
  border-bottom: 2px solid #0B3A81;
}

section.achievement .right .col2 dt {
  width: 80%;
  font-size: 13pt;
}

section.achievement .right .col2 dd {
  width: 20%;
}

section.achievement .current {
  color: #0B3A81;
  font-weight: bold;
  text-align: right;
  display: block;
}

@media screen and (max-width: 480px) {
  section.achievement .section-wrap h2 {
    font-size: 22pt;
  }
  section.achievement .left {
    width: 100%;
    margin-right: 0%;
  }
  section.achievement .right {
    width: 100%;
  }
  section.achievement dl .strong {
    font-size: 22pt;
  }
  section.achievement dl .strong span {
    font-size: 15pt;
  }
  section.achievement dl dd {
    font-size: 15pt;
  }
  section.achievement dl dd span {
    font-size: 10pt;
    line-height: 2em;
  }
  section.achievement dl dt.half {
    width: 40%;
  }
  section.achievement .right .col2 dt {
    font-size: 9pt;
  }
  section.achievement .hosoku {
    width: 50%;
    font-size: 8pt;
  }
}


/*鉄緑会*/

section.link {
  padding-top: 50px;
  padding-bottom: 0px;
}

section.link .wrap {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 12pt;
  line-height: 1.6em;
}

section.link .button {
  padding-top: 0px;
  text-align: center;
}

section.link .button a {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  color: #000000;
  text-decoration: none;
  background-color: #FAC000;
  font-size: 20pt;
  border-radius: 10px;
  line-height: 1.4em;
  font-weight: bold;
}

section.link .button a:hover {
  opacity: 0.8;
}

section.link .button p {
  padding-top: 10px;
  font-size: 10pt;
}

@media screen and (max-width: 480px) {
  section.link .wrap ul li {
    font-size: 10pt;
    line-height: 1.6em;
  }
  section.link .button a {
    font-size: 14pt;
  }
}


/*入会案内*/

section.enrollment {
  padding-top: 50px;
}

section.enrollment .section-wrap h2 {
  display: inline-block;
  color: #FFFFFF;
  font-size: 30pt;
  line-height: 1em;
  border-radius: 10px;
  font-weight: bold;
  background-color: #0B3A81;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 30px;
}

section.enrollment .section-wrap h2::after {
  display: none;
}

section.enrollment .section-wrap .title p {
  padding-left: 20px;
  font-weight: bold;
}

section.enrollment .section-wrap .wrap .left {
  width: 60%;
  margin-right: 3%;
}

section.enrollment .section-wrap .wrap .right {
  width: 37%;
}

section.enrollment .section-wrap .static_text {}

section.enrollment .section-wrap .static_text p {
  margin-bottom: 20px;
  font-size: medium;
  font-weight: bold;
}

section.enrollment .section-wrap .static_text p.has-medium-font-size {
  margin-bottom: 10px;
  font-size: medium!important;
}

@media screen and (max-width: 480px) {
  section.enrollment .section-wrap h2 {
    font-size: 22pt;
    margin-left: auto;
    margin-right: auto;
  }
  section.enrollment .section-wrap .title p {
    padding-left: 0px;
    margin-bottom: 20px;
    font-size: 10pt;
    line-height: 1.4em;
  }
  section.enrollment .section-wrap .wrap .left {
    width: 100%;
    margin-right: 0%;
  }
  section.enrollment .section-wrap .wrap .right {
    width: 100%;
  }
}


/*鉄緑会マイページ*/

section.mypage {
  background-color: #fafafa;
}

section.mypage .wrap {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 12pt;
  line-height: 1.6em;
}

section.mypage .wrap ul {}

section.mypage .wrap ul li {
  margin-bottom: 15px;
}

section.mypage .wrap ul li span {
  color: #ce0010;
}

section.mypage .button {
  padding-top: 30px;
  text-align: center;
}

section.mypage .button a {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  color: #000000;
  text-decoration: none;
  background-color: #FAC000;
  font-size: 20pt;
  border-radius: 10px;
  line-height: 1.4em;
  font-weight: bold;
}

section.mypage .button a:hover {
  opacity: 0.8;
}

section.mypage .button p {
  padding-top: 10px;
  font-size: 10pt;
}

@media screen and (max-width: 480px) {
  section.mypage .wrap ul li {
    font-size: 10pt;
    line-height: 1.6em;
  }
  section.mypage .button a {
    font-size: 14pt;
  }
}


/*欠席者授業*/

section.absence .wrap {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 12pt;
  line-height: 1.6em;
}

section.absence .wrap ul {}

section.absence .wrap ul li {
  margin-bottom: 15px;
}

section.absence .wrap ul li span {
  color: #ce0010;
}

section.absence .button {
  padding-top: 30px;
  text-align: center;
}

section.absence .button a {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  color: #000000;
  text-decoration: none;
  background-color: #FAC000;
  font-size: 20pt;
  border-radius: 10px;
  line-height: 1.4em;
  font-weight: bold;
}

section.absence .button a:hover {
  opacity: 0.8;
}

section.absence .button p {
  padding-top: 10px;
  font-size: 10pt;
}

@media screen and (max-width: 480px) {
  section.absence .wrap ul li {
    font-size: 10pt;
    line-height: 1.6em;
  }
  section.absence .button a {
    font-size: 14pt;
  }
}


/*英語リスニング音源配布*/

section.listening {
  background-color: #fafafa;
}

section.listening .wrap {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 12pt;
  line-height: 1.6em;
}

section.listening .button {
  padding-top: 30px;
  text-align: center;
}

section.listening .button a {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  color: #000000;
  text-decoration: none;
  background-color: #FAC000;
  font-size: 20pt;
  border-radius: 10px;
  line-height: 1.4em;
  font-weight: bold;
}

section.listening .button a:hover {
  opacity: 0.8;
}

section.listening .button p {
  padding-top: 10px;
  font-size: 10pt;
}

@media screen and (max-width: 480px) {
  section.listening .wrap ul li {
    font-size: 10pt;
    line-height: 1.6em;
  }
  section.listening .button a {
    font-size: 14pt;
  }
}


/*最近のお知らせ*/

section.news {
  background-color: #eff7fe;
}

section.news .wrap {
  padding-left: 2%;
  padding-right: 2%;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

section.news .wrap article {
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid #CFCFCF;
}

section.news .wrap article:first-child {
  border-top-style: none;
}

section.news .wrap article .title {
  font-size: 15pt;
  margin-bottom: 10px;
  font-weight: bold;
  line-height: 1.6em;
}

section.news .wrap article .days {
  font-size: 10pt;
  margin-bottom: 30px;
  font-weight: bold;
}

section.news .wrap article .contents {
  font-size: 12pt;
}

section.news .wrap article .contents p {
  line-height: 1.6em;
  margin-bottom: 20px;
  font-weight: bold;
}

section.news .wrap article .contents img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 480px) {
  section.news .wrap article .title {
    font-size: 16pt;
  }
  section.news .wrap article .days {
    font-size: 10pt;
  }
  section.news .wrap article .contents {
    font-size: 10pt;
  }
}


/*新型コロナウィルス感染症関連*/

section.covid-19 {
  background-color: #fffcfc;
}

section.covid-19 h2 {
  color: #ce0010;
}

section.covid-19 .section-wrap h2::after {
  background-color: #ce0010;
}

section.covid-19 .wrap {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 12pt;
  line-height: 1.6em;
}

section.covid-19 .wrap .title {
  margin-bottom: 20px;
  text-align: center;
}

section.covid-19 .wrap ul {}

section.covid-19 .wrap ul li {
  margin-bottom: 15px;
}

section.covid-19 .wrap ul li span {
  color: #ce0010;
}

@media screen and (max-width: 480px) {
  section.covid-19 .wrap ul li {
    font-size: 10pt;
    line-height: 1.6em;
  }
}


/*アクセス*/

section.access {
  padding-bottom: 0px;
}

section.access .wrap {
  padding-bottom: 30px;
  text-align: center;
}

section.access .wrap ul {}

section.access .wrap ul li {
  font-weight: bold;
  padding-bottom: 10px;
}

section.access .wrap ul li.title {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 18pt;
  color: #0B3A81;
}

section.access iframe {
  vertical-align: bottom;
}

section.access .wrap.flex {
  padding-top: 0px;
  padding-bottom: 0px;
}

section.access .wrap.flex .other {
  width: 50%;
  padding-top: 30px;
}

section.access .wrap.flex .other .title {
  font-size: 18pt;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  color: #0B3A81;
}

section.access .wrap.flex .other iframe {}

@media screen and (max-width: 480px) {
  section.access iframe {
    height: 200px;
  }
  section.access .wrap ul li {
    font-size: 10pt;
    line-height: 1.6em;
  }
  section.access .wrap.flex .other {
    width: 100%;
  }
}



main.static {
}
main.static section {
padding-top: 30px;
}
main.static article {
width: 96%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
main.static form input {
display: block;
margin-left: auto;
margin-right: auto;
background-color: #dfdfdf;
border: none;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
cursor: pointer;
}







/*--------------------------
スライダー（CSS only / slick代替）
無限ループ・等速・autoplay を CSS animation で再現
---------------------------*/

section.slider .wrap {
  overflow: hidden;
  position: relative;
}

.slider-track {
  display: flex;
  width: max-content;
  /* 1枚=画面幅の1/3。6枚で1セット、2セット並べて -50% 移動でシームレスループ。
     元サイト(slick: speed7000ms=1枚7秒)に合わせ、6枚×7秒=42秒で1ループ */
  animation: slide-scroll 42s linear infinite;
}

.slider-track .slide {
  width: 33.3333vw;
  flex: 0 0 33.3333vw;
}

.slider-track .slide img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes slide-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* マウスホバーで一時停止（slickのpauseOnHover相当の自然な挙動） */
section.slider .wrap:hover .slider-track {
  animation-play-state: paused;
}

@media screen and (max-width: 480px) {
  /* 480px以下は2枚表示 */
  .slider-track .slide {
    width: 50vw;
    flex: 0 0 50vw;
  }
}