@charset "UTF-8";
/* ----関数設定---- */
/* ----------------------------------------------------------------------
共通
---------------------------------------------------------------------- */
#main_page {
  max-width: 1200px;
  width: 85%;
  margin: 0 auto;
}
#main_page section {
  margin-bottom: clamp(80px, calc(2.8169014085vw + 69px), 110px);
}
@supports not (margin-bottom: clamp(80px, calc(2.8169014085vw + 69px), 110px)) {
  #main_page section {
    margin-bottom: max(80px, min(calc(2.8169014085vw + 69px), 110px));
  }
}
#main_page h3 {
  font-size: clamp(20px, calc(0.6572769953vw + 18px), 27px);
  font-weight: bold;
}
@supports not (font-size: clamp(20px, calc(0.6572769953vw + 18px), 27px)) {
  #main_page h3 {
    font-size: max(20px, min(calc(0.6572769953vw + 18px), 27px));
  }
}

.headline2 {
  text-align: center;
  color: #04438C;
  line-height: 1.4;
  margin-bottom: 30px;
  font-weight: bold;
  font-size: clamp(24px, calc(0.4694835681vw + 22px), 29px);
}
@supports not (font-size: clamp(24px, calc(0.4694835681vw + 22px), 29px)) {
  .headline2 {
    font-size: max(24px, min(calc(0.4694835681vw + 22px), 29px));
  }
}
.headline2 .sub {
  display: block;
  font-size: clamp(12px, calc(0.3755868545vw + 11px), 16px);
}
@supports not (font-size: clamp(12px, calc(0.3755868545vw + 11px), 16px)) {
  .headline2 .sub {
    font-size: max(12px, min(calc(0.3755868545vw + 11px), 16px));
  }
}

.intro {
  margin-bottom: 60px;
}

table.table1 {
  width: 100%;
  border-top: solid 1px #333333;
  margin-inline: auto;
}
table.table1 th {
  text-align: center;
  vertical-align: middle;
  background-color: #f3f3f3;
}
table.table1 th, table.table1 td {
  border-bottom: solid 1px #333333;
  display: block;
  padding: clamp(5px, calc(1.7840375587vw + -2px), 24px);
}
@supports not (padding: clamp(5px, calc(1.7840375587vw + -2px), 24px)) {
  table.table1 th, table.table1 td {
    padding: max(5px, min(calc(1.7840375587vw + -2px), 24px));
  }
}

@media screen and (min-width: 768px) {
  table.table1 th {
    background-color: #FFF;
    width: 33%;
  }
  table.table1 th, table.table1 td {
    display: table-cell;
  }
}
/* ----------------------------------------------------------------------
クラブおおづについて
---------------------------------------------------------------------- */
#aboutus #vision{background: #faf8f6; padding:20px;}
#aboutus #vision h3.copy{color: #4da2d3; margin-bottom:40px; text-align:center;}
#aboutus #vision .flex{display: flex;    flex-wrap: wrap;    gap: 50px;}
#aboutus #vision .flex > div{width:100%;background: #faf8f6;}
#aboutus #vision .flex h3{text-align: center;    color: #4da2d3; margin-bottom:10px;}
#aboutus #vision .flex h3 span.texts{display: block;    line-height: 1.2;    font-weight: normal; font-size: clamp(14px, calc(0.3755868545vw + 13px), 18px);}
#aboutus #vision .flex img{width:150px; display:block; margin:0 auto 10px;}
#aboutus #greeting .image{margin: 0 auto 20px;  width: 80%;}
#aboutus #greeting .text h3{margin-bottom:10px;}
#aboutus #greeting .ceo {
  text-align: right;
  margin-top: clamp(20px, calc(2.8169014085vw + 9px), 50px);
}
@supports not (margin-top: clamp(20px, calc(2.8169014085vw + 9px), 50px)) {
  #aboutus #greeting .ceo {
    margin-top: max(20px, min(calc(2.8169014085vw + 9px), 50px));
  }
}
#aboutus #organization table ul {
  display: flex;
  gap: 0 40px;
  flex-wrap: wrap; justify-content:center;
}
#aboutus #facility a.button {
  display: flex;
  gap: 8px;
  margin-top: 50px;
}
#aboutus #facility a.button::after {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background: url(../images/external-link.svg) no-repeat center center/contain;
}
#aboutus #outsource ul{max-width: 375px;    margin: 0 auto;padding-left: 25px;}
#aboutus #outsource ul li{list-style: circle;}

