@charset "UTF-8";

html{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}

body{color:#111;background:#fff;
font-family: 'Hiragino Kaku Gothic Pro','Meiryo','sans-serif';
font-size:16px;font-weight:normal;
margin:0;padding:0;}

.container{margin:0 auto;max-width:1200px;padding: 0 2.0rem;position:relative;}

img{max-width:100%;height:auto;}
img.round{border-radius:20px}
img.sml{background-size:contain;}

.ctr{text-align: center;}

.clear{clear:both;}

h1{font-size:12px;background:#0059d7;height:1rem;text-align:center;color:#fff;margin:0;padding:0;}

.course{background: #efefef;margin:10px 100px 30px 100px;padding:1px 10px 30px 10px;border-radius:10px;}


@media screen and (max-width:1024px) {
body{-webkit-text-size-adjust:none;}
h1{font-size:12px;background:#0059d7;height:1rem;text-align:center;color:#fff;margin:0;padding:0;}
.course{background: #efefef;margin:10px;padding:10px;border-radius:10px;}}


/*TopSpacer SMP only*/
@media screen and (max-width:1024px){
.topspacer{margin-top:150px;margin-bottom:-70px;}
}


/* row & col */

.row{display:flex;flex-direction:column;padding:0;width:100%;}

.col{display:block;flex: 1 1 auto;margin-left:0;
max-width:100%;width:100%;}


/* for PC row & col */

@media screen and (min-width:1025px) {
.row{display: flex;flex-direction: row;padding: 0;}

.col{margin-left: 4%;}

.col:first-child{margin-left: 0;}

.row .col.no1{flex: 0 0 30.6666666667%;max-width:30.6666666667%;}

.row .col.no2{flex: 0 0 22%;max-width:22%;}

.row .col.no3{flex: 0 0 74.0%;max-width:74.0%;}

.row .col.no4{flex: 0 0 100%;max-width:100%;margin-top:10px;}

.row .col.no5{flex:0 0 30%;max-width:100%;}

.row .col.no6{flex:0 0 auto;max-width:33%;}
}


/* for SMP row & col */

@media screen and (max-width:1024px) {
.row .col.no4{flex: 0 0 100%;max-width:70%;/*25%;*/}

.row .col.no1, .row .col.no7{max-width:70%;text-align:center;margin-left:auto;margin-right:auto;}

img.smll{width:100%;max-width:15% !important;height:auto;background-size:contain;}
}



/* header start */

@media screen and (min-width:1025px){
.header{display: flex;flex-direction: row;padding: 10px 0 0 0;}
}

@media screen and (max-width:1024px){
.header{display: flex;flex-direction: row;padding: 17px 0 0 12px;}
}

nav ul{display: flex;flex-direction: row;justify-content: space-around;
list-style:none;margin:0;}

nav li{flex: 1 0 auto;}


@media screen and (min-width:1025px){

/* ===== ナビ全体 ===== */
#topmenu {
    position: relative;
    z-index: 100;
}

.menu {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ===== メインメニュー ===== */
.menu > li {
    position: relative;
}

.menu > li > a {
    display: block;
    padding: 1px 15px;
    font-size: 15px;
    font-weight: bold;
    color: #111;
    text-decoration: none;
    background: #fff;
}

/* ホバー下線 */
.menu > li > a::after {
    content: '';
    display: block;
    height: 3px;
    background: #0059d7;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}

.menu > li > a:hover::after {
    transform: scaleX(1);
}

/* ===== サブメニュー（縦展開） ===== */
.submenu {opacity:0.8;
    position: absolute;
    top: 100%;
    left: 0;
    width: 400px;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;

    display: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ホバーで表示 */
.has-sub:hover .submenu {
    display: block;
}

/* サブメニュー項目 */
.submenu li a {position: relative;
    display: block;
    padding: 10px;
    font-size: 15px;font-weight:600;
    color: #111;
    text-decoration: none;

    /* ← はみ出し防止 */
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

/* ホバー */
.submenu li a:hover {
    /*background: #f5f5f5;*/
background:none;}

/* 下線（初期状態） */
.submenu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #0059d7;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s;
}

/* ホバー時 */
.submenu li a:hover::after {
    transform: scaleX(1);
}

}


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

.container{padding:0;}

/* hierarchy menu*/
#topmenu{z-index:100;overflow:visible;position:relative;}

#topmenu ul{list-style-type:none;text-align:left;}

/*#topmenu ul li ul{visibility:hidden;position:absolute;overflow:hidden;}*/
#topmenu ul li ul{visibility:visible;position:static;height:auto;
margin-top:-10px;}

#topmenu ul li ul li{height:auto;border:none;}

#topmenu ul li{float:left;margin-left:0px;}

#topmenu ul li:hover{position:relative; z-index:10;}

#topmenu ul li a{background:transparent;}

#topmenu ul li ul a{margin-left:20px;margin-top:0px;height:0;overflow:visible;}

.tmenu_yaji{color:#ffec07;font-weight:bold;margin-right:5px;}


/* overlay */
#topmenu{background:#0059d7;opacity: 0.8;}

.parrent_overlay{position:relative;}

.child_overlay{position:absolute;width:100%;}

#topmenu li{border-bottom:1px dotted #ccc;}

#topmenu li a{display:inline-block;background-color:transparent;position: relative;-webkit-tap-highlight-color: rgba(0,0,0,0);color: #fff;
font-weight:normal;/*line-height: auto !important;*/line-height: 45px !important;
font-size:14px;text-decoration: none;margin-top:0px;margin-left:0px;}

#topmenu li a:hover{color:#fff;}

.header{margin-bottom:18px;}

.header #open,#close{position: absolute;top:20px;right:12px;}

#topmenu ul{flex-direction: column;}

.header li{padding-top: 0;}



#navi{display: none;}
}



/* 4/23対応 */

@media screen and (max-width:1024px) {
#open{display: block;
background: url(../img/smp_menu0.gif);background-repeat: no-repeat;background-size: contain;width: 88px;height: 25px;border: none;position: absolute;
top: 27px;right: 20px;}

#close{display: block;
background: url(../img/smp_menu1.gif);background-repeat: no-repeat;background-size: contain;width: 84px;height: 23px;border: none;position: absolute;
top: 27px;right: 20px;}

}

/* for iPad */
@media screen and (min-width:1025px){

.header{
    display: flex;
    align-items: center;
}

.logo{
    width: 526px;
    height: auto;
}

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

.header{
    text-align: center;
    margin-bottom: 10px;
}

.logo{
    width: 90%;
    max-width: 400px;
    height: auto;
}

}


/* header end */


/*PCは左右ボックス、SMPは上下ボックス*/
@media screen and (min-width: 768px){
div.content_left{float:left;width:48%;background:#fff;margin-bottom:10px;margin-left:0px;margin-right:auto;margin-top:10px;}

div.content_right{float:right;width:48%;background:#fff;margin-bottom:10px;margin-left:auto;margin-right:10px;margin-top:10px;}
}

@media screen and (max-width:767px){
div.content_left, div.content_leftt, div.content_right{width:99%;background:#fff;margin-bottom:10px;margin-left:auto;margin-right:auto;margin-top:10px;}
}


/* mainpic */
.mainpic{margin:0;padding:0;font-size:0;line-height:0;}

@media screen and (min-width:1025px) {
.mainpic img{width:100vw;}
}

@media screen and (max-width:1024px) {
.mainpic img{width:767px;height:350px;object-fit:cover;object-position:85% 15%;margin-top:72px;}
}

@media screen and (max-width:1024px) {
.mainpic img.top{width:767px;height:350px;object-fit:cover;object-position:75% 25%;margin-top:72px;}
}

@media screen and (max-width:1024px) {
.mainpic img.no1{width:767px;height:350px;object-fit:cover;object-position:50% 50%;margin-top:72px;}
}

@media screen and (max-width:1024px) {
.mainpic img.no2{width:767px;height:200px;object-fit:cover;object-position:45% 55%;margin-top:72px;}
}

@media screen and (max-width:1024px) {
.mainpic img.no3{width:767px;height:200px;object-fit:cover;object-position:0% 100%;margin-top:72px;}
}

@media screen and (max-width:1024px) {
.mainpic img.no4{width:767px;height:350px;object-fit:cover;object-position:0% 100%;margin-top:72px;}
}



/*contents*/

main{margin: 10px 0 0 0;}

main span{background:linear-gradient(transparent 90%, #ffec07 0%);}

main span.bbrd{background:transparent;font-size:16px;color:#a22041;font-weight:600;}

main span.ubrd{background:transparent;text-decoration:underline;text-decoration-color:#a22041;}


.section{margin:15px 0;padding:0 0;}

main a:link, main a:visited, main a:active{text-decoration:none !important;color:#0035d7;}
main a:hover{text-decoration:underline !important;color:#0035d7;}

.borderline{margin-bottom:2em;border-bottom:2px solid #005390;}

.narrowborderline{width:70%;margin-left:auto;margin-right:auto;margin-bottom:2em;border-bottom:2px solid #005390;}


@media screen and (min-width:1025px/*768px*/){
p{font-size:16px;margin:10px 0;padding:0;color:#111;text-decoration:none;line-height:2.0;}

strong{font-size:15px;color:#111;
font-weight:600;}

code{font-size:14px;}

li{font-size:16px;color:#005390;text-decoration:none;line-height:2.0;
list-style-position:inside;}

li span{color:#111;background:transparent;}



.contents{margin:10px 100px 0 100px;}

}


/* table */
table{border-collapse:collapse;margin-right:auto;margin-left:auto;}
td{vertical-align:middle !important;height:auto !important;font-weight:300;text-align:center;background:#fff;}
td.top{text-align:center;background:#dfffff;}

@media screen and (min-width: 1025px) {
table{width:80%;}
td{font-size:16px;padding:10px 0;border:2px solid #222;}

}


@media screen and (max-width: 1024px) {
table{width:100%;}
.last td:last-child{width:100%;}

td{font-size:14px !important;border-bottom:none;display: block;width:100%;
border-left: none;border-right: none;border-top: none;background:#fff;}

.table_midashi{background: #ffdfdf;}

}


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

p{font-size:14px;margin0;padding:0;color:#111;text-decoration:none;line-height:1.5;margin:10px;}

strong{font-size:14px;color:#111;text-decoration:}

code{font-size:12px;}

li{font-size:14px;color:#005390;text-decoration:none;line-height:2.0;
list-style-position:inside;margin-left:5px;}

li span{color:#111;background:transparent;}

}

@media screen and (min-width:1025px){
p.topp{font-size:18px;margin0;padding:0;color:#005390;font-weight:600;line-height:200%;}
}

@media screen and (max-width: 1024px){
p.topp{font-size:15px;margin0;padding:0;color:#005390;font-weight:600;line-height:200%;}
}

@media screen and (min-width:1025px){
h2{font-size:20px;margin:30px 0 0 0;padding:0;color:#008b51;text-decoration:underline;}
.contents li{font-size:20px;line-height:250%;color:#212121;font-weight:bold;}
.contents ul{width: fit-content;           /* コンテンツの幅に合わせる */
      margin: 0 auto;               /* 中央寄せ（左右のmarginを自動） */
      text-align: left;             /* リスト項目の左寄せ */
      padding: 0;                   /* デフォルトの余白をリセット */
      list-style-position: inside; /* マーカーをテキストの内側に */
list-style-type:none;}
}

@media screen and (max-width: 1024px){
h2{font-size:15px;margin:20px 0 0 0;padding:0;color:#008b51;text-decoration:underline;text-align:center;}
.contents ul{list-style-position: inside;width: fit-content;list-style-type:none; }
.contents li{font-size:16px;line-height:200%;color:#212121;font-weight:normal;}
}

@media screen and (min-width: 1025px){
h3{font-size:18px;margin:30px 0 0 0;padding:0;color:#005390;text-decoration:none;}
}


@media screen and (max-width:1024px){
h3{font-size:13px;margin-top:15px;padding:0;color:#005390;text-decoration:none;text-align:center;}
}

@media screen and (min-width: 1025px){
h4{font-size:16px;margin0;padding:0;color:#2e251c;text-decoration:none;}
}

@media screen and (max-width:1024px){
h4{font-size:13px;margin0;padding:0;color:#2e251c;text-decoration:none;}
}

.threebox p, .onebox p{line-height:180% !important;}

.threebox{width:100%;height:auto;
background:linear-gradient(#aca091, #fff);border:1px solid #d5cec4;
border-radius:10px;display:block;margin:0 20px 10px 20px;padding:10px;}

@media screen and (max-width:1024px){
.threebox{width:70%;height:max-content;margin:10px;margin-left:auto;margin-right:auto;}
}

@media screen and (min-width:1025px){
.onebox{width:auto;height:auto;
background:linear-gradient(#fff,#888);border:1px solid #747474;
border-radius:10px;margin:0 20px;padding:10px;}
}

@media screen and (max-width:1024px){
.onebox{width:70%;height:auto;margin:0 auto;background:linear-gradient(#fff,#888);border:1px solid #747474;
border-radius:10px;}
}



/* footer */

footer{background-color:#0059d7;padding:20px 0;margin:0;
background-repeat:no-repeat, no-repeat;
background-position:bottom left, bottom right;}

footer strong{color:#fff;}

footer ul{list-style-type:none;margin:0 auto;}

footer li{font-size:12px;margin:0;}

@media screen and (max-width: 1024px){
footer li{font-size:12px;margin:10px 0;}
footer a:link, a:visited, a:active, a:hover{color:#fff;text-decoration:none;text-decoration:none;}
footer p{color:#fff;font-size:13px;line-height:130%;}}

@media screen and (min-width:1025px){
footer a:link, a:visited, a:active{color:#fff;text-decoration:none;}
footer a:hover{color:#dcdcdc;text-decoration:underline;}
footer p{color:#fff;font-size:15px;line-height:160%;font-weight:bold;margin-left:20px;}
}

.copyright{text-align:center;color:#fff;font-style:italic;font-size:11px;
margin:2em 0 0 0;padding:0;}


/* gototop button */

#gototop{position: fixed;bottom:10px;right:0px;}

#gototop a{display: block;background: #111;color: #fff;width: 50px;
padding: 10px 5px;text-align: center;border-radius:10px;opacity: 0.4;}

#gototop a:hover{background: #111;}

.reds{color:#a22041;}
span.gold{color:gold;}
.ystar{color:#ffec07;background:transparent;margin-right:10px;}
.triangle{color:#005390;background:transparent;margin-right:5px;}

@media screen and (max-width: 1024px){
.ifrm-container
{width:90%;height:200px;overflow:auto;
-webkit-overflow-scrolling:touch;
display: inline-block;margin:0 0 20px 0;}}

@media screen and (min-width: 1025px){
.ifrm-container
{width:70%;height:200px;overflow:auto;
display: inline-block;margin:0 0 20px 0;padding:0;}}



.ifrm
{width:100%;height:100%;border:none;display:block;}

#koushin{text-align:left;background:#efefef;
line-height:200%;margin:0;padding:0;}

.midcont{margin:0;padding-bottom:20px;background:linear-gradient(#fff,#fffddf);}

.btmcont{margin:0;padding-bottom:20px;background:linear-gradient(#fff, #dff2ff);}

.reversespacer{margin-top:20px;}
.spacer{margin-bottom:20px;}


/* mp4 */

.video-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 20px;
  aspect-ratio: 16 / 9;
  position: relative;
}

.video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 768px){
.information{width:90%;margin-left:auto;margin-right:auto;}
}


.ggmap {margin-right:auto;margin-left:auto;
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}