@charset "utf-8";


html     ,
body     ,
article  ,
section  ,
div      ,
h1       ,
h2       ,
h3       ,
h4       ,
h5       ,
dl       ,
dt       ,
dd       ,
ul       ,
ol       ,
li       ,
p        ,
input    ,
select   ,
textarea {
	margin:0;
	padding:0;
	font-family: 'Zen Maru Gothic', sans-serif , YakuHanMP, '游明朝', YuMincho, 'Noto Serif JP', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
	color: #282826;
	font-size: 18px;
    font-weight:500;
	font-feature-settings: "palt"1;
	line-height: 2;
	letter-spacing:0.05em;
	-webkit-text-size-adjust:100%;
	border:none;
}

@media only screen and (max-width:640px){
    
    html     ,
    body     ,
    article  ,
    section  ,
    div      ,
    h1       ,
    h2       ,
    h3       ,
    h4       ,
    h5       ,
    dl       ,
    dt       ,
    dd       ,
    ul       ,
    ol       ,
    li       ,
    p        ,
    input    ,
    select   ,
    textarea {
        font-size:16px;
        line-height:1.8;
        letter-spacing:0.02em;
    }
}

.en {
    font-family: 'Oleo Script Swash Caps', cursive;
    letter-spacing: 0;
}

html {
	overflow-y:scroll;
	margin-bottom:1px;
	height:100%;}


body {overflow:hidden; background:#f4f2ee;}


img {
    max-width:100%;
	margin:0;
	padding:0;
	vertical-align:bottom;
	line-height:0;
	border:none;
    -webkit-backface-visibility: hidden;}


ul ,
ol {
	list-style:none;}

li {
	list-style-position:outside;}


table {
	border-collapse:collapse;}


th ,
td {
	padding:0;
	text-align:left;
	vertical-align:top;}


a {
	color:#222;
	text-decoration:none;
	transition: .2s;}

a:hover {
	opacity: .6;}


p {
	text-align:justify;
	text-justify:inter-ideograph;}


::selection {background:#ffffa0;}
::-moz-selection {background:#ffffa0;}/* for Firefox */



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

    .sp ,
    .SPnav { display:none !important;}
}

@media only screen and (max-width:640px){
    
    .pc ,
    .PCnav { display:none !important;}

}



/* -------------------------------------------------- */



/* header */

header {
    width:100%;
}
header h1 {
    width:200px;
    position:absolute; top:20px; left:20px;
    transition: .3s;
}
header h1 a {display:block;}

header h2 {width:90%; margin:0 auto; color:#be623f; font-size:2.5rem; text-align:center;}
header h2 img {
    margin:150px auto 20px;
    display:block;
}

header > a.base {position:fixed; top:0; right:0; z-index:1000;}

@media only screen and (max-width:640px){
    
    header h1 {
        width:120px;
        top:10px; left:20px;
    }
	header h2 {font-size:2rem;}
    header h2 img {margin:150px auto 0;}
}


/* footer */

footer {
    width:100%;
    margin: 0 auto;
    padding:150px 0 50px;
}
footer small {
    width:100%;
    margin:0 auto;
    display:block;
    font-size: 1.2rem;
    text-align:center;
}

@media only screen and (max-width:640px){
    
    footer {padding:100px 0 50px;}
}