@media screen and (min-width: 768px) {
	#aboutus #vision .flex{gap:30px;}
	#aboutus #vision .flex > div{width:calc((100% - 60px) / 3);}
	#aboutus #greeting .flex .image {    width: 45%;  }
	#aboutus #greeting .text h3{text-align:center;}
	#aboutus #organization table ul{justify-content:flex-start;}
}
@media screen and (min-width: 1025px) {
	#aboutus #vision{padding:40px;}
	#aboutus #vision .flex{gap:50px;}
	#aboutus #vision .flex > div{width: calc((100% - 100px) / 3);}
	#aboutus #vision .flex img{width:170px;margin-bottom:20px;}
	#aboutus #greeting .flex {    display: flex;    justify-content: space-between;    align-items: center;  }
	#aboutus #greeting .flex .image {    width: 45%;  }
	#aboutus #greeting .flex .text {    width: 48%;  }
	#aboutus #greeting .text h3{text-align:left;}
}

@media screen and (max-width: 767px){
	#aboutus #facility a.button{width:unset;}
}
	
/* ----------------------------------------------------------------------
入会案内
---------------------------------------------------------------------- */
#membership h2.info{font-weight: bold;    margin-top: 20px;  }
#membership .box {
  border: solid 5px #04438C;
  margin-bottom: 30px;
  padding: 30px;
  border-radius: 10px;
}
#membership #sign-up ol {
  padding-left: 1.5em;
  margin-top: 20px;
}
#membership #sign-up ol li {
  list-style: auto;
}
#membership #sign-up .textindent {
  margin-top: 10px;
}
#membership #benefits {
  background: #f3f3f3;
  border-radius: 10px;
  padding: clamp(20px, calc(1.4084507042vw + 15px), 35px);
}
@supports not (padding: clamp(20px, calc(1.4084507042vw + 15px), 35px)) {
  #membership #benefits {
    padding: max(20px, min(calc(1.4084507042vw + 15px), 35px));
  }
}
#membership #benefits img {
  display: block;
  margin: 0 auto 20px;
}
#membership #payment h3 {
  margin-top: 40px;
  font-size: clamp(18px, calc(0.8450704225vw + 15px), 27px);
  margin-bottom: 20px;
}
@supports not (font-size: clamp(18px, calc(0.8450704225vw + 15px), 27px)) {
  #membership #payment h3 {
    font-size: max(18px, min(calc(0.8450704225vw + 15px), 27px));
  }
}
#membership #payment .image {
  text-align: center;
  margin-top: 10px;
}
#membership #payment .image .textindent {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 5px;
}
#membership #payment .image img {
  margin-top: 5px;
}

@media screen and (min-width: 768px) {
  #membership #payment .flex {
    display: flex;
    justify-content: space-between;
  }
  #membership #payment .flex .image {
    width: 23%;
    margin-top: 30px;
  }
  #membership #payment .flex .image img {
    margin-top: 0;
  }
  #membership #payment .flex .text {
    width: 70%;
  }
  #membership #payment h4 {
    margin-bottom: 5px;
    text-align: center;
  }
}
@media screen and (min-width: 1025px) {
  #membership .box {
    display: flex;
    justify-content: space-between;
  }
  #membership .box .title {
    width: 24%;
  }
  #membership .box .text {
    width: 72%;
  }
  #membership #sign-up ol {
    margin-top: 0;
  }
}
/* ----------------------------------------------------------------------
ジュニアスクール・サークル
---------------------------------------------------------------------- */
#list ul li {
  width: 100%;
  border: solid 1px #04438C;
  border-radius: 5px;
  margin-bottom: clamp(20px, calc(2.8169014085vw + 9px), 50px);
}
@supports not (margin-bottom: clamp(20px, calc(2.8169014085vw + 9px), 50px)) {
  #list ul li {
    margin-bottom: max(20px, min(calc(2.8169014085vw + 9px), 50px));
  }
}
#list ul li h3 {
  color: #FFF;
  text-align: center;
  background-color: #04438C;
  padding: 5px;
}
#list ul li .flex {
  padding: clamp(16px, calc(3.1924882629vw + 4px), 50px);
}
@supports not (padding: clamp(16px, calc(3.1924882629vw + 4px), 50px)) {
  #list ul li .flex {
    padding: max(16px, min(calc(3.1924882629vw + 4px), 50px));
  }
}
#list ul li table {
  width: 100%;
}
#list ul li th, #list ul li td {
  font-size: clamp(14px, calc(0.3755868545vw + 13px), 18px);
  line-height: 1.5;
  display: block;
}
@supports not (font-size: clamp(14px, calc(0.3755868545vw + 13px), 18px)) {
  #list ul li th, #list ul li td {
    font-size: max(14px, min(calc(0.3755868545vw + 13px), 18px));
  }
}
#list ul li th {
  color: #04438C;
}
#list ul li td {
  margin-bottom: 10px;
  border-bottom: dotted 1px #CCC;
}
#list ul li figure {
  margin-top: 10px;
  text-align: center;
}
#list ul li figure img {
  border-radius: 5px;
}

