/*2024/11月 橋本作成*/

/*共通項目*/
html{
  scroll-behavior: smooth;
}
button{
  outline: none !important;
}
img {
    height: auto;
    width: 100%;
    vertical-align:top;
}
a:hover img{
  opacity: 0.7;
}
body{
  width:100%;
  font-family: 'Libre Baskerville','游明朝','Yu Mincho','Hiragino Mincho Pro', serif;
  color:#000;
  margin: 0;
  width:100%;
  margin: 0;
  padding: 0;
  background-image: none;
  background-color: #fff !important;
}
a,li{
  font-size: 10.5pt;
  line-height: 160%;
  color: #000;
  font-weight: 400;
  text-align: justify;
  text-decoration: none !important;
  list-style-type: none !important;
}

p{
  font-family: '游ゴシック体',sans-serif;
  font-size: 12pt;
  line-height: 160%;
  color: #000;
  font-weight: 400;
  text-align: justify;
  line-height: 160% !important;
}
span{
  font-size: 12pt;
  color:#fff;
  font-weight: 600;
}
h1{
  font-size: 20pt;
  line-height: 160%;
  color: #000;
  font-weight: 800;
  margin:0 !important;
}
h3{
    width: 100%;
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 0;
    font-weight: 600;
    margin:0;
    text-align: justify;
}
h2 {
    width: 100%;
    font-size: 1.8rem !important;
    line-height: 1.5;
    padding: 0.5rem 0;
    font-weight: 600 !important;
    margin: 0;
    letter-spacing : 3px;
}
h4 {
    width: 100%;
    font-size: 1.2rem !important;
    line-height: 1.5;
    padding: 0.5rem 0;
    font-weight: 400 !important;
    margin: 0;
    letter-spacing : 3px;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
img {
  image-rendering: -webkit-optimize-contrast;
}
}
#contents-wrap{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: auto;
}
/*全ページ*/
.top-back-color{
  overflow: hidden;
}
#site-contents .top-wrap img.top {
    width: 100%;
    padding-top: 3rem;
}
/*ボタンCSS*/
section.left {
    max-width: 250px;
    margin: 0;
    padding: 0;
    text-align:left;
}
section.right {
    max-width: 250px;
    margin: 0 0 0 auto;
    padding: 0;
}
section.center {
    max-width: 250px;
    margin: 0 auto;
    padding: 0;
}
a.btn_01,
a.btn_02{
  display: flex;
  align-items: center;
  width: 80%;
  padding: 0 1rem;
  height: 40px;
  position: relative;
  border-radius: 30px;
  box-sizing: border-box;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.3s;
  position: relative;
  overflow: hidden;
position: relative;
z-index: 1;
}
a.btn_02{
  justify-content: flex-end;
}
a.btn_01 {
    justify-content: center;
    color: #000 !important;
    background: #fff;
    border: 1px solid #000 !important;
    letter-spacing: 2px;
    font-weight: bold;
    margin: 0 auto;
}
a.btn_02 {
    color: #fff !important;
    background: transparent;
    border: 1px solid #fff !important;
    letter-spacing: 2px;
    font-weight: bold;
}
section:hover a.btn_01 {
  background: #000;
  transition: .1s;
  color:#fff;
}
a.btn_02::after{
  background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
}
a.btn_02:hover,
a.btn_01:hover {
  color: #fff !important;
}
a.btn_02:hover {
  color: #000053 !important;
}
a.btn_02:hover::after {
  transform: scale(1, 1);
}
a.btn_02 svg {
    width: 10%;
    fill: #fff;
    padding-left: 2rem;
}
a.btn_02:hover .cls-1,
a.btn_02:hover .cls-2{
    fill: none;
    stroke: #000053;
    stroke-miterlimit: 10;
}
.page-title-wrap h2{
  text-align: center;
}
/*ヘッダー*/
#site-header {
    width: 100%;
    position: fixed;
    height: auto;
    z-index: 999;
    background-color: #004097;
}
#site-header ul.menu-list a{
  color:#fff !important;
}
#site-header ul.menu-list a:hover{
  color:#f29600 !important;
  transition: .1s;
}
#site-header img.logoImage{
height:auto;
width: 100%;
max-width: 150px;
}
#site-header img.logo02{
display: none;
}
#site-header h1 {
    margin: 0;
    text-align: left;
    font-size: 12pt;
}
#site-header .header-titles-wrapper {
    display: flex;
    width: 100%;
    padding: 0;
    max-width: unset;
    justify-content: space-between;
    justify-items: center;
    height: 85px;
}
#site-header .header-titles-wrapper div {
    display: flex;
    flex-basis: 50%;
    align-items: center;
    justify-content: center;
}
#site-header .header-titles-wrapper div img{
  width: 50%;
}
#site-header .header-nav-list-wrap{
width:  50%;
  align-items: center;
}
#site-header .menu-list {
  display: flex;
  justify-content: center;
}
#site-header .menu-item {
  position: relative;
}
/* メニューアイテムのホバースタイル */
#site-header .menu-item:hover .drop-menu-list {
  opacity: 1; /* 不透明度を最大に */
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: visible; /* 下層メニューを表示 */
}

