/*フォントの記載方法
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Roboto', sans-serif;
*/


/*フォントの基準サイズを10pxに変更*/
html {
    font-size: 62.5%;
}
/*意図しない余白の防止*/
body,header,main,section,footer,div,ul,li,p,a,img,h1,h2,h3,h4,figure,form,input,hr,nav {
	margin : 0;
	padding : 0;
}
/*文字設定*/
body {
    font-family: 'Roboto', 'Noto Sans Japanese', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    color: #333;
    word-wrap: break-word;
    overflow-wrap : break-word;
    background-color: #fefefe;
    min-width: 375px;/*iPhone12 mini*/
}

/*各要素の設定*/
a {
    text-decoration: none;
}
h1 {
    font-size: 3.6rem;
}
h2 {
    font-size: 2.8rem;
    color: #014c86;
    letter-spacing: 0.1em;
}
h3 {
    font-size: 1.8rem;
    color: #014c86;
    letter-spacing: 0.1em;
    font-weight: 600;
}
ul {
    list-style: none;
}

@media screen and (max-width: 751px) {
    h1 {
        font-size: 2.4rem;
    }
    h2 {
        font-size: 1.6rem;
    }
    h3 {
        font-size: 1.4rem;
    }
    p {
        font-size: 1.2rem;
    }
}


/*ヘッダーPC*/
header {
    display: flex;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .03),
        0 6px 6px rgba(0, 0, 0, .05);
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 1.4rem;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
}
/*ロゴ*/
.header_logo {
    padding-left: 20px;
    padding-right: 10px;
}
/*各ページリンク*/
.header_nav li {
    list-style: none;
    display: inline-block;
    padding-left: 15px;
}
.header_nav li a {
    color: #666;
}
.header_nav li a:hover {
    color: #0097a7;
}

/*ヘッダーSMP*/
@media screen and (max-width: 751px) {
    .header_logo {
        padding-left: 10px;
    }
    .header_logo img {
        width: 60px;
    }
    .header_nav li {
        font-size: 1.2rem;
        padding-left: 4px;
        padding-right: 6px;
        border-right: 1px solid #999;
    }
    .header_nav li:last-child {
        border-right: none;
    }
}



/*メインPC*/
.main_wrapper {
    max-width: 710px;
    margin: 0 auto;
}
.main_image_wrapper {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.main_image_wrapper img {
    width: 100vw;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.main_image_wrapper h1 {
    position: absolute;
    color: #fff;
    opacity: 0.7;
    top: 60%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 990;
}

/*今後更新*/
main section {
	padding: 20px 0;
}
.wrapper {
	max-width: 710px;
	margin: 0 auto;
	text-align: center;
}
.wrapper h2 {
	display: inline-block;
	width: 300px;
	border-bottom: #333 solid 1px;
}
/*メインSMP*/




/*フッターPC*/
footer {
    background-color: #063852;
    width: 100%;
    font-size: 1.4rem;
}
.footer_wrapper {
    max-width: 710px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
}
footer section {
    padding-top: 10px;
}
footer section p {
    padding-top: 5px;
}
footer a {
    color: #fefefe;
}
footer a:hover {
    color: #a5b8d0;
}
#copylight {
    font-size: 1.2rem;
    text-align: center;
    color: #fff;
    background-color: #222;
    padding: 5px;
    margin-top: 10px;
}

/*フッターSMP*/
@media screen and (max-width: 751px) {
    .footer_wrapper {
        font-size: 1.2rem;
        max-width: 275px;
        grid-template-columns: 1fr 1fr;
    }
    #copylight {
        font-size: 1rem;
        padding: 3px;
    }
}