@media screen and (min-width: 768px) {
  #list ul li .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #list ul li .flex .text {
    width: 60%;
  }
  #list ul li .flex figure {
    width: 36%;
    margin-top: 0;
  }
  #list ul li th, #list ul li td {
    display: table-cell;
    border-bottom: dotted 1px #CCC;
  }
  #list ul li th {
    width: clamp(100px, calc(11.9047619048vw + 9px), 180px);
  }
  @supports not (width: clamp(100px, calc(11.9047619048vw + 9px), 180px)) {
    #list ul li th {
      width: max(100px, min(calc(11.9047619048vw + 9px), 180px));
    }
  }
}
@media screen and (min-width: 1025px) {
  #list ul li .flex .text {
    width: calc(100% - 340px);
  }
  #list ul li .flex figure {
    width: 300px;
  }
  #list ul li th, #list ul li td {
    padding: 3px;
  }
}
@media screen and (min-width: 1200px) {
  #list ul li .flex .text {
    width: calc(100% - 370px);
  }
  #list ul li .flex figure {
    width: 300px;
  }
  #list ul li th, #list ul li td {
    padding: 5px 25px;
  }
}
/* ----------------------------------------------------------------------
学童スポーツクラブ
---------------------------------------------------------------------- */
#sports-club #entry ul {
  max-width: 800px;
  margin: 0 auto 50px;
}
#sports-club #entry ul li {
  text-align: center;
  background: #f7f3f3;
  margin-bottom: 23px;
  padding: 10px;
}
#sports-club #entry ul li h3 span.sub {
  font-size: clamp(16px, calc(0.5633802817vw + 14px), 22px);
  font-weight: normal;
  display: block;
}
@supports not (font-size: clamp(16px, calc(0.5633802817vw + 14px), 22px)) {
  #sports-club #entry ul li h3 span.sub {
    font-size: max(16px, min(calc(0.5633802817vw + 14px), 22px));
  }
}
#sports-club #recommendations h3 {
  margin-bottom: 20px;
  margin-top: 50px;
}
#sports-club #recommendations h3.first {
  margin-top: 0;
}
#sports-club #recommendations img {
  display: block;
  margin: 0 auto 20px;
  border-radius: 10px;
}
#sports-club #recommendations ul {
  padding-left: 20px;
  margin-top: 20px;
}
#sports-club #recommendations ul li {
  list-style: disc;
  margin-bottom: 5px;
}
#sports-club #recommendations ol {
  margin-left: 30px;
  margin-top: 20px;
}
#sports-club #recommendations ol li {
  list-style: auto;
  margin-bottom: 10px;
}
#sports-club #recommendations ol li h4 {
  font-weight: bold;
  font-size: clamp(18px, calc(0.1877934272vw + 17px), 20px);
}
@supports not (font-size: clamp(18px, calc(0.1877934272vw + 17px), 20px)) {
  #sports-club #recommendations ol li h4 {
    font-size: max(18px, min(calc(0.1877934272vw + 17px), 20px));
  }
}
#sports-club #recommendations .copy {
  margin-top: 30px;
  font-size: clamp(16px, calc(0.3755868545vw + 15px), 20px);
}
@supports not (font-size: clamp(16px, calc(0.3755868545vw + 15px), 20px)) {
  #sports-club #recommendations .copy {
    font-size: max(16px, min(calc(0.3755868545vw + 15px), 20px));
  }
}