#site-header .menu-item a {
  align-items: center;
  color: #fff; /* メニューアイテム内のリンクテキストの色 */
  display: flex;
  height: 50px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */
  width: 9rem;
}
#site-header .menu-item a:hover {
  color: #f29600; /* メニューアイテム内のリンクテキストの色 */
  transition: .1s
}
#site-header nav.nav-menu .menu-item span{
padding-right: 0.2rem;
margin-bottom: 0.2rem;
}
/* ドロップダウンメニュー */
#site-header .drop-menu {
  position: relative;
}
#site-header .drop-menu-list {
  background-color: #004097; /* ドロップダウンメニューの背景色 */
  left: 0;
  opacity: 0; /* 不透明度を最小に */
  position: absolute;
  top: 100%;
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: hidden; /* 下層メニューを非表示 */
  width: max-content;
  z-index: 1;
  padding: 0 1rem;
}
#site-header .drop-menu-list a,
#site-header .drop-menu-list li{
text-align: right;
}
#site-header nav.nav-menu li.drop-menu-item a:hover{
  color: #f29600; /* メニューアイテム内のリンクテキストの色 */
  transition: .1s
}
#site-header nav.nav-menu li.drop-menu-item span{
padding-right: 0.5rem;
margin-top: 0.5rem;
}
/* スマホ */
#site-header .sp-only{
  display: none;
}
#site-header .header-list-menu a:hover{
color:#FFD921;
transition: .1s;
}
#site-header .header-list-menu,
#site-header .header-sub-menu {
    background: #fff;
    width: 100%;
    height: auto;
    margin-top: -0.1rem;
}
#site-header .header-list-menu ul {
    display: flex;
    font-weight: 600;
    font-size: 1rem;
    justify-content: center;
}
#site-header .header-sub-menu ul,
footer .header-sub-menu ul{
    display: flex;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 1rem;
    justify-content: center;
}
#site-header .header-list-menu li{
    display: flex;
    margin: 1rem;
    font-weight: 600;
    font-size: 1rem;
    justify-content: center;
}
#site-header .header-sub-menu li,
 footer .header-sub-menu li{
    display: flex;
    padding: 0.5rem 1rem;
    font-weight: 100;
    font-size: 10pt;
    justify-content: center;
}
#site-header .header-list-menu li.border-none{
  border-right: none;
}
#site-header .header-icons {
    width: 100%;
    position: absolute;
    top: 0;
    right: 5rem;
    display: flex;
    justify-content: flex-end;
    justify-items: center;
    z-index: 1;
}
#site-header .header-icons img {
    width: 100%;
    margin: 0 auto;
}
#site-header .header-icons a {
    max-width: 75px;
    padding: 1rem;
}
/*フッター*/
footer{
  width: 100%;
  text-align: center;
  z-index: 999;
  position:inherit;
  background-image: url(../img/base/foot-back.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding-top:5rem;
  padding-bottom:25rem;
}
footer .flex-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}
footer .flex-wrap .img {
    flex-basis: 55%;
    text-align: left;
}
footer span{
    font-size: 12pt;
    color: #000;
    font-weight: 600;
}
footer li.menu-item {
    padding-bottom: 0.5rem;
}
footer  a:hover span{
    padding-right: 0.5rem;
    transition: .1s;
}
footer li.menu-item-sub a:hover{
    color:#f29600;
}
footer li.menu-item-sub {
    text-indent: 1rem;
    padding-bottom: 0.5rem;
}
footer .flex-wrap .img {
    flex-basis: 70%;
}
footer .flex-wrap .text {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin-top: 3rem;
}
footer ul.menu-list{
flex-basis: 30%;
}
footer section.center{
flex-basis: 30%;
margin: 0;
}
footer img.logo {
    width: 50%;
    padding-bottom: 2rem;
    margin: 0 auto;
}
footer .text{
  text-align: left;
}
footer .text img.copy {
    width: 70%;
    padding-bottom: 2rem;
    margin: 0;
}
footer .footer-contents {
    width: 100%;
    margin: 0 auto;
    background: #FFD921;
    height: 220px;
    padding-top: 3rem;
}
footer .copyright {
    background: #000;
    padding: 1rem;
}
footer .copyright p{
    font-size: 1rem;
    color: #fff;
    font-weight: 400;
    text-align: center;
}
.privacy-wrap{
  max-width: 800px;
  margin-bottom: 5rem;
  margin: 0 auto;

}
.privacy-wrap a{
color: #d07184;
}
.privacy-wrap li{
  list-style: none !important;
}
#contents-wrap .privacy-wrap{
  margin-top: 15rem;
  padding-top:3rem;
  padding-bottom:3rem;
}
#contents-wrap .latest-issue-wrap h3{
  text-align: left;
}
footer .footer-contents img {
    width: 15%;
}
/*TOP以外のページタイトル*/
.page-title-wrap {
    background: #FFFAE5;
    text-align: center;
    width: 100%;
    height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}
