/* 共通 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

body {
    background-image: url("img/gl2.png");
    background-repeat: no-repeat, no-repeat;
    background-position: bottom left, bottom right;
    background-color:#E0F0F3;
    background-size: 0px, 0px;
    background-attachment: fixed;
    font-family: 'Noto Sans JP', sans-serif;
    margin:0;
    overflow-x: hidden;
    overflow-y:scroll;/* これを入れないとページによって位置がずれる */
    -webkit-overflow-scrolling: touch;
    color:#000;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

/* 表示のアニメーション */
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

div{
    margin:0;
}
p{
    font-size:100%;
    line-height: 150%;
    margin: 0px;
    padding:0px;
}
p.indent{
    font-size:100%;
    text-indent: 1em;
    line-height: 150%;
}
ul,li{
    /* 字下げを解除 */
    list-style-type: none;
    margin:0;
    padding:0;
}
.title_parent {
    width: 80%;
    font-size: 20px;
    color:#d0001b;
}
.title {
    margin: 10px 0;
}
.title_parent .title {
    overflow: hidden;
    position: relative;
    padding-bottom: 3px;
    animation-name: RtoL;
    animation-duration:2s;
}
.title_parent .title span{
    padding: 8px;
}
.title_parent .title:before {
    content: "";
    border-bottom: 3px solid #d0001b;
    bottom: 0;
    height: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
}
.title_parent .title:after {
    border-bottom: 3px solid #ddd;
    bottom: 0;
    content: "";
    position: absolute;
    width: 1500px;
    z-index: 1;
}
@keyframes RtoL{
0% {
    opacity: 0;
    transform: translateX(50px);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}
a{
    text-decoration:none;
}
a:link{
    color:#000;
}
a:active,a:visited{
    color:#000;
}
a:hover{
    color:#ccc;
}
h1{
    font-size:180%;
}
title{
    font-size:120%;
    font-weight:bold;
}
#logo{
    vertical-align:middle;
    line-height: 30px;
}
#logo img{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
#body {
    position: relative;
    background-color:#f9f9f9;
    padding-top: 80px;
    border-right: 10px solid #d0001b;
    border-left: 10px solid #d0001b;
    min-height: 100vh;
    box-sizing:border-box;
}
#wrap{
    min-height:100%;
    text-align:left;
    margin:0 auto;
    background-color:#ffffff;
    box-sizing:border-box;
    z-index: 1;
}
#head {
    position:fixed;
    background-color:#ffffff;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 80px;
    box-sizing:border-box;
    z-index: 150;
    border-bottom: 2px solid #dddddd;
}
#foot{
    box-sizing:border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    height:60px;
    position: absolute;
    text-align: center;
    bottom: 0;
    border-top: 2px solid #dddddd;
    background-color:#ffffff;
}
/* 著作権表示 */
#foot:before {
    content: "© 2017 Keio Soaring Team.";
    font-size: 10pt;
    text-align: center;
}

#logo img{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

#linkinme {
    margin-top:-70px;
    padding-top:70px;
}

.img_tile img:hover{
    opacity: 0.8;
}

.bgFilterOn {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
}

/* タイトル画像(エフェクトのみ) */
#logo img{
    animation-name: TtoB;
    animation-duration:2s;
}
@keyframes TtoB {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* PC 向けの設定 */
@media screen and (min-width: 980px){
    /* ここからページ上部のメニュー設定 */
    .nav{
        position: fixed;
        box-sizing:border-box;
        margin-top: 25px;
        margin-bottom: 25px;
        margin-left: 420px;
        z-index: 150;
        width: 540px;
    }
    .nav li div {
        display:inline;
    }
    .nav li {
        position: relative;
        width: 90px;
        float: left;
        text-align: center;
        cursor: pointer;
    }
    .nav li .hot {
        color:red;
    }
    .nav li a,
    .nav li span{
        display: block;
        padding: 8px 0;
        color: #000;
        font-size: 14px;
        line-height: 14px;
        text-decoration: none;
    }
    .nav li:hover > a,
    .nav li:hover > span{
        background: #dddddd;
    }
    .nav li.now:hover > span{
        background: #eeeeee;
    }
    .nav > li:hover > a,
    .nav > li:hover > span{
        border-radius: 5px 5px 0 0;
    }
    .nav li.now > span{
        color:#bdbdbd;
    }
    .nav li.now:hover > span{
        background: #ffffff;
    }
    .nav li ul{
        list-style: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        border-radius: 0 0 3px 3px;
    }
    .nav li:last-child ul{
        left: -100%;
        width: 100%
    }
    .nav li ul li{
        overflow: hidden;
        width: 200%;
        height: 0;
        color: #fff;
        -moz-transition: .2s;
        -webkit-transition: .2s;
        -o-transition: .2s;
        -ms-transition: .2s;
        transition: .2s;
    }
    .nav li ul li.now:hover > span{
        background: #eeeeee;
    }
    .nav li ul li a,
    .nav li ul li span{
        /*1段目のメニューにカーソルを載せたとき出てくる2段目のメニューの文字に関する設定*/
        padding: 15px 15px;
        background: #eeeeee;
        text-align: left;
        font-size: 12px;
    }
    .nav li:hover ul li{
        /*1段目のメニューにカーソルを載せたとき出てくる2段目のメニューの設定*/
        overflow: visible;
        height: 42px;/* 文字の上下のpadding + 文字サイズ */
        border-top: 1px solid #555;
    }
    .nav li:hover ul li:first-child{
        border-top: 0;
    }
    .nav li:hover ul li:last-child{
        border-bottom: 0;
    }
    /* ここまでメニュー設定 */
    
    #logo img.pen{
        height: 30px;
        width: auto;
    }
    #logo img.name{
        height: 50px;
        margin-left: 35px;
        width: auto;
    }
    
    #logo img.twbird{
        height: 50px;
        margin-left: 300px;
        width: auto;
    }
    #wrap{
        width:960px;
    }
    #head {
        width:960px;
        padding-left: 50px;
    }
    #body {
        width:960px;
    }
    #foot {
        width:940px;
        padding-left: 40px;
    }
}

/* タブレット・スマホ 共通設定 */
@media screen and (max-width: 980px){
    #wrap{
        width: 100%;
    }
    #head {
        width: 100%;
        padding-left: 20px;
    }
    #body {
        width: 100%;
        transition: filter 0.5s linear;
    }

    /* ここからハンバーガーメニューの設定 */
    .menu-slidein-trigger,
    .menu-slidein-trigger span {
        display: inline-block;
        -moz-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -ms-transition: all 0.4s;
        transition: all 0.4s;
        box-sizing: border-box;
        cursor:pointer;
        z-index: 151;/* #head より上に出す*/
    }
    .menu-slidein-trigger {
        position: fixed;
        width: 30px;
        height: 32px;
        right: 10px;
        margin-top: 25px;
    }
    .menu-slidein-trigger span {
        position: absolute;
        left: 0;
        width: 30px;
        height: 4px;
        background-color: #666666;
        border-radius: 2px;
    }
    .menu-slidein-trigger span:nth-of-type(1) {
        top: 5px;
    }
    .menu-slidein-trigger span:nth-of-type(2) {
        top: 14px;
    }
    .menu-slidein-trigger span:nth-of-type(3) {
        bottom: 5px;
    }
    .menu-slidein-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(9px) rotate(-315deg);
        transform: translateY(9px) rotate(-315deg);
    }
    .menu-slidein-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }
    .menu-slidein-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-9px) rotate(315deg);
        transform: translateY(-9px) rotate(315deg);
    }
    .nav{
        position: fixed;
        background: rgba(83, 83, 83, 0.9);
        width: 100%;
        text-align:left;
        z-index: 105;
        margin-top: 50px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        max-height: -moz-calc(100% - 80px);
        max-height: -webkit-calc(100% - 80px);
        max-height: calc(100% - 80px);
    }
    .nav li {
        line-height:40px;
        border-top:2px solid #666;
        cursor: pointer;
        margin-left: 20px;
        margin-right: 20px;
    }
    .nav li a{
        color:#ddd;
        font-size: 15px;
    }
    .nav li span{
        color:#eeeeee;
    }
    .nav li.now span{
        color:#aaa;
        font-size: 15px;
    }
    .nav li:first-child{
        border-top:none;
    }
    .nav li .hot {
        color:red;
        font-size: 15px;
    }
    .nav li .hot:before {
        content: '▽';
        font-size: 15px;
    }
    .nav li ul li {
        margin-right: 0px;
    }
    .nav a,
    .nav span{
        display:block;
    }
    /* ここまで */
}

/* タブレット 向けの設定 */
@media screen and (max-width: 980px) and (min-width: 400px){
    #logo img.pen{
        height: 30px;
        width: auto;
    }
    #logo img.name{
        height: 50px;
        margin-left: 35px;
        width: auto;
    }
    #logo img.twbird{
        height: 40px;
	width:auto;
        right: 60px;
    }
    #foot {
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* スマホ 向けの設定 */
@media screen and (max-width: 400px){
    #logo img.pen{
        height: 25px;
        width: auto;
    }
    #logo img.name{
        height: 35px;
        margin-left: 30px;
        width: auto;
    }
    #logo img.twbird{
        height: 40px;
	width:auto;
        right: 60px;
    }
    #foot {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}