@media screen and (min-width: 768px) {
  #sports-club #entry ul li h3 span.sub {
    display: inline;
  }
  #sports-club #recommendations .clearfix::after {
    content: " ";
    display: block;
    clear: both;
  }
  #sports-club #recommendations img {
    width: clamp(250px, calc(37.2023809524vw + -36px), 500px);
  }
  @supports not (width: clamp(250px, calc(37.2023809524vw + -36px), 500px)) {
    #sports-club #recommendations img {
      width: max(250px, min(calc(37.2023809524vw + -36px), 500px));
    }
  }
  #sports-club #recommendations img.right {
    float: right;
    margin: 0 0 10px 30px;
  }
  #sports-club #recommendations img.left {
    float: left;
    margin: 0 30px 20px 0;
  }
  #sports-club #recommendations ol {
    float: left;
  }
  #sports-club #recommendations ol li h4 {
    display: inline-block;
    margin-right: 20px;
  }
}
/* ----------------------------------------------------------------------
プライバシーポリシー
---------------------------------------------------------------------- */
#privacy-policy h2 {
  margin-top: 30px;
  font-size: clamp(18px, calc(0.1877934272vw + 17px), 20px);
  border-bottom: solid 1px #CCC;
  padding: 5px 0;
  margin-bottom: 5px;
  color: #04438C;
}
@supports not (font-size: clamp(18px, calc(0.1877934272vw + 17px), 20px)) {
  #privacy-policy h2 {
    font-size: max(18px, min(calc(0.1877934272vw + 17px), 20px));
  }
}

#privacy-policy {
  font-size: clamp(14px, calc(0.1877934272vw + 13px), 16px);
}
@supports not (font-size: clamp(14px, calc(0.1877934272vw + 13px), 16px)) {
  #privacy-policy {
    font-size: max(14px, min(calc(0.1877934272vw + 13px), 16px));
  }
}

#privacy-policy p {
  font-size: clamp(14px, calc(0.1877934272vw + 13px), 16px);
}
@supports not (font-size: clamp(14px, calc(0.1877934272vw + 13px), 16px)) {
  #privacy-policy p {
    font-size: max(14px, min(calc(0.1877934272vw + 13px), 16px));
  }
}

#privacy-policy ul {
  padding-left: 20px;
}

#privacy-policy ul li {
  list-style: circle;
}

/* ----------------------------------------------------------------------
お問い合わせ
---------------------------------------------------------------------- */
#contact form a {
  text-decoration: underline;
}
#contact form .hissu {
  position: relative;
}
#contact form .hissu::after {
  content: "必須";
  color: white;
  display: block;
  font-size: 11px;
  padding: 2px 5px;
  background: #c3030b;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
#contact form input[type=text], #contact form input[type=email], #contact form textarea {
  background: #F1F1F1;
  padding: 10px;
  border-radius: 3px;
  width: 100%;
}
#contact form input[type=text]::placeholder,#contact form input[type=email]::placeholder,#contact form textarea::placeholder{color:#CCC}
#contact form .mwform-tel-field input[type=text]{
	width:85px;
}

#contact form input[type=submit] {
  display: block;
  background: #04438C;
  text-align: center;
  width: clamp(200px, calc(11.2676056338vw + 158px), 320px);
  border-radius: 30px;
  height: 60px;
  color: #FFF;
  font-weight: bold;
  line-height: 60px;
  margin: 30px auto 0;
}
@supports not (width: clamp(200px, calc(11.2676056338vw + 158px), 320px)) {
  #contact form input[type=submit] {
    width: max(200px, min(calc(11.2676056338vw + 158px), 320px));
  }
}
#contact form input[type=submit]:hover {
  background: #D63668;
}
#contact form input[type=submit].backButton{
	 background:#FFF;border:solid 1px #04438C; color:#04438C;
}
#contact form input[type=submit].backButton:hover{background:#04438C; color:#FFF;}
#contact form .wpcf7-previous {
  background: #e3e3e3;
  padding: 8px 32px;
}
#contact select{
	background: #F2F2F2;
    padding: 10px;
    font-size: 16px;
    appearance: auto;
    cursor: pointer;
}
#contact form input[type=text].year{	width:60px;}
#contact .message {
  margin-top: 4rem;
  text-align: center;
  line-height: 2;
}
#contact .message a {
  color: #04438C;
  text-decoration: underline;
}
#contact .message a:hover {
  text-decoration: none;
}
#contact .check_agree {
    text-align: center;
    margin-inline: auto;
    margin-top: 40px;
}
#contact .note{
	text-align: center;
    margin-bottom: 40px;
}

@media screen and (min-width: 768px) {
	#contact .mw_wp_form_complete{text-align:center;}
}
@media screen and (max-width: 767px){
	#contact table.table1 td{padding:20px 10px;}
	#contact .message{text-align:left;}
}

/*# sourceMappingURL=page.css.map */