@charset "UTF-8";

html{
font-size:62.5%;
}
body{
font-size:1.6em;
font-family: 'Noto Sans JP', sans-serif !important;
font-weight:400;
background:#FFF;
color:#000;
text-align:center;
margin:0;
padding:0;
animation:fadeIn 5s ease 0s 1 normal;
-webkit-animation:fadeIn s ease 0s 1 normal;
}
@keyframes fadeIn{
0% {opacity:0}
100% {opacity:1}
}
@-webkit-keyframes fadeIn{
0% {opacity:0}
100% {opacity:1}
}
img{
width:100%;
height:auto
}
.clearfix{
display:block;
}
.clear{
clear:both;
}
.clear hr{
display:none;
}
ul,li{
list-style:none;
}








@media screen and (min-width:1024px) {
.smp{
display:none;
}
.tablet{
display:none;
}
.pc{
display:block;
}







}
@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}







}
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
.tablet{
display:none;
}
.smp{
display:block;
}








}









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

CONTACT

================================================== */
@media screen and (min-width:1024px) {
main .contents{
position:relative;
}
.contents h2{
font-size:40px;
font-weight:300;
letter-spacing:0.05em;
line-height:1em;
margin-bottom:1.5em;
}
.contents h2 span{
font-size:0.5em;
font-weight:400;
}
.contact{
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
.contact p{
font-size:18px;
line-height:1.8em;
letter-spacing:0.07em;
}
.contact p a:link{
color:#000;
text-decoration:none;
border-bottom:1px solid #000;
padding-bottom:0.1em;
}
.contact p a:hover{
background:#3A5B52;
color:#FFF;
text-decoration:none;
border-bottom:1px solid #3A5B52;
padding-bottom:0.1em;
}
.contact p a:visited{
color:#000;
text-decoration:none;
border-bottom:1px solid #000;
padding-bottom:0.1em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
main{
display:flex;
justify-content:center;
align-items:center;
}
.contents h2{
font-size:40px;
font-weight:300;
letter-spacing:0.05em;
line-height:1em;
margin-bottom:1.5em;
}
.contents h2 span{
font-size:0.5em;
font-weight:400;
}
main .contents{
position:relative;
}
.contact{
position:absolute;
top:50%;
/*left:50%;*/
transform:translateY(-50%)/* translateX(-50%)*/;
-webkit- transform: translateY(-50%)/* translateX(-50%)*/;
}
.contact p{
font-size:18px;
line-height:1.8em;
letter-spacing:0.07em;
}
.contact p a:link{
color:#000;
text-decoration:none;
border-bottom:1px solid #000;
padding-bottom:0.1em;
}
.contact p a:hover{
background:#3A5B52;
color:#FFF;
text-decoration:none;
border-bottom:1px solid #3A5B52;
padding-bottom:0.1em;
}
.contact p a:visited{
color:#000;
text-decoration:none;
border-bottom:1px solid #000;
padding-bottom:0.1em;
}
/*main .contents{
position:relative;
}
.contact{
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
.contact p{
font-size:15px;
line-height:1.8em;
}*/



}
@media only screen and (min-width:320px) and (max-width:767px) {
main{
display:flex;
justify-content:center;
align-items:center;
}
.contents h2{
font-size:36px;
font-weight:300;
letter-spacing:0.05em;
line-height:1em;
margin-bottom:1.5em;
}
.contents h2 span{
font-size:0.5em;
font-weight:400;
}
main .contents{
position:relative;
}
.contact{
position:absolute;
top:50%;
/*left:50%;*/
transform:translateY(-50%)/* translateX(-50%)*/;
-webkit- transform: translateY(-50%)/* translateX(-50%)*/;
}
.contact p{
font-size:16px;
line-height:1.8em;
letter-spacing:0.07em;
}
.contact p a:link{
color:#000;
text-decoration:none;
border-bottom:1px solid #000;
padding-bottom:0.1em;
}
.contact p a:hover{
background:#3A5B52;
color:#FFF;
text-decoration:none;
border-bottom:1px solid #3A5B52;
padding-bottom:0.1em;
}
.contact p a:visited{
color:#000;
text-decoration:none;
border-bottom:1px solid #000;
padding-bottom:0.1em;
}


}









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

FOOTER

================================================== */
@media screen and (min-width:1024px) {
footer{
position:absolute;
bottom:0;
right:2%;
}
footer p{
font-size:13px;
font-weight:300;
letter-spacing:0.03em;
margin:1em auto;
}



}
@media only screen and (min-width:768px) and (max-width:1023px) {
footer{
position:absolute;
bottom:0;
right:2%;
}
footer p{
font-size:13px;
font-weight:300;
letter-spacing:0.03em;
margin:1em auto;
}

}
@media only screen and (min-width:320px) and (max-width:767px) {
footer{
position:absolute;
bottom:0;
right:2%;
}
footer p{
font-size:13px;
font-weight:300;
letter-spacing:0.03em;
margin:1em auto;
}

}