@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

/*base*/
html {
	font-size: 2.7vw;
	position: relative;
	text-align: center;
	/*scroll-behavior: smooth;*/
}
body {
    background-color: #f87f2f;
    color: #494949;
  font-family: "Noto Sans JP", sans-serif;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.8;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	position:relative;
	overflow-x:hidden;
}


.fw_jost {
  font-family: "Jost", serif;
}


#header{
    padding: 1em 1em 3em 1em;
}
#header h1{
    width: 4em;
}
#footer{
    padding: 3em 1em 1em 1em;
}
#footer p{
    font-size: 1.4rem;
    color: #fff;
    text-align: left;
}

    .container{
        max-width: 100%;
        padding: 0 1em;
    }


.container h2{
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 2em;
}
.container h2 p{
    font-size: 4.2rem;
    margin-bottom: 0.2em;
}

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

@media screen and (min-width: 769px) {
    .container{
        max-width: 83em;
        padding: 0;
    }
/*base*/
html {
	font-size: 0.7vw;
}
    
    .sp{
        display: none;
    }

#header{
    padding: 2em 3em 10em 3em;
}
#header h1{
    width: 15em;
}
#footer{
    padding: 10em 3em 5em 3em;
}
    #footer p{
        font-size: 1.5rem;
    }
    
.container h2{
    line-height: 1;
    margin-bottom: 3em;
}
.container h2 p{
    font-size: 8rem;
}
    
}



@media screen and (min-width: 1430px) {

/*base*/
html {
	font-size: 62.5%;
}
    
}