/*フォーム*/
select {
  appearance:menulist !important;
  -moz-appearance: menulist !important;
  -webkit-appearance: menulist !important;
}
select::-ms-expand {
    display: block !important;
}
@media only screen and (max-width: 414px) {
.page-title-wrap {
    background: #FFD921;
    text-align: center;
    width: 100%;
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    margin-top: 4.5rem;
}
h2 {
    font-size: 1.5rem;
    text-align: left;
}
h3 {
    font-size: 1.2rem;
}
}
/*文章の最大幅*/
#contents-wrap p {
    max-width: 800px;
    margin: 0 auto;
}
/*h2 黄色かっこ*/
#contents-wrap .yellow-flame{
    padding: 0;
    position: relative;
    max-width: 500px;
    width: 200px;
    text-align: center;
    margin: 0 auto;
}
#contents-wrap .yellow-flame02{
    padding: 0;
    position: relative;
    text-align: center;
    margin: 3rem auto;
}
#contents-wrap .yellow-flame::before,
#contents-wrap .yellow-flame::after{
	content: '';
	width: 15px;
	height: 100%;
	position: absolute;
}
#contents-wrap .yellow-flame02::before{
  content: '';
	width: 25px;
	height: 100%;
	position: absolute;
  top:0;
  left:15rem;
  background-image: url(../img/zange/yellow-left.png);
  background-size: contain;
  background-repeat: no-repeat;
}
#contents-wrap .yellow-flame02::after{
  content: '';
	width: 25px;
	height: 100%;
	position: absolute;
  top:0;
  right: 15rem;
  background-image: url(../img/zange/yellow-right.png);
  background-size: contain;
  background-repeat: no-repeat;
}
#contents-wrap .yellow-flame::before{
  border-left: solid 10px #FFD921;
	border-top: solid 10px #FFD921;
	border-bottom: solid 10px #FFD921;
	top: 0;
	left: 0;
}
#contents-wrap .yellow-flame::after{
  border-right: solid 10px #FFD921;
	border-top: solid 10px #FFD921;
	border-bottom: solid 10px #FFD921;
	top: 0;
	right: 0;
}
#site-contents .back01{
  background-image: url(../img/base/back01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding:5rem 0;
}
#site-contents .flex-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}
#site-contents .back01 .flex-wrap .img {
    flex-basis: 40%;
}
#site-contents .back01 .flex-wrap .text {
    flex-basis: 55%;
    text-align: left;
}
#site-contents .back01 .flex-wrap h2 {
    color: #fff;
    text-align: right;
    border: none;
    margin-bottom: 0;
}
#site-contents .back01 .flex-wrap p {
    color: #fff;
    text-align: left;
    border-top: 1px solid #fff;
    padding: 2rem 0;
}
#site-contents .back01 .flex-wrap h4{
  color:#f29600;
  text-align: right;
}
#site-contents .back01 section.right a{
   margin:0 0 0 auto;
}
@media only screen and (max-width: 428px) {
  main{
    margin-top: 4.1rem;
  }
  #site-contents .content-wrap {
    max-width: 310px;
    margin: 0 auto;
}
.school-symbol {
    width: 5rem;
    position: absolute;
    right: 5.5rem;
    bottom: 5rem;
}
#site-header .header-titles-wrapper div img {
    padding: 0.5rem;
}
  .sp-only {
      display: block !important;
  }
