@charset "UTF-8";
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
/* ページ全体での共通デザインとなるものを纏めたcssです。 */

/* 文字改行禁止区域指定 */

span.nowarp {
    display: inline-block;
    /* background-color: #195ca5; */
    /* white-space: nowrap; */
}

/* テキスト非表示 */
.non{
    display: none;
}

/* スマホ表示時のテキスト非表示 */
@media screen and (max-width:599px) {
    .phone_non{
        display: none;
    }
}

/*IDセクションオフセット*/
.anchor{
    margin-top:-100px;
    padding-top:100px;
}

/*本文*/
.wrapper {
    width:100%;
    height:auto;
    margin:0 auto;
    background-color:#f9fafb;
}
.title_wrapper{
    width:100%;
    height:auto;
    margin:0 auto;
    background-color: #195ca5;
}
/*h2文字色*/
.text_color{
    color:#195ca5;
}

/*タイトル・リード文*/

/* .sitemap_title_container{
    width:90%;
    height:auto;
    margin:0 auto;
    padding-top:5rem;
    position: relative;
} */
/* title_wrapper{

} */
.title_container{
    width:90%;
    height:auto;
    margin:0 auto;
    padding-top:5rem;
    position: relative;
    padding-bottom:6rem;
}
.title{
    text-align:center;
    font-size:3rem;
    margin-bottom:5rem;
    color:#fff;
}
.title p{
    font-size:1.5rem;
    line-height:1.5rem;
}

.title_introduction{
    justify-content: center;
    align-items: center;
    width:60%;
    margin:0 auto;
    /* padding-bottom: 8rem; */
    background-color:#fff;
    padding:5rem;
    font-size:1.1rem;
    position: relative;
    border-radius: 1rem;
    /* margin-bottom: 8rem; */
}

.title_text_bold{
    display: block;
    width:70%;
    font-weight:bold;
    font-size:1.5rem;
    line-height:2.2rem;
    padding-bottom:1rem;
}
.title_text{
    position:relative;
    width:100%;
    line-height:2rem;
    padding-top:1.5rem;
    z-index:2;
}
.title_image{
    width:21%;
    animation:hovering 3s infinite ease-in-out;
    position:absolute;
    top:10%;
    right:5%;
    z-index:1;
}
@keyframes hovering{
    0% { transform: translate(0, 0); }
	50% { transform: translate(0, -20px); }
	/* 50%のtranslateの値を変えることで上下の動く幅を変えられる */
	100% { transform: translate(0, 0); }
}
.title_image img{
    width:100%;
    /*4Kモニター対応*/
    max-width:380px;
}

/* 本文 デザイン */
.body_wrapper{
    width: 100%;
}
.body_container{
    width:70%;
    margin:0 auto;
}
.body_container_h2{
    color:#195ca5;
    font-size:3rem;
    padding-bottom:1rem;
}
.body_container_text_bold{
    color:#195ca5;
    font-size:1.3rem;
    padding-bottom:1rem;
    padding-top:1rem;
}

.body_container_text{
    background-color:#fff;
    padding:6rem;
    margin-bottom:8rem;
}
.container_noback{
    background-color: inherit !important;
}
.text_bold{
    font-weight:bold;
}

.fa-angle-right {
    padding-right: 0.3rem;
}

/* リスト・列挙 */
.items{
    box-sizing:border-box;
    width:50%;
    padding:2rem 1rem 2rem 1rem;
}

.items_name{
    border-bottom:2px solid #195ca5;
    color:#195ca5;
    margin-bottom:1.5rem;
}
.items_name_nolink{
    border-bottom:2px solid #195ca5;
    color:#666;
    margin-bottom: 1.5rem;
}

.items_name:hover{
    color:#50b3e1;
}
.items_small{
    font-size:0.9rem;
}
.items_ul li{
    display:inline-block;
    width:45%;
    line-height:3rem;
}
.items_ul li:hover{
    color:#50b3e1;
}
.items_ul a{
    display:block;
    height:max-content;
}

/* 表 */
.border_before{
    border-top:1px solid #999;
}
.outline{
    padding:6rem;
    box-sizing:border-box;
}
.outline p{
    padding-left:0;
}
.outline dl{
    display:flex;
    flex-wrap: wrap;
    width:100%;
    border-bottom:1px solid #999;
    padding:2rem 2rem 2rem 2rem;
    justify-content: center;
    align-items: center;
    box-sizing:border-box;
}
.outline dt{
    width:20%;
    font-size:1.2rem;
    justify-content: center;
    align-items: center;
}
.outline dd{
    width:80%;
    align-items:center;
}


@media screen and (min-width:600px) and (max-width:1024px) {
    .body_container_text{
        padding: 4rem;
    }
}

@media screen and (max-width:599px) {
    /*タイトル*/
    .title_wrapper{
        background-color: inherit;
    }
    .title{
        font-size: 2.3rem;
        margin-bottom: 2rem;
        color:#195ca5;
    }
    .title p{
        font-size: 1.3rem;
    }
    .title_container{
        padding-top: 2rem;
        padding-bottom: 0rem;
        margin-bottom: 2rem;
        width: 100%;
    }
    .title_image{
        display: none;
    }
    .title_text_bold{
        font-weight: 100;
        font-size: 1.3rem;
        padding-bottom: 1rem;
        line-height: 1.5rem;
        width: auto;
    }
    .title_introduction{
        padding: 0.8rem;
        margin: 0.5rem;
        margin-bottom: 0px;
        width: auto;
        /* border-radius: 0; */
        border-radius: 0.5rem;
        /* margin-bottom:0; */
    }
    .title_text{
        /* font-size: 0.9rem; */
        line-height: 1.2rem;
        padding-top: 0;
        font-size: 0.8rem;
        color: #666;
    }
    
    /* 本文 */
    .body_container{
        padding-top: 0rem;
        width: 100%;
    }
    .body_container_h2{
        padding: 0 2rem;
        font-size: 1.6rem;
    }
    .body_container_text{
        padding: 0.8rem;
        font-size: 0.9rem;
        line-height: 1.2rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        border-radius: 0.5rem;
    }
    .text_bold{
        font-weight: normal;
        font-size: 0.9rem;

    }
    
    /* リスト・列挙 */
    .items{
        width:100%;
        padding-left: 0;
        padding-right: 0;
    }
    .items_ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        width:100%;
        padding-left: 0;
        padding-right: 0;
    }
    .items_ul li{
        width: auto;
        min-width: 50%;
    }
    
    /* 表 */
    .outline{
        padding: 1rem 1rem;
    }
    .outline dl{
        display: block;
        padding: 1rem 0.5rem;
    }
    .outline dt{
        padding-bottom: 0.25rem;
        font-size: inherit;
        font-size: 0.9em;
        /* font-weight: bold; */
        color: #888;
    }
    .outline dl dt{
        width: auto;
    }
    .outline dl dd{
        width: auto;
        margin-left: 1rem;
    }
    
    .items_name{
        display: inline-block;
    }
    .items_name_nolink{
        display: inline-block;
    }
}