@charset "utf-8";

body {
    line-height: 1;
    height: 100%;
    width: 100%;
    font-weight: 400;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', sans-serif;
    font-weight: 500;
}

#container {
    overflow: hidden;
}
.gothic,
#container main .detail h2,
#container main .detail h3,
#container .detaillayout h4,
.detaillayout .namet{
    font-family: 'Noto Sans JP',"ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ', Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, Osaka, "ＭＳ Ｐゴシック"!important;
}
#header2{
    background: #6ba207 url(../../international/sec30.png) center 30% no-repeat;
    margin-bottom: 80px;
    display:block;
    height:360px;
    position:relative;
    z-index:899;
}
#header2 #logo{
	padding:20px;
	width:290px;
    box-sizing:border-box;
}
#header2 #title{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    opacity:0;
    transition-duration: 2s;
    transition-delay: 0s;
    margin-top:50px;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); 
}
#header2 #title p.course{
    font-family: 'Noto Serif JP', "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 400;
    font-size:18px;
    margin-bottom:8px;
    color:#fff;
    text-align:center;
}
#header2 #title h1{
    font-size:41px;
    color:#fff;
    font-weight:500;
    display:block;
    padding:10px 20px;
    font-family: 'Noto Serif JP', "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 600;

}
#header2 #title.view{
    margin-top:0px;
    opacity:1;
}
#gakkalink {
    position: absolute;
    position: fixed;
    right: 10px;
    z-index:999;
    top: 10px;
    opacity: 0;
    margin-right: 30px;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
#teacherlist {
    position: absolute;
    position: fixed;
    right: 270px;
    z-index: 999;
    top: 10px;
    opacity:0;
    margin-right: 30px;
    transition-duration: 1s;
    transition-delay: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
#gakkalink.fadein,
#teacherlist.fadein {
    margin-right:0;
    opacity:1;
}
#gakkalink a,
#teacherlist a {
    display: inline-block;
    background: #000;
    padding: 18px 80px 20px 20px;
    color: #fff;
    position: relative;
    font-size: 15px;
    transition: all 0.15s ease-in-out!important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

#teacherlist a{
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #00b275 100%);
}
#teacherlist a span.txt {
    position:relative;
    z-index:1;
    width:100%;
    text-align:center;
}
#gakkalink a:hover {
    background:#222;    
}
#teacherlist a:hover{
    background-image: linear-gradient(60deg, #312976 0%, #225e94 37%, #238aa7 65%, #008e5e 100%);
}
#teacherlist a:hover,
#gakkalink a:hover {
    margin-top:-3px;  
}
#gakkalink a span,
#teacherlist a span.arrow {
    position: absolute;
    right: 14px;
    top: 30%;
    z-index:1;
}
#gakkalink a span img,
#teacherlist a span img {
    width: 20px;
    max-height:40px;
}
main{
    margin-bottom:50px;
}


@media screen and (max-width:768px) {
    #teacherlist {
        right:50%;
        top: 93%;
        opacity: 0;
        width:50%;
        margin-right: 0px;
        margin-top: 0px;
        z-index: 999;
        border-right:solid 1px #666;
    }
    #gakkalink {
        right: 0px;
        top: 93%;
        opacity: 0;
        width: 50%;
        margin-right: 0px;
        margin-top: 0px;
        z-index: 999;
    }
    #gakkalink:hover {
        right:0px;
    }
    #gakkalink.fadein {
        margin-top: 0px;
        opacity: 1;
    }
    #teacherlist a,
    #gakkalink a {
        display: block!important;
        
        border:none;
        padding: 18px 80px 20px 20px;
        color: #fff;
        position: relative;
        font-size: 14px;
        transition: all 0.25s ease-in-out;
    }
    #gakkalink a{
        background: #000;
    }
    #teacherlist a:hover,
#gakkalink a:hover {
    margin-top:0px;  
}
}

@media all and (-ms-high-contrast:none) {
    #gakkalink a span {
        display: block;
        height: 50px;
    }
}

@media all and (-ms-high-contrast:none) {
    #teacherlist,
    #gakkalink {
        opacity: 1;
    }
}
@media screen and (max-width:468px){
    #teacherlist a,
    #gakkalink a {
        font-size:12px!important;
        padding: 18px 30px 20px 10px;
    }
}


#header #logo img,
#footer #logo2 img{
	width:100%;
	height:auto;
}/*
#naiyo .box h2,
#naiyo .box .namet{
    font-family: 'Noto Sans JP',"ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ', Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, Osaka, "ＭＳ Ｐゴシック"!important;
    font-weight:600;
}
#naiyo .box a .links,a{
    transition: all 0.25s ease-in-out;
}
*/
#container #title{
    display:table;
    margin:30px auto 30px auto;
}







#cate{
margin:0px auto;
width:80%;
/*
    display:table;
    left:50%;
    transform:translateX(-50%);
    position:absolute;
    bottom:-50px;*/
}
#cate ul{
    display:table;
    margin:0px auto 30px auto;

}
#cate li{
    display:table-cell;
    text-align:center;
    padding:0 5px;
}
#cate li a br{
    display:none;
}
#cate li a{
    color:#fff;
    display:block;
    line-height:1.4;
    padding:10px 20px 14px 20px;
    border-radius:5px;
    background:#fff;
    font-weight:500;
    cursor: pointer;
    font-size:16px;
    border:solid 1px rgba(255,255,255,0);
    box-shadow:1px 1px 6px rgba(0,0,0,0.5);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
#cate li a:hover{
    /*transform:translate(0px,-5px);*/
}
#cate li a.view{
    border:solid 1px rgba(255,255,255,1);
}

#cate li:nth-child(1) a:hover,
#cate li:nth-child(1) a.view{
    background:rgba(0,112,192);
    color:#fff;
}


#cate li:nth-child(2) a:hover,
#cate li:nth-child(2) a.view{
    background:rgba(255,102,153);
    color:#fff;
}

#cate li:nth-child(3) a:hover,
#cate li:nth-child(3) a.view{
    background:rgba(255,102,0);
    color:#fff;
}
#cate li:nth-child(4) a{
    background:#fff;
    color:#111;
}
#cate li:nth-child(4) a:hover,
#cate li:nth-child(4) a.view{
    background:rgba(80,80,80);
    color:#fff;
}
#cate li:nth-child(1) a,
#cate li:nth-child(2) a,
#cate li:nth-child(3) a,
#cate li:nth-child(4) a{
    background:#fff;
    color:#111;
}
#cate li:nth-child(5) a{
    background:#ddd;
    color:#111;
}
#header2.detail #cate li:nth-child(1) a:hover,
#header2.detail #cate li:nth-child(1) a.active{
    background:rgba(0,112,192);
    color:#fff;
}
#header2.detail #cate li:nth-child(2) a:hover,
#header2.detail #cate li:nth-child(2) a.active{
    background:rgba(255,102,153);
    color:#fff;
}
#header2.detail #cate li:nth-child(3) a:hover,
#header2.detail #cate li:nth-child(3) a.active{
    background:rgba(255,102,0);
    color:#fff;
}
#header2.detail #cate li:nth-child(4) a:hover,
#header2.detail #cate li:nth-child(4) a.active{
    background:rgba(80,80,80);
    color:#fff;
}
/*
#naiyo .course{
    color:#fff;
    display:inline-block;
    padding:5px 10px;
    float:right;
    font-size:12px;
}*/
.i01{
    background:rgba(0,112,192);
}
.i02{
    background:rgba(255,102,153);   
}
.i03{
    background:rgba(255,102,0);
}
/*
#naiyo{
    display:flex;
    max-width:1200px;
    margin:0px auto;
  
    justify-content: center;
    flex-wrap:wrap;
}
#naiyo img{
    width:100%;
    height:auto;
}
#naiyo .box{
    width:33.3%;
    display:flex;
    opacity:0;
    box-sizing:border-box;
    padding-bottom:18px;
    padding-right:5px;
    padding-left:5px;

}
#naiyo .box.view{
animation-name: fadeInAnime;
opacity:0;
animation-fill-mode:forwards;
animation-duration:1s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0.1s;
animation-direction:normal;
}
*//*
animation-fill-mode:forwards;
forwards→元の状態に戻らずアニメーション最後の状態を維持
backwards→アニメーションの最初の状態に戻る
both→backwardsとforwardsの両方の状態を適用

animation-iteration-count:1;
infinite→無限に再生を繰り返す
数値→数値で再生回数を指定する（初期値は1）
*/




@keyframes fadeInAnime{
    0% {
      opacity: 0;
      transform:translateY(50px);
    }
  
    100% {
      opacity: 1;
      transform:translateY(0px);
    }
  }
/*
#naiyo .box a{
    color:#111;
    padding:10px 20px;
    box-sizing:border-box;
    border:solid 1px #ccc;
    border-radius:5px;
}
#naiyo .box a:hover{
    border:solid 1px #ccc;
    display:block;
    transform:translate(0px,-5px);
}
#naiyo .box h2{
    font-weight:600;
    font-size:18px;
    line-height:1.5;
    clear:both;
   padding-top:20px;
    margin-bottom:14px;
}
#naiyo .box .namet{
    font-weight:500;
    font-size:18px;
    line-height:26px;
    float:left;
    letter-spacing: 5px;
}
#naiyo .box .namet.mini{
    letter-spacing: 0px;
}
#naiyo .box .links{
    float:right;
    font-size:14px;
    padding:10px 0 5px 0;
    margin-right:5px;
    display:table;
    border-bottom:solid 1px #222;
}
#naiyo .box .links span{
    background: url(../images/chevron_right_black_36dp.svg) left no-repeat;
    width:15px;
    height:10px;

    display:inline-table;
}
#naiyo .box a:hover .links{
    border-bottom:solid 1px #fff;
    margin-right:0px;
}
#naiyo .box dl,
#container .detaillayout .txt dl{
    overflow:hidden;
    padding-top:14px;
    display:table;
    clear:both;
    font-size:12px;
}
#naiyo .box dl dt,
#container .detaillayout .txt dl dt{
   
    width:6em;
    text-align:center;
    padding:5px;
    line-height:1.4;
    background:#eee;
    border-radius:5px;
}
#naiyo .box dl dt,
#naiyo .box dl dd,
#container .detaillayout .txt dl dt,
#container .detaillayout .txt dl dd{
    display:table-cell;
    vertical-align:middle;
}
#naiyo .box dl dd,
#container .detaillayout .txt dl dd{
    font-size:14px;
    line-height:1.4;
    padding-left:10px;
}*/

#container main .detail{
    max-width:1200px;
    margin:0px auto;
}
#container main .detail h2.catetitle{
    font-size:24px;
    border-bottom:solid 1px #ccc;
    padding-bottom:14px;
    padding-left:0px;
    position:relative;
}
#container main .detail h2.catetitle .icon{
    background:rgba(255,102,0);
    display:block;
    left:0px;
    top:-2px;
    height:30px;
    width:5px;
    vertical-align:middle;
    margin-right:10px;
    border-radius:5px;
    float:left;
}
#container main .detail.c02 h2.catetitle .icon{
      background:rgba(255,102,153);   
}
#container main .detail.c01 h2.catetitle .icon{
    background:rgba(0,112,192);
}

#container main .detaillayout{
    display:flex;
}
#container main .detaillayout .photo{
    width:30%;
}
#container main .detaillayout .photo img{
    width:100%;
    height:auto;
}
#container main .detaillayout .txt{
    width:70%;
    padding-top:30px;
    box-sizing:border-box;
    padding-left:30px;
}
#container .detaillayout h3{
    font-size:24px;
    font-weight:600;
    margin-bottom:14px;
    line-height:1.6;
}
#container .detaillayout .txt dl{
    margin-bottom:24px;
}
#container .detaillayout h4{
    color:rgba(255,102,0); 
    font-size:14px;
    margin-top:14px;
    margin-bottom:14px;
    font-weight:600;
}
#container .detail.c01 .detaillayout h4{
    color:rgba(0,112,192);
}
#container .detail.c02 .detaillayout h4{
    color:rgba(255,102,153);   
}

#container .detaillayout .namet{
    font-weight:500;
    font-size:20px;
    line-height:26px;
    color:#000;
    letter-spacing: 5px;
}
#container .detaillayout .namet.mini{
    letter-spacing: 0px;
}
#container .detaillayout p{
    line-height:1.6;
    margin-bottom:0.5em;/*
    word-break: break-all;*/
}
#container .detaillayout p a{
    color:#000;
    word-break: break-all;
}
#container .detaillayout p a:hover{
    text-decoration:underline;
}
#container .detaillayout .keywords{
    margin-top:20px;
    display:flex;
    flex-wrap:wrap; line-height:1.6;
    list-style-type: none;
}
#container .detaillayout .keywords li:before{
    content:"#";
}
#container .detaillayout .keywords li{
    padding-right:0.8em;
    color:#666;
    line-height:1.6;
}
#container main .detail dl.nextprev{
    display:table;
    margin:50px auto 0 auto;
}
#container main .detail dl.nextprev dd{
    display:table-cell;
    padding:0 10px;
}
#container main .detail dl.nextprev dd a{
    display:block;
    color:#000;
    border:solid 1px #ccc;

    border-radius:5px;
}
#container main .detail dl.nextprev dd:nth-child(1) a{
    background:url(../images/prev.png) 10% center no-repeat;
    background-size:14px auto;
    padding:10px 16px 10px 40px;
}
#container main .detail dl.nextprev dd:nth-child(1) a:hover{
    background:#eee url(../images/prev.png) 10% center no-repeat;
    background-size:14px auto;   
}
#container main .detail dl.nextprev dd:nth-child(2) a{
    background:url(../images/next.png) 90% center no-repeat;
    background-size:14px auto;
    padding:10px 40px 10px 16px;
}
#container main .detail dl.nextprev dd:nth-child(2) a:hover{
    background:#eee url(../images/next.png) 90% center no-repeat;
    background-size:14px auto;  
}
@media screen and (max-width:1300px){
    #cate li a{
        display:flex;
    }
    #container #header2 #cate{
        left:2%;
        transform:translateX(0%);
        width:96%;
    }
    #cate li a{
        font-size:1.2vw;
    }
    #header2 #title{
        position:absolute;
        left:0%;

        width:100%;
        transform:translate(0%,0%);
        margin-top:0px;
    }
    #header2 #title h1{

        color:#fff;
        font-weight:500;
        text-align:center;
        display:block;
        padding:10px 20px;

    }
}

@media screen and (max-width:768px){
    #container #header2{

        margin-bottom:24vw;
    }
    #container #header2 #cate{
        display:table;
        margin:0px auto;
        left:50%;
        transform:translateX(-50%);
        width:80%;
        position:absolute;
        bottom:-20vw;
    }/*
    #naiyo .box h2 br{
        display:none;
    }*/
    #cate ul{
        display:block;
        margin:0px auto 30px auto;
    
    }
    #cate li{
        display:block;
        text-align:center;
        padding:5px 0;
    }
    #cate li a{
        display:block;
        padding:10px 20px 14px 20px;
        font-weight:500;
        cursor: pointer;
        font-size:11px;
    }
    #container .detaillayout h3 br{
        display:none;
    }
    #header2 #title{
        position:absolute;
        left:0%;
        top:20vw;

        width:100%;
        transform:translate(0%,0%);
        margin-top:0px;
    }
    #header2 #title h1{
        font-size:7vw;
        color:#fff;
        font-weight:500;
        text-align:center;
        display:block;
        padding:10px 20px;

    }
    #header2 #title p.course{
        font-size:3.6vw;
    }/*
    #naiyo{

        margin:0px 10px;

    }
    #naiyo .box{
        width:50%;
    }
    #naiyo .box .namet{
        font-weight:500;
        font-size:14px;
        line-height:26px;
        float:none;
        letter-spacing: 5px;
    }
    #naiyo .box .namet.mini{
        letter-spacing: 0px;
    }
    #naiyo .box .links{
        float:none;
        font-size:12px;
        display:none;
        padding:10px 0 5px 0;
        margin-right:0px;
        display:none;
        border-bottom:solid 1px #222;
    }
    #naiyo .box dl{
        display:block;
    }
    #naiyo .box dl dt{
        width:100%;
        display:block;
    }
    #naiyo .box dl dt br{
        display:none;
    }
    #naiyo .box dl dd{
        padding:10px 0 0 0;
    }*/
    #container main .detail{
        margin:0px 10px;
    }
    #container main .detail h2.catetitle{
        font-size:18px;
    }
    #container main .detail h2.catetitle .icon{
        top:-2px;
        height:20px;
        width:5px;
    }
    #container main .detaillayout{
        flex-wrap:wrap;
    }
    #container main .detaillayout .photo{
        width:100%;
    }
    #container main .detaillayout .txt{
        width:100%;
        box-sizing:border-box;
        padding:20px 10px 10px 10px;
    }
    #container .detaillayout p{
        font-size:14px;
        margin-bottom:1.5em;
    }
    #container .detaillayout .keywords{
        font-size:14px;
    }
}
/*
@media screen and (max-width:468px){
    #naiyo .box{
        width:100%;
    }
}*/







.course{
text-align:right;
font-size:75%;
color: #fff;
}


.course span{
padding: 5px 10px;
}