.pc-only{
      display: none !important;
  }
  .slick-prev,
  .slick-next{
    top:35%;
  }
  #site-header .header-list-menu ul, #site-header .header-list-menu li {
      display: block !important;
      margin: 0 0 0 auto;
      font-weight: 600;
      font-size: 1.2rem;
      padding: 0;
  }
#site-header .header-icons img {
    width: 30%;
    margin: 0 auto;
}
#site-header .header-titles-wrapper,
#site-header .header-list-menu {
    display: block;
    width: 100%;
    margin: 0 auto;
}
button.drawer-toggle{
padding-top: 5rem;
}
#site-header .header-titles-wrapper{
  position: relative;
    padding: 0;
}
#site-header .header-icons {
    display: none !important;
}
#site-header .header-text {
    display: none;
}
#site-header .header-icons a{
    width: 30%;
    padding-right: 1rem;
}
#site-header .sp-only {
    display: block;
    width: 25%;
    margin:0;
}
  #site-header .pc-only {
    display: none;
  }
  #site-header .sp-only img.header-icon{
    width: 7.5%;
  }
  #site-header .sp-only img{
    width: 100%;
  }
  #site-header .header-titles img.logo {
    width: 100%;
    padding-top: 0;
    margin: 0 auto;
}
#site-header .header-titles img.logo02 {
  display: block;
  width: 100px;
  padding: 0;
  margin-left: 4rem;
  padding-top: 0;
}
nav.drawer-nav .header-icons-sp{
  display: flex;
  justify-content: center;
}
nav.drawer-nav .header-icons-sp a{
  flex-basis: 15%;
  padding: 0.5rem;
}
/* header ここまで */
/* footer スタート */
footer .flex-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer .flex-wrap .img {
    text-align: center;
}
footer .flex-wrap .text {
    width: 100%;
    display: block;
}
a.btn_01, a.btn_02 {
    width: 100%;
}
footer img.logo {
    width: 80%;
    padding-bottom: 2rem;
    margin: 0 auto;
}
footer .text{
  text-align: center;
}
footer .text img.copy {
    width: 50%;
    padding-bottom: 2rem;
    margin: 0 auto;
}
.sp-only
footer .footer-contents {
    width: 100%;
    margin: 0 auto;
    height:auto;
}
/* ボタンなどの共通項目 */
section.button,
section.button02{
  width: 100%;
  padding: 0.5rem 0;
  margin: 2rem auto;
}
#site-contents section.right a{
   margin:0 0 0 auto;
}
footer .footer-contents {
    width: 100%;
    margin: 0 auto;
    height: auto;
    margin-top: -0.2rem;
}
footer .footer-contents img{
  width: 50%;
}
#contents-wrap {
    padding: 1.5rem;
}
#contents-wrap .yellow-flame02::before{
  content: '';
	width: 25px;
	height: 100%;
	position: absolute;
  top:0;
  left:2rem;
}
#contents-wrap .yellow-flame02::after{
  content: '';
	width: 25px;
	height: 100%;
	position: absolute;
  top:0;
  right: 2rem;
}
#site-contents .flex-wrap {
    display: block;
}
}
  /*スマホ,ipad版スタート*/

  @media only screen and (max-width: 768px){
  .main-contents {
      padding-top: 0;
  }
  #site-header .drop-menu-list {
    background-color: unset;
    left: 0;
    opacity: 1;
    position: unset;
    top: 100%;
    transition: unset;
    visibility: visible;
    width: 100%;
    z-index: 1;
    padding: 0 1rem;
    z-index: 999;
}
#site-header .drop-menu-list li {
    text-align: left;
}
  #site-header button.drawer-toggle {
    padding-top: 1.5rem;
    padding-left: 1rem;
    z-index: 1000;
}
.drawer--left .drawer-hamburger, .drawer--left.drawer-open .drawer-nav, .drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0 !important;
    left: unset !important;
    z-index: 999;
}
.drawer--left.drawer-open .drawer-nav {
    width: 100%;
    padding-top: 4.1rem;
    padding-left: 1rem;
    background-image: url(../img/base/menu-inner-back.jpg);
    background-size: contain;
    background-repeat: repeat-y;
    background-position-x: right;
    z-index: 99;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    width: 100%;
    height: 2px;
    -webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
    transition: all .6s cubic-bezier(.19,1,.22,1);
    background-color: #fff !important;
    z-index: 999;
}
.drawer-hamburger-icon{
  z-index: 999;
}
.drawer-open .drawer-hamburger-icon {
    background-color: transparent !important;
}
 footer ul.menu-list {
    width: 40%;
    margin: 0;
    padding-right: 0;
    padding-top: 3rem;
}
#site-header ul.drawer-menu{
  max-width: 45%;
  padding-left: 1rem;
  margin: 0 0 0 auto;
}
#site-header .menu-item a {
    align-items: center;
    color: #fff;
    display: flex;
    height: 50px;
    justify-content: center;
    text-decoration: none;
    width: auto;
}
ul.menu-list a {
    color: #fff !important;
    font-size: 1rem;
    /* position: absolute; */
}
footer {
    background-size: contain;
    background-position: bottom;
    padding-top: 5rem;
    padding-bottom: 8rem;
}
 footer ul.menu-list a {
    color: #000 !important;
    font-size: 1rem;
    /* position: absolute; */
}
  nav.drawer-nav{
    background: transparent;
  }
  #site-header {
    width: 100%;
    position: fixed;
    z-index: 100;
}
.drawer-open .drawer-hamburger-icon {
    background-color: transparent;
    z-index: 999;
}
#site-header .header-titles {
    margin-left: 2rem;
}
  #site-header .header-logo {
    flex-basis: 35%;
}
#site-header .header-logo-buko {
    flex-basis: 29%;
}
#site-header .header-list-menu, #site-header .header-sub-menu {
    background: unset;
}
#site-header .header-sub-menu ul{
    display: block !important;
}
#site-header .header-list-menu a {
   display: block;
   text-align: left;
   font-size: 14pt;
   padding-top: 1rem;
}
footer .flex-wrap {
    display: block;
}
  }
/*base部分のPC版*/
    .sp-only {
        display: none !important;
    }
  .pc-only{
        display: block !important;
      }
/*base部分のスマホ版*/
@media only screen and (max-width: 428px) {
  .sp-only {
      display: block !important;
  }
.pc-only{
      display: none !important;
    }
    #site-contents .top-wrap img.top {
    padding-top: 0;
}
#site-header .header-titles-wrapper {
    height: 70px;
    z-index: 2;
}
#site-contents .content-wrap {
    max-width: 310px;
    margin: 0 auto;
}
footer .img {
    text-align: center;
}
footer ul.menu-list {
    margin: 0 auto;
}
footer section.center {
    max-width: 300px;
      margin: 0 auto;
    padding-top: 3rem;
    width: 45%;
}
#site-contents section.right{
   margin:0 auto;
}
#site-contents .back01 {
    background-image: url(../img/base/back01-sp.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 5rem 0;
}
  }
/*ipad版スタート*/
@media only screen and (max-width: 1024px) and (min-width: 429px){
  .sp-only {
      display: none !important;
  }
.pc-only{
      display: block !important;
    }
    #site-header .header-titles-wrapper div img {
    padding: 1rem;
}
    #site-header .header-icons {
      width: 100%;
      position: absolute;
      top: 10px;
      right:0;
      display: flex;
      justify-content: flex-end;
      justify-items: center;
}
#site-header .sp-only .header-icons-sp {
  display: flex;
  justify-content: center;
  justify-items: center;
}
#site-header .sp-only .header-icons-sp a{
  flex-basis: 22% !important;
}
#site-header .sp-only .header-icons-sp img{
  width:  22% !important;
}
section.button,
section.button02 {
    width: 35%;
    padding: 3rem 0;
    margin: 0;
    margin-left: 3rem;
}
footer .footer-contents {
    width: 100%;
    margin: 0 auto;
    background: #FFD921;
    height: 200px;
}
footer .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 700px;
    margin: 0 auto;
}
footer .flex-wrap .text {
    display: block;
}
footer section a.btn_01 {
    margin: 1rem 0;
}
#contents-wrap {
    padding: 1.5rem;
}
#site-contents .content-wrap .club .frame section a.btn_02 {
    margin: 0 0 0 auto;
}
}