@charset "UTF-8";


/* UNIVERSAL========================= */
*{box-sizing: border-box;}

html{
    scroll-padding-top: 100px;
}

body{
margin:0;
/* font-family:  "M PLUS 1p"; */
font-family: "Noto Sans JP";
color: #808080;
}

a{
text-decoration:none;
}

img{
    max-width: 100%;
    vertical-align: 0%;
}

.wf-mplus1p { font-family: "M PLUS 1p"; }
.wf-notosansjapanese { font-family: "Noto Sans JP"; }


/*HEADER===============================*/

#home{
/* background-image:url(../image/top.jpg); */
background: linear-gradient( 135deg, rgba(117, 194, 218, 0.6), rgba(89, 180, 150, 0.6)),
  url("../image/top3.jpg");
  background-blend-mode: multiply;
min-height:100vh;
width:100%;
}



/*ホームとナビメニューを横並びにする*/
.page-header{
display:flex;
justify-content:space-between;
}

/*横並びのheader内容の幅を設定*/
.wrapper{
max-width:1100px;
margin:0 auto;
padding:0 4%;
}

/*header背景色と固定指示*/
.band{
position:fixed;
width:100vw; /*★fixed指定した際はwidthを改めて指定★*/
height:120px;
background-color:rgba(225,225,225,0.5);
}

/*大きな背景画像を画面いっぱいに配置*/
.big-bg{
background-size:cover;
background-position:center top;
}

h1{
color:#ffffff;
}


/*ナビメニュー関連*/
.main-nav{
display:flex;
list-style:none;
}

.main-nav{
    margin:60px 0 10px 0;
}

.main-nav li{
padding:10px;
}

.main-nav a{
color:#ffffff;
font-weight: bold;
}

.main-nav a:hover{
color:rgb(76, 119, 121);
}

/* メインロゴ表示部分 */
.main-logo{
    text-align: center;
}

.main-logo img{
    /* position:absoluteによる位置指定(上下左右中央) */
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;

    /* 画像の高さ指定 */
    height:50vh;

    /* アニメーション:メインロゴのフェードイン */
    animation:fade-in;
    animation-duration: 10s;
}

@keyframes fade-in{
    0%{opacity: 0;}
    90%{opacity: 1;}
    100%{opacity: 1;}
}

/* トップのスクロールマーク表示部分 */
.scroll{
    text-align: center;
    width: 100px;
       /* アニメーションループ */
       position:absolute;
       bottom:3%;
       /* 左右中央寄せ */
       left: 0;
       right: 0;
       margin: auto;
       animation:arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{ /* スクロール矢印にょんにょん用アニメーション設定 */
    0%{bottom:3%;}
    50%{bottom:5%;}
    100%{bottom:3%;}
}

.arrow-bottom {
    /* 下向き矢印の作成 */
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 10px;
    border-bottom: 4px solid #ffffff;
    border-right: 4px solid #ffffff;
    transform: rotate(45deg);
}
 
.scroll a{
    color:#ffffff;
    font-weight:bold;
    font-size:18px;
    text-align: center;
}

/*MAIN===============================*/

main{
max-width:900px;
margin:30px auto;
}

main a{
    color: #53b4ac;
}

section{
    margin-bottom: 40px;
}

/* section{ */
    /* ジャンプしたときsectionの内容がヘッダに隠れないようにするため、余白を入れてネガティブマージンでキャンセル */
    /* padding-top: 130px;
    margin-top:-130px;
    padding-bottom: 100px; */
/* } */

/* .top-padding{ */
    /* padding-top: 200px; */
    /* ジャンプリンク位置調整に加えてトップ部分には余白を追加 */
/* } */

/* カテゴリタイトル・縦書き */
.category{
    writing-mode: vertical-rl;
    font: size 24px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color:#cccccc;
    border-style:solid;
    border-width:0 1px 0 0;
    padding:0 10px 0 0;
}

.container{
    display: flex;
}

#profile.sub-container{
    margin:0 0 30px 0;
}

.photo{
    width: 400px;
    margin:0 50px 0 0;
}

#profile img{
    width:400px;
    height: 200px;
    border-radius: 0 20px 20px 0;
    object-fit: cover;
    margin-bottom: 10px;
}

#profile p{
    margin:0 0 40px 20px;
}

#profile h4{
    margin:20px;
}

.slogo{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    margin:30px 0;
}

.slogo img{
    border-style:solid;
    border-color:#cccccc;
    border-width: 1px;
    object-fit: cover;
    width: 20;
}

h3{
    margin:0 0 20px 0;
    padding:10px;
    font-size: 18px;
    color: #cccccc;
    border-width: 0 0 1px 0;
    border-style: dashed;
}

.fav-font{
    display: flex;
    margin:40px 0;
}

.fav-font img{
    width:450px;
    border: solid 1px #cccccc;
}

.fav-text{
    margin:0 0 0 40px;
}

h4{
    margin:5px 0 20px 0;
    font-size:18px;
    border-width: 0 0 0 10px;
    border-style: solid;
    border-color: #5f7c72;
    padding:0 0 0 10px;
}

.font-img{
    width:450px;
}

.dl{
    font-size: 10px;
    border:solid 1px;
    padding:5px;
}


/*FOOTER===============================*/

footer{
    /* vertical-align(縦方向の中央ぞろえ)を適用するためdisplayをtable-cell扱いにする必要がある(position:absoluteで指定してもよいが) */
    display: table-cell;
    width:100vw;
    font-size: small;
    vertical-align: middle;
    text-align: center;
    background-color: #cccccc;
    height: 50px;
}

@media screen and (max-width:520px){
    body{
        font-size: 14px;
    }
    .main-nav{
        margin-top:80px;
        font-size: 12px;
    }

    #home{
        position: relative;
    }

    #home img{
        transform: scale(0.8);
    }
    
    h1{
        display: block;
        width:100vw;
        text-align: center;
        position: absolute;
        left: 50%;
        top:-10%;
        transform: translateX(-50%);
    }

    h1 a{
        display: block;
        width: 100%;
    }

    section{
        padding:0 10%;
    }

    .container,
    .fav-font{
        flex-direction: column;
    }

    .sub-container,
    #profile p,
    #profile h4{
        margin:0px;
    }

    #profile p{
        margin-bottom: 30px;
    }

    .category{
        writing-mode:horizontal-tb;
        border-width:0 0 1px 0;
        margin-bottom:30px;
    }

    .photo{
        width: 100%;
        margin-bottom: 20px;
    }

    .big-grid{
        height: 250px;
        border: 1px solid #ccc;
        object-fit: cover;
        object-position: left top;
    }

    .slogo{
        display: flex;
        flex-direction: column;
    }

    .fav-font img{
        margin-bottom: 20px;
    }

    .fav-text{
        margin:0 0 30px 0;
    }

}