@charset "utf-8";

/*
Mainタグ内のデザインを記述する。

wysiwygエディターでも使用する。

各ページ固有のデザイン（トップページなど）は、各ページのヘッダー内の<style>タグ内に記述する。

wysiwygエディターで使用するタグには、『ID』や『クラス』を振らないように。
wysiwygエディターを使用しないページ（エリア）は『ID』や『クラス』を設定して良い。

wysiwygエディター使用タグ	h1, h2, h3, p, strong, em, u, ol, ul, li, a, img
*/


/* セクショニング
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section{ margin-bottom: 40px;}
article{}
address{ font-style:normal;}
area { outline:none; }

.whiteBox{ background: #fff;
}

.wrapBox{
width:100%;
max-width:1040px;
margin:0 auto;
padding: 80px 1em 60px;
}


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

}

/* .wraper{ padding:100px 0; }
.grBox{ background:#fff; padding:100px 0; }


.wrapBox{ width:100%; max-width:1040px; margin:0 auto; }

.contentBox,
.wraper section section{ margin: 0 auto 50px; }

.sectBox{ margin-bottom: 40px;}

@media screen and (max-width: 1040px) {
.wraper{ padding: 50px 1em;}
section{ margin: 25px auto; }
} */





/* 見出し
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* #pagetitle { margin:1em auto; }
#pagetitle h1 { font-size:2em; } */
.head00{
color: #fff;  font-size: 20px; text-align: center;
 display: flex; justify-content: center; align-items: center; min-height: 290px; background-size: cover;background-blend-mode: multiply;background-color: rgba(0, 0, 0, 0.4);
background-image: url(../assets/img/headImg00.jpg);
}

main h1 {
}


main h2{
font-size: 32px;
text-align: center;
margin-bottom: 1em;
}
main h2 span{
display: inline-block;
border-bottom: 3px solid #f46d00;
padding-top: 5px;
}

main h3 {
font-size: 28px;
margin-bottom: .6em;
color: #f46d00;
/* border-left: 5px solid #f46d00;
padding-left: 5px; */

}

main h4 {
font-size: 22px;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
main h5 {
font-size: 20px;

}


/* テキスト インライン
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main p { margin:0 0 1em; padding:0.2em 0;
font-size: 18px;
line-height: 1.7;
}

main strong { color:var(--accent_color); }
main em { font-style:normal; font-weight:bold; color:var(--main_color); }
main small { font-size:78%; font-weight:normal; }


.R { text-align:right; }
.L { text-align:left; }
.C { text-align:center; }


/* リンク
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main a { border:none; outline:none; color:var(--link_color); text-decoration:none; }
main a:hover { text-decoration:none; opacity:0.6; }
main a img:hover { opacity:0.8; filter:alpha(opacity=80); }


/* リスト
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main ul, ol { padding:0 2em 1em; }
main dt { font-weight:bold; }
main dd { margin-left:1em; }


/* 表
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table { border-collapse:collapse; width:98%; margin:1em auto; }
th, td { padding:0.5em; border:1px solid var(--main_color); }
th { background:#eee; color:var(--main_color); }
td {  }

table.table01{
margin: 0;
}
table.table01 th,
table.table01 td{
text-align: left;
vertical-align: top;
padding: 1em 0;
border: none;
border-bottom: 1px solid #f46d00;
}
table.table01 th{
width: 6.5em;
background: none;
}

table.table02{
margin: 0;
font-size: .9em;
width: auto;
}
table.table02 th,
table.table02 td{
background: none;
}


/* ableLesson */
.tableLesson tr th:first-child {
width: 120px;
}

table.tableLesson th{
width: 210px;
text-align: center;
font-size: 12px;
}
table.tableLesson td.tL{
text-align: left;
}
.noWrap{ display: inline-block;}
.tableLesson th.w66{
width: 420px;}
.tableLesson th.w99{
width: 630px;}

table.tableLesson .th01 th{
width: 210px;
}
.tableLesson tr:first-child th:not(:first-child) {
}


.tableLesson02 th{
font-size: 12px;
text-align: center;
}
.tableLesson02 .tL{ text-align: left;}





/* 画像
–––––––––––––––––––––––––––––––––––––––––––––––––– */
figure { margin-bottom: 1em;}
figcaption { text-align: center;}




/* flexBox
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.flexBox{ display: flex; }
.between{ justify-content:space-between;}

.flexBox02{
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
.flexBox02 .txtBox{
width: 48%;
}
.flexBox02 figure{
width: 48%;
}
.flexBox02 figure img{
width: 100%;
}
@media screen and (max-width: 1040px) {
.flexBox02{
display: block;
}
.flexBox02 .txtBox{
width: 100%;
}
.flexBox02 figure{
width: 100%;
}
}

.flexBox02 .flexBox02{
width: 49%;
background: #fff;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.flexBox02 .flexBox02 figure{
width: 40%;
}
.flexBox02 .flexBox02 figure img{
width: 100%;
}
.flexBox02 .flexBox02 div{
width: 55%;
}
.flexBox02 .flexBox02 div h4{
font-size: 18px;
margin-bottom: 5px;
}
@media screen and (max-width: 1040px) {
.flexBox02 .flexBox02{
display: flex;
width: 100%;
}
}


.flexBox0202{
display: flex;
justify-content:space-between;
flex-wrap: wrap;
padding: 5px 0;
}
/* .flexBox0202 h3{
font-size: 22px;
} */
.flexBox0202 figure{
width: 23%;
}
.flexBox0202 figure img{
width: 100%;
}
.flexBox0202 section{
margin-bottom: 2em;
}
.flexBox0202 .txtBox{
width: 75%;
display: flex;
flex-direction: column;
}
.flexBox0202 .txtBox section{
padding: 4px 0 0;
margin-bottom: 10px;
}

.flexBox0202 .txtBox .tag{
margin-bottom: 1em;
}
.flexBox0202 .txtBox .tag span{
display: inline-block;
font-size: 14px;
border: 1px solid #0040cb;
border-radius: 4px;
padding: 2px 1em;
margin: 0 5px 10px 0;

}
main .flexBox0202 .txtBox h3{
color: #000;
margin-bottom: 10px;
}
.flexBox0202 .btnBox{
margin-top: auto;
margin-top: 1em;
margin-bottom: 10px;
width: 100%;
}
.flexBox0202 .btnBox a{
padding: 10px;
}

main .flexBox0202 .txtBox h4{
margin-bottom: 10px;
}

@media screen and (max-width: 1040px) {
.flexBox0202{
display: block;
}
.flexBox0202 .txtBox{
width: 100%;
}
.flexBox0202 figure{
width: 100%;
}
}


.flexBox03{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flexBox03 section{
background: #fff;
width: 32%;
}
@media screen and (max-width: 1040px) {
.flexBox03{

}
}


/* courseBox
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.courseBox{ display:flex; flex-wrap:wrap; justify-content:space-between; }
.courseBox a{ display:block; width: 23%; margin: 0 1% 20px; text-align: center; color: #000; }
.courseBox a span{ font-size: 12px; padding: 4px 1em; display: block; border: 1px solid #ccc; border-radius: 20px;}
.courseBox::after{ content:""; display: block; width:23%; margin: 0 1% 20px;}
.courseBox::before{ content:""; display: block; width:23%; margin: 0 1% 20px;order: 1;}
.courseBox a img{ width:100%; max-width: 540px;}

@media screen and (max-width: 1040px) {
.courseBox a,
.courseBox::after{ width: 48%;}
}



/* btnBox
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pageLink{
text-align: center;
margin: 2em auto 0;}
.pageLink a{
display: inline-block;
background: #fff;
border: 1px solid #ccc;
padding: 1em;
margin-bottom: 10px;
border-radius: 400px;
white-space: nowrap;
text-align: center;
width: 24%;
}
@media screen and (max-width: 1280px) {
.pageLink a{
width: 48%;
}
}
@media screen and (max-width: 640px) {
.pageLink a{
width: 100%;
}
}

.map a{
display: block;
background: #fff;
border: 1px solid #ccc;
padding: 5px 1em;
border-radius: 400px;
white-space: nowrap;
text-align: center;
}
.map a:link{
color: #000;
}

/*------*/
.btnBox{ margin:20px auto 0; }
.btnBox a{ display:block; width: 100%; margin: 0 auto 1em; padding: 2em; text-align: center; background: #fff; border:1px solid #ccc; }
.btnBox a:link,
.btnBox a:visited{ color:#333; font-size:14px; }
.btnBox a:hover{ background:#ccc; color:#000; opacity:1; }

.btnBox2{ max-width: 860px; margin:50px auto 0; display:flex; justify-content:space-between; }
.btnBox2 a{ display:block; width: 100%; max-width: 410px; margin: 0 10px; padding: 2em; text-align: center; background: #fff; border:1px solid #ccc; }
.btnBox2 a:link,
.btnBox2 a:visited{ color:#333; font-size:14px; }
.btnBox2 a:hover{ background:#ccc; color:#000; opacity:1; }

.btnBox3{ margin:20px auto 0;}
.btnBox3 a{ display:block; width: 100%; margin: 0 auto 1em; padding: 2em; text-align: center; background: #f46d00; border-radius: 400px; }
.btnBox3 a:link,
.btnBox3 a:visited{ color:#fff; font-size:14px; }
.btnBox3 a:hover{ opacity:.6; }



/*------*/
.btnTag a{
display: inline-block;
padding: 0 5px;
background: #3d246d;
color: #fff;
font-size: 12px;
}


.shopTag{
font-size: 12px;
}
.shopTag a{
display: inline-block;
margin-bottom: 5px;
padding: 2px 1em;
border-radius: 200px;
color: #fff;
pointer-events: none;
}

.shopTag a.tag01{ background: #740069;}
.shopTag a.tag02{ background: #007c36;}
.shopTag a.tag03{ background: #bf7600;}
.shopTag a.tag04{ background: #005293;}




/* bnBox
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bnBox{ display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.bnBox a{ display: block;
width: 19%;
height: auto;
margin: 0 0 10px;
}
.bnBox::after {
    content: "";
    display:block;
    width:19%;
}
.bnBox::before {
    content: "";
    display:block;
    width:19%;
    order: 1;
}

.bnBox a img{
border: 1px solid #ccc;
width: 100%;
max-width: 260px;
margin: 0;
padding: 0;
}

@media screen and (max-width: 640px) {
.bnBox a{
width: 48%;
}
}





/* list
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.komeList {
list-style: none;
padding: 0;
margin-bottom: 1em;
}
.komeList li {
display: flex;
}
.komeList li::before {
content: "※";
margin-right: .25em;
}

.ulList{ margin: 0 2em 1em;}
.ulList li{ list-style: disc;}

.maruList  {
  margin: 0 0 1em;
  padding: 0
}
.maruList li  {
  list-style: none;
  padding-left: 1em;
  text-indent: -1em;
}


/* DL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*------*/
.dateDL{
display: flex; align-items: flex-start; flex-wrap: wrap; font-size: 14px; margin-bottom: 2em;}
.dateDL dt,
.dateDL dd{margin: 0; padding: 5px 1em;}

#YML .dateDL dt { background: #1a5fa6;}
#SOL .dateDL dt,
#SOL2 .dateDL dt { background: #fa502c;}

.dateDL dt{ width: 30%; text-align: center; margin-bottom: 1em;color: #fff; border-radius: 100px; }
.dateDL dd{ width: 70%; margin-bottom: 1em;}
@media screen and (max-width: 1040px) {
.dateDL dt,
.dateDL dd{ width: 100%; text-align: center;}

.dateDL dt{ margin: 0;}
.dateDL dd{ margin-bottom: 2em;}
}






/* tag */
h4.YML,
h4.SOL{
text-align: center;
font-size: 18px;
padding: 10px 1em;
}
.YML{
color: #fff;
background: #1a5fa6;
margin-bottom: 1em;
border-radius: 400px;
}
.SOL{
color: #fff;
background: #fa502c;
margin-bottom: 1em;
border-radius: 400px;
}


.cassette{
background: #fff;
border: 1px solid #ccc;
padding: 1em;
margin-bottom: 1em;
border-radius: 8px;
}
.cassette p{
font-size: 16px;
}

.cassetteYML section,
.cassetteSOL section{
margin-bottom: 10px;
}
.cassetteYML h5,
.cassetteSOL h5{
font-size: 19px;
}


.cassetteYML table,
.cassetteSOL table{
margin: 0 0 1em;
width: auto;
font-size: 14px;
}

.cassetteYML table th,
.cassetteYML table td,
.cassetteSOL table th,
.cassetteSOL table td{
padding: 4px;
border: 1px solid #aaa;
}

.cassetteYML table td,
.cassetteSOL table td{
text-align: center;
}

.cassetteYML table th{
background: rgba(26, 95, 166, .1);
}
.cassetteSOL table th{
background: rgba(250, 80, 44, .1);}










/*------------------------otherStyle*/
.bread{ margin: 1em;}
.bread a{}

.mb2{ margin-bottom: 2em;}
.mb4{ margin-bottom: 4em;}

.PC{ display: block; }
.SP{ display: none; }

.fitImg{ margin: 1em auto;}
.fitImg img{ width: 100%;}

.B{ font-weight: bold; }
.kome{ margin: 0; padding: 0; text-indent: -1em; margin-left: 1em; font-size: 0.9em; }
.tC{ text-align: center; }
.tL{ text-align: left;}
.tR{ text-align: right; }
.red{ color: #c90000;}

.fontS{ font-size: .9em;}
.fontSS{ font-size: .8em;}
.fontSSS{ font-size: .6em;}
.fontL{ font-size: 1.2em;}

.noEvent{ pointer-events: none; }

.clear { clear:both; }
.clear hr { display:none; }
.cf:after{/*for modern browser*/
    content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden;}


@media screen and (max-width: 1040px) {
.PC{ display: none; }
.SP{ display: block; }


}