@charset "utf-8";

/* =======================================

	Structure CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
 	1.wrapper
	2.header
	3.pageTop
	4.footer

========================================== */

html { scroll-behavior: smooth;}

body {
	background: #fff;
	color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-size: clamp( 8px, 1.8181vw, 20px );
    font-weight: 500;
    font-style: normal;
    line-height: 1;
}

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

.pc{}
.sp{    display: none;}
@media screen and (max-width:767px){
    .pc{    display: none;}
    .sp{    display: block;}
}

/* 1.wrapper
---------------------------------------------------------- */
.wrapperOuter{   padding: 0 20px}
.wrapper{
    max-width: 1100px;
    margin: auto;
}
@media screen and (max-width:767px){
    .wrapperOuter{   padding: 0 8vw}
}

/* 2.header
---------------------------------------------------------- */
body > div > header{
    border-bottom: 4px solid #9f9f9f;
}
.siteName{
    max-width: 618px;
    width: 56.1818%;
    margin: clamp( 20px, 3.5%, 40px ) auto;
}

main header{}

@media screen and (max-width:767px){
    body > div > header{
        border-bottom: .53333vw solid #9f9f9f;
    }
    .siteName{
        max-width: 100%;
        width: 71.3333vw;
        margin: 5.3333vw auto;
    }
}


/* 3.pageTop
---------------------------------------------------------- */
.pageTop{
    position: relative;
    max-width: 1100px;
    margin: auto;
}
.pageTop a{
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -4%;
    max-width: 86px;
    width: 7.8636%;
}
@media screen and (max-width:767px){
    .pageTop{}
    .pageTop a{
        right: 4.5vw;
        margin-top: -8vw;
        max-width: 100%;
        width: 13.3333vw;
    }
}



/* 4.footer
---------------------------------------------------------- */
footer{
    background: #333;
    color: #fff;
    font-size: 85%;
    text-align: center;
    padding: clamp( 20px, 3.5%, 40px ) 0;
}
footer .siteName{
    margin: auto;
}
footer nav ul{
    display: flex;
    justify-content: center;
    margin: clamp( 20px, 5%, 50px )  0;
}
footer nav li{
    display: block;
    border-right: 1px solid #fff;
    padding: 0 .5%;

}
footer nav li:last-child{   border: none;}

.copyright{
    letter-spacing: .1em;
}

footer aside.note{
	text-align: left;
	line-height: 1.3;
	max-width: calc( 850px + 10% );
	width: 100%;
	margin: clamp( 20px, 5%, 50px )  auto 0;
	padding: 0 5%;
}

@media screen and (max-width:767px){
    footer{
        font-size: 2.2666vw;
        padding: 8vw 0;
    }
    footer .siteName{}
    footer nav ul{
        margin: 8vw  0;
    }
    footer nav li{
        padding: 0 1.5vw;
        
    }
	footer aside.note{
		margin: 8vw auto 0;
		padding: 0 5%;
	}

}