@charset "utf-8";

/* サイト共通のデザイン（レイアウト、ヘッダー、フッター、ナビゲーション）を記述する。
content.cssに影響しないように各ブロック内で局所化する。
wysiwygエディターと編集画面では使用しない。 */



/* ヘッダー
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{ display: flex; justify-content:space-between; padding:15px 20px;
/* background: rgba(0, 0, 0, .7); */
background:#fff;
}
header ul{}
header a:link,
header a:visited{ color:#000; }
header ul li i{ margin-left:5px; }

header .logo{ max-width: 210px;}
header .logo img{ width: 100%;}
header .logo p{ color: #000;}

header .snsBoxHead{
list-style: none;
display: flex;
margin-right: 30px;
margin-top: 3px;
}
header .snsBoxHead a{ margin-right: 1em;}
header .snsBoxHead img{ width: 32px;}

@media screen and (max-width: 1040px) {
header .snsBoxHead{
display: none;
}
}


/* グローバルナビゲーション
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* メイン
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main{ text-align: left;
background: #faf6ee;
}


/* フッター
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{ padding: 0; color: #fff; background:#333; }
footer .flexBox div{ margin-bottom: 2em;}
footer a:link,
footer a:visited{ color: #fff;}
footer  div.flexBox { justify-content: space-between;}
footer  div.flexBox { font-size: 14px; margin-bottom: 1em;}
footer  div.flexBox ul li{ margin-bottom: 10px;}

footer h2{ margin-bottom: 1em;}
footer h2 img{ max-width: 160px;}

footer ul{ margin-bottom: 10px;}
footer ul li{
list-style: none;
}

footer .snsBox{}
footer .snsBox li{}
footer .snsBox .flexBox{ justify-content: start;}
footer .snsBox .flexBox li{ margin-right: 1em;}
footer .snsBox .flexBox li img{ width: 100%; max-width: 32px;}

footer .snsBox li.txt{ text-align: center; border: 1px solid #fff;}

@media screen and (max-width: 1080px) {
footer{ padding: 2em 1em;}
footer div.flexBox{ display: block;}
footer .snsBox{ margin-top: 2em;}

footer h2{ margin-bottom: 0;}
}









/*------------------------nav*/
.drawer{ z-index: 9999; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: fixed; top: 10px; right: 10px; padding: 0 9px; width: 48px; height: 48px; background: rgba(255, 255, 255, 1); border-radius: 800px; }
.navbar_toggle{z-index:9999;}
.navbar_toggle_icon { position: relative; display: block; border-radius: 4px; height: 2px; width: 30px; background: #000; -webkit-transition: ease .4s; transition: ease .4s;}
.navbar_toggle_icon:nth-child(1) { top: 0;}
.navbar_toggle_icon:nth-child(2) { margin: 8px 0; width: 60%;}
.navbar_toggle_icon:nth-child(3) { top: 0;}

/*OPEN時の動き*/
/* .navbar_toggle.open .navbar_toggle_icon{ background: #fff;} */
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {top: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {-webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0;}
.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {top: -10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

/*OPEN*/
.menu.open {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 height: 100vh;
 background: #fff;
}

/* @media screen and (max-width: 980px) {} */
nav{}
nav.menu{ position: fixed; -webkit-transform: translateX(100%); transform: translateX(100%); z-index:9998; top: 0px; left: 0; width: 100%; margin: 0;}
nav.menu{ padding: 15px 0 80px; height: 100vh; overflow: scroll; text-align: left; }

nav.menu .logo{ margin-left: 20px;}

nav.menu .btn01 a{ display: block; width: 90%; max-width: 420px; margin: 20px auto; padding: 1em; text-align: center; }
nav.menu .btn01 a.b01{ border: 1px solid #ccc;}
nav.menu .btn01 a.b02{ border: 1px solid #ccc;}
nav.menu .btn01 a.b03{ color: #fff; background: #006699; border-radius: 400px;}

nav.menu ul.nav{ margin: 20px auto 0; border-top: 1px solid #eee;}
nav.menu ul.nav li{ border-bottom: 1px solid #eee;}
nav.menu ul.nav li a{ display: block; padding: 1.5em;}
nav.menu ul.nav li a:hover{ background: #777; color: #fff;}
nav.menu ul.snsBox{ background: #777;}
nav.menu ul.snsBox li a{ display: block; padding: 20px; color: #fff; border-bottom: 1px solid #fff;}
nav.menu ul.snsBox li a img{ width: 20px; margin-right: 1em;}

.menu.open {
animation: fade .2s linear alternate;
}
@keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}






@media screen and (min-width: 980px) {
	/* .drawer{ display: none;}
.navbar_toggle{ display: none;} */
}