@charset "utf-8";

body {
    max-width: 100%; /* 横幅いっぱい */
    margin: 0 auto;
    /* background-color: #162f66; */
    background-blend-mode: lighten;
}
body {
    font-size: 1rem;      /* ページのフォントの基準サイズ  */
}
h1 {
    /* color: gold; */
    color: #fff6a0;
    text-align: center;
    padding: 10px;
    font-family: 'Shippori Antique', sans-serif;
    font-size: 2.8em;
    /* text-shadow: white 1px 0 1px, white -1px 0 1px,white 0 1px 1px, white 0 -1px 1px; */
    /* text-shadow: white 1px 1px 0; */
    background-color: #26385f63;
}
header p {
    text-align: center;
    /* width: 80%; */
    /* margin: 0 auto; */
    color: white;
    /* text-shadow: 1px 0 white, 0 -1px white, 0 1px white, -1px 0 white; */
    text-shadow: 1px 1px rgb(90, 90, 90);
    font-size: 1.3em;
    padding: 5px;
    background-color: #26385f69;
}
/* 社労士バッジ */
header h1 a img {
    width: 1em;
}
header {
    background-image: url(../free_img/kumo1-2.jpg);
    background-size: 100%;
    background-position: -380px 0;

}
/* メイン画像 */
header::after {
    content: " ";
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0;
}
/* メイン画像 end */

nav {
    /* background-color: #18476e; */
    background: linear-gradient(to bottom, #1650a7 , #162f66 30%);
    color: white;
    padding:  0;
    position: relative;
    /* font-size: 1.2em; */
    
}

nav ul {
    list-style-type: none;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
}
nav li a {
    /* margin: 10px auto 0; */
    padding: 10px 05px 20px 5px;
    display: block;
    /* border: solid 1px red; */
    border-top: solid 3px transparent;
    box-sizing: border-box;
    text-align: center;
    flex-basis: auto;
    

}
@media (hover: hover) { /* PCのみホバー対応 */
nav li a:hover {
    /* color: rgb(252, 222, 174); */
    background-color: #1a428d;
    /* padding: 13px 6px 27px; */
    border-top: solid 3px rgb(48, 113, 235);
    border-radius: 5px;
}
}
nav .popup_menu {
    display: none;
}
#popup_checkbox {
    position: absolute;
    visibility: hidden;
    top: 0;
}

main {
    background-color: #dbe3ff;
}
/* 文章部分の幅指定 */
.wrap {

    max-width: 1400px;
    margin: 0 auto;
    padding: 1em 3em;
}
.wrap {
    background-color: #fff;
}
.wrap p {
    text-indent: 1em;
    line-height: 1.5;
    color: #333;
    /* font-size: 1.02em; */
    letter-spacing: 0.05em;
    padding-bottom: 10px;
}

h2:not(#hg1 h2) {
    font-size: 1.7em;          /* h2のフォントの基準サイズ  */
    padding-left: 0.5em;
    /* text-align: left; */
    width: 50%;
    font-family: 'Shippori Antique', sans-serif;
    box-sizing: border-box;
    /* text-shadow: #001e5e 1px 0 1px, #001e5e -1px 0 1px,#001e5e 0 1px 1px, #001e5e 0 -1px 1px,  #555 2px 2px 3px; */
    text-shadow: transparent 1px 0 1px, transparent -1px 0 1px,transparent 0 1px 1px, transparent 0 -1px 1px,  transparent 2px 2px 3px;
    /* color:#89bffdbd; */
    /* text-shadow: #001e5e 1px 0 1px, #001e5e -1px 0 1px,#001e5e 0 1px 1px, #001e5e 0 -1px 1px; */
    color:#001e5e;
    /* font-weight: bold; */
    /* background: linear-gradient( to right, #18486ee6 0%, #eef 10% 90%, #18486ee6 100%); */
    background: transparent;
    border: solid #001e5e;
    border-width: 1px 0 0 0;
    padding-top: 12px;
    margin: 1em 0;
    position: relative;
}
h2:not(#hg1 h2)::after {
    content: " .";
    font-size: 1.5em;
    text-align: right;
    position: absolute;
    left: 100%;
    bottom: -1px;
    width: 100%;
    color:#001e5e;
    /* background: #001e5e; */
    background: linear-gradient( to top, #001e5e 70%, #eef  100%);

}
h3 {
    font-size: 1.3em;          /* h3のフォントの基準サイズ  */
    text-align: center;
    box-sizing: border-box;
}


h4 {
    border: solid 1px #18486ee6;
    background-color: #013057e6;
    padding: 0.2em 2em 0.2em 2em;
    display: inline-block;
    color: white;
    text-shadow: 0px -1px 1px black,
                -1px 0px 1px black,
                 0px 1px 1px black,
                 1px 0px 1px black;
    border-radius: 0.3em;
    font-size: 1.1em;
}
.br_sma {
    display: none;
}

/* jQueryフォントサイズ変更用 */
div.sel_font {
    
    /* width: 10rem; */
    height: 4.2rem;
    text-align: center;
    font-size: 1rem;
    padding-top: 4px;
    box-shadow: 0 1px 1px 2px gray;
    z-index: 10;
    background-color: white;
    /* border: solid 1px red; */
}
ul.sel_font {
    display: flex;
    list-style-type: none;
    justify-content: center;
    margin-top: 0.5rem;
}
ul.sel_font li {
    align-self: flex-end;

    border: 1px solid #aaa;
    padding: 2px;
    margin-left: 3px;
    border-radius: 5px;
}
ul.sel_font li:hover {
    background-color: yellow;
}

ul.sel_font li:nth-child(1),
.fontSmall{
    font-size:.8rem;
}

ul.sel_font li:nth-child(2),
.fontMedium{
    font-size:1rem;
}

ul.sel_font li:nth-child(3),
.fontLarge{
    font-size:1.2rem;
}
ul.sel_font li:nth-child(4),
.fontBig{
	font-size:1.4rem;
}
/* jQueryフォントサイズ変更用 end*/

.kinyu_houhou {
    margin-left: 20px;
}

p a,
p.external_link a {
    text-decoration: underline;
}
p.external_link a::after {
    content: url(../download_sozai/external_link.svg);
    display: inline-block;
    transform: scale(1.0);
}
p.external_link span {
    display: none;
    font-size: 80%;
    margin-left: 15px;
}
p.external_link a:hover~span {
    display: inline;
    color: red;
    
}
em {
    font-weight: bold;
}

strong {
    font-weight: bold;
    color: rgb(197, 39, 39);
}

.nowrap {
    white-space: nowrap;
}

footer {
    width: 100%;
    /* height: 10em; */
    padding-bottom: 2em;
    text-align: center;
    color: white;
    background-color: #162f66;
    padding-top: 10px;
}
footer ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: center;
    width: 60%;
    margin: 0 auto 2em auto;
}
footer a {
    font-size: 90%;
    margin: 2px 1em;
    display: inline-block;
    text-decoration: underline;
}
@media (hover: hover) { /* PCのみホバー対応 */
footer a:hover {
    color: rgb(171, 229, 252);
}
}
/* 先頭へ戻るアイコン */
.top_btn_s a {
    display: none;
}
.top_btn a {
    /*display     : block;    /* 変形するためのブロック化 */
    position: fixed;
    right: 2em;
    bottom: 3em;
    z-index: 10;
    height: 3em;
    width: 3em;
    font-size: 1.5em;
    line-height: 0.5em;
    padding: 0.5em;
    color: white;
    text-shadow: 0 2px 5px black;
    background: rgba(15, 117, 185, 0.65);
    border-radius: 2em;
    margin: 0 auto;
}
.top_btn a span {
    display     : inline-block;    /* 変形するためのブロック化 */
    transform   : scale(1.2, 0.7);
    width: 2.1em;
    text-align: center;
    /* border: solid 1px red; */
}
.top_btn a span::after {
    content: "TOP";
    position: absolute;
    display: inline-block;
    bottom: -1.2em;
    left: 0;
}
/* アニメーションページへのリンク */
.to_anime {
    width: 20rem;
    height: 15rem;
    display: block;
    margin: 0 auto;
    cursor: default;
}
@media screen and (min-width: 767px) { /* 画面サイズ767px以上  */
div.sel_font {
    position: absolute;
    top: 0.5em;
    right: 0.8em;
    }
nav ul {
    display: flex;
}
nav li {
    position: relative;
    /* margin-left: 1em; */
    margin: 10px auto 0;
}
nav li:not(:nth-child(1))::before {
    content: ' ';
    width: 3px;
    height: 2.5em;
    background-color: rgba(230, 244, 255, 0.493);
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: -5px;
    margin-right: 1em;
} 
main {
    background: linear-gradient( to top, transparent 30vh, rgb(243, 248, 255) 60vh, rgb(190, 208, 255)),
    url(../img/flower-2.jpg);
    background-position: 600px bottom;
    background-repeat: repeat-x;
    position: relative;
    z-index: 0;
    
}
}  /* 画面サイズ767px以上  */

/* @media screen and (max-width: 640px) { /* 画面サイズ640px以下 */
@media screen and (max-width: 767px) { /* 画面サイズ767px以下 */
    .overview .detail {
        overflow-x: scroll;
        
    }
    h1 {
        font-size: 1.3rem;
        text-shadow: none;
        background-color: #26385f7c;
    }
    header {
        background-image: url(../free_img/kumo1-2.jpg);
        background-size: 230%;
        background-position: 150px 0;
    
    }
    header p {
        font-size: 0.9em;
        padding: 0 auto;
        background-color: #26385f77;
    }
    nav {
        font-size: 1em;
        z-index: 5;
        position: absolute;
        top:6em;
        width: 100%;
        height: 4em;
        padding: 0;
        /* border: solid 2px red; */
    }
    nav .popup_menu {
        /* display: list-item; */
        display: block;
        position: relative;
        /* text-decoration: none; */
        text-align: center;
        /* font-size: 1.2em; */
        color: white;
        margin: 1.4em auto;
    }
    nav .popup_menu::before {
        position: absolute;
        content: '▶';
        top: 0;
        left: 8em;

    }
    nav li {
        display: block;
        margin: 0 auto;
        background-color: rgba(51, 63, 112, 0.9);
        border-top: solid 1px #b1b1b1;
    }
    nav li a {
        display: block;
        /* min-width: 80%; */
        font-size: 1.2em;
        padding: 1.2em 5em 1.1em 2em;
        margin: 0;
        text-align: left;
        /* border: solid 1px red; */
    }

    #nav_menu {
        display: none;
    }
    #popup_checkbox:checked ~ #nav_menu {
        display: block;
    }
    #popup_checkbox:checked ~ .popup_menu::before {
        position: absolute;
        content: '▼';
        /* top: 0;
        left: 9em; */

    }

    main {
        background-color: white;
        /* margin-bottom: 3em; */
    }
    div.sel_font {
        display: none;
        color: white;
        /* margin: 0 auto; */
        background-color: #555;
    }
    .wrap {
        /* position: relative; */
        /* top: 3em; */
        width: 100%;
        max-width: 1000px;
        margin: 4em auto 2em;
        padding: 1em 0.5em 2em;
        /* margin-top: 3em; */
    }
    h2:not(#hg1 h2) {
        width: 100%;
        margin: 2em auto;
        font-size: 1.4em;
        text-align: center;
        color: white;
        background-color: #001e5e;
        padding: 5px;
        font-weight: normal;
    }
    h2:not(#hg1 h2)::after {
        content: "";
    }
    dl {
        margin: 0.5em;
    }
    dd {
        padding: 0;
    }
    h3 {
        font-size: 1.2em;
        text-shadow: transparent 0 0;
        /* color:#001e5e;
        font-weight: bold;
        width: 100%;     */
    
    }
    .br_sma {
        display: inline;
    }
    /* 先頭へ戻るアイコン */
    .top_btn a {
        display: none;
    }
    
    .top_btn_s a {
        /* display: none; */
        position: fixed;
        bottom: 0;
        /* left: 5%; */
        z-index: 10;
        display: inline-block;
        width: 100%;
        font-size: 1.2em;
        line-height: 0.7em;
        background: rgba(61, 96, 129, 0.6);
        /* border-radius: 20px; */
        color: white;
        padding-bottom: 5px;
        text-align: center;
    }
    .top_btn_s a::before {
        content: "^\a^";
        white-space: pre;
        display: block;
        width: 1em;
        height: 1.8em;
        margin: 0 auto -2px;
        transform: scale(3.0, 0.5);
        font-weight: bold;
        left: 50%;
    }
/* jQueryフォントサイズ変更用 */
    div.sel_font {
        width: 80%;
        /* height: 4.2rem;
        text-align: center;
        font-size: 1rem;
        padding-top: 4px;
        box-shadow: 0 1px 1px 2px gray;
        z-index: 10; */
    }
    ul.sel_font li {
        /* align-self: flex-end;
        border: 1px solid #aaa;
        padding: 2px; */
        margin-left: 2em;
        /* border-radius: 5px; */
    } 
    footer {
        padding-bottom: 4.5em;
    }
}  /* 画面サイズ640px以下 */