*
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body
{
font: 400 13px/1.5 Noto Sans,Tahoma,Geneva,sans-serif;
background-color: white;
background-size: cover;
background-repeat: no-repeat;
line-height: 1.5;
}
h1
{
font-weight: 700;
}
p
{
font-weight: 400;
}
.navbar
{
text-align: center;
overflow: hidden;
background-color: rgba(0, 0, 0, .2);
position: fixed;
width: 100%;
}
.navbar a
{
display: inline-block;
letter-spacing: 0.15625vw;
padding: 1.5625vw;
color: white;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
transition: all ease 0.5s;
text-decoration: none;
font-size: 1vw;
}
.navbar a:hover
{
background-color: #211b4385;
}
.japan
{
padding: 3.75vw 0px 1.25vw 5vw;
}
.img img
{
overflow: hidden;
width: 100%;
height: 35.15625vw;
padding: 0px 5vw 0px 5vw;
}
.img p
{
font-weight: 400;
font-size: 1.25vw;
color: #4d4d4f;
padding-left: 5vw;
opacity: 0.8;
}
.title
{
color: #4d4d4f;
text-align: center;
line-height: 2;
width: 30%;
display: block;
margin: 6.25vw auto 0px auto;
padding-bottom: 15.625vw;
}
.list h1
{
font-size: 2.34375vw;
font-weight: bold;
padding: 0px 0px 0px 5.859375vw;
color: #4d4d4f;
}
.list-image
{
width: 100%;
height: 39.0625vw;
padding: 0.78125vw 2.34375vw 0px 2.34375vw;
margin-bottom: 4.6875vw;
}
.list-image p
{
font-size: 1.25vw;
color: #4d4d4f;
opacity: 0.8;
}
.description
{
padding-bottom: 7.8125vw;
}
.description p
{
font-size: 1.40625vw;
padding: 0px 4.6875vw 0px 4.6875vw;
color: #4d4d4f;
}
.description a
{
color: #4d4d4f;
}
.page-footer
{
padding-top: 3.90625vw;
padding-left: 1.171875vw;
background-color: #282d32;
display: grid;
grid-template-columns: auto auto auto;
height: 19.53125vw;
width: 100%;
}
.page-footer a
{
text-decoration: none;
}
.page-footer h1
{
font-size: 1.25vw;
font-weight: bold;
font-family: 'Segoe UI';
color: #f0f9ff;
padding-left: 3.90625vw;
margin-bottom: 0.9375vw;
}
.page-footer-links
{
padding-left: 1.171875vw;
padding-right: 1.171875vw;
margin-bottom: 0px;
}
.page-footer-links ul
{
list-style-type: none;
}
.page-footer-links ul a
{
font-family: 'Segoe UI';
font-size: 1.09375vw;
color: #f0f9ff;
opacity: 0.6;
line-height:  1.75vw;
padding-left: 3.90625vw;
text-decoration: none;
}
.page-footer-links ul a:hover
{
opacity: 1;
}
.page-footer-contact
{
}
.page-footer-contact ul
{
list-style-type: none;
}
.page-footer-contact ul h3,
.page-footer-contact ul a
{
margin-left: 3.90625vw;
font-size: 1.09375vw;
color: #f0f9ff;
opacity: 0.8;
font-family: 'Segoe UI';
font-weight: normal;
line-height: 1.6;
}
.page-footer-media
{
}
.page-footer-media ul
{
list-style-type: none;
color: #f0f9ff;
padding-left: 3.90625vw;
}
.page-footer-media a
{
color: #f0f9ff;
width: 2.8125vw;
height: 2.8125vw;
font-size: 1.5625vw;
line-height: 2.8125vw;
margin-right: 0.78125vw;
border-radius: 50%;
box-shadow: 0 0 0 0.078125vw rgba(255,255,255,0.4);
opacity: 0.75;
display: inline-block;
text-align: center;
}
.page-footer-media a:hover
{
opacity: 1;
}
@media (max-width: 450px)
{
.navbar a
{
font-size: 86%;
padding: 20px;
}
.japan
{
padding: 60px 0px 8px 16px;
}
.japan h1
{
font-size: 40px !important;
}
.img img
{
padding: 0px;
height: 300px;
}
.img p
{
font-size: 12px;
padding-left: 5px;
}
.title
{
width: 90%;
margin-top: 150px;
padding-bottom: 150px;
}
.title h1
{
font-size: 36px !important;
}
.title p
{
font-size: 24px !important;
padding: 0px 10px 0px 10px;
}
.list h1
{
font-size: 40px;
padding-left: 16px;
}
.list-image
{
width: 100%;
height: 250px;
padding: 5px 0px 0px 0px;
}
.list-image p
{
font-size: 12px;
padding-left: 5px;
}
.description
{
padding-top: 50px;
padding-bottom: 60px;
text-align: justify;
}
.description p
{
font-size: 20px;
}
.page-footer
{
display: grid;
height: 400px;
grid-template-columns: auto;
padding-left: 0px;
padding-top: 30px;
}
.page-footer h1
{
font-size: 18px;
padding-left: 20px;
}
.page-footer-links
{
padding: revert;
}
.page-footer-links ul a
{
font-size: 16px;
line-height: 1.6;
padding-left: 20px;
}
.page-footer-contact ul h3,
.page-footer-contact ul a
{
font-size: 16px;
line-height: 1.6;
padding-left: 20px;
margin-left: 0px;
}
.page-footer-media 
{
width: 100%;
text-align: center;
}
.page-footer-media h1
{
display: none;
}
.page-footer-media ul a
{ 
height: 36px;
width: 36px;
box-shadow:  0 0 0 1px;
line-height: 36px;
font-size: 20px;
margin-right: 10px;
}
}
@media (max-width: 400px)
{
.navbar a
{
padding: 20px 13.5px 20px 13.5px;
}
}
@media (max-width: 360px)
{
.navbar a
{
font-size: 80%;
padding: 20px 10px 20px 10px;
}
}