@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

.big-bg {
    background-size: cover;
    background-position: center top;
}


.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}


#home {
    background-image: url(../images/main-back.jpg);
    background-color:#f0efe3;

    min-height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

#home .page-title {
    font-size: 4rem;
    line-height: 1.2em;
    padding: 40px;
    
    font-family: 'Philosopher', serif;
    text-transform: none;
    font-weight: normal;
    color: rgb(163, 172, 244);
    text-shadow: 1px 2px 3px #090740;
}
.home-content {
    text-align: center;
    /* margin-top: 10%; */
}
.home-content p {
    font-size: 1.125rem;
    margin: 10px 0 42px;
    color: rgb(5, 34, 97);
}



.gnavi{
    display: flex;
    justify-content: center;
    /* flex-wrap: wrap;  スマホ表示折り返し用なのでPCのみなら不要*/
    font-size: 1.6rem;
    text-transform: uppercase;
    font-family: 'Philosopher', serif;
    text-shadow: 1px 2px 3px #090740;
    margin:0 0 40px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
   padding:10px 20px;
    text-decoration: none;
    color: rgb(241, 243, 213);
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.gnavi li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li.current a{
    color:#faa81a;
    text-shadow: 0 0 0.2em rgba(0,0,0,1);
}
.gnavi li a:hover{
  color:#f8f1e6;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 15px;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 3px;
    background:#f4c45b;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

@media screen and (max-width: 640px) {
    .gnavi  {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

    
}