@charset "utf-8";

/* A Modern CSS Reset */
/* *,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(10px)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}} */

/* Reboot.css */
*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}

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

body {
  font-family: 'みんなの文字ゴStd R2', minmoji, -apple-system, BlinkMacSystemFont, 'Lucida Grande', 'Segoe UI', 'Hiragino Maru Gothic ProN', 'メイリオ', Meiryo, sans-serif, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  line-height: 1;
  position: relative;
}

strong { /* .md では「**」または「__」（いずれも2個） */
  font-size: larger;
  font-weight: bold;
}

em { /* .md では「*」または「_」（いずれも1個） */
  color: #d00; /* 赤っぽい色 */
}

a {
  text-decoration: none;
}

div#headerarea,
div#menuarea,
div#contentarea,
div#footerarea {
  width: 100%;
}

div#headerarea {
  padding-top: .5rem;
  padding-bottom: 1rem;
}

header,
nav.menu,
div#contentbody,
div#sectiontop,
footer {
  max-width: 100%;
  width: 800px;
  margin: 0 auto;
  /* box-shadow: -2px 0 1px 1px #dddddd, 2px 0 1px 1px #dddddd; */
}

div#contentbody {
  font-size: 140%;
}

div#sectiontop {
  width: 100%;
  display: table;
  padding: 1em .5em 1em .5em;
  margin-bottom: 1em;
  position: relative;
}

div#sectiontop > div {
  display: table-cell;
  text-align: center;
}

div#sectiontop > div > a {
  border-radius: .4em;
  position: relative;
  background-color: #fff;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}

div#sectiontop > div > a {
  padding: .4em .7em .4em 1.5em;
  border: 1px solid #ccc;
}

div#sectiontop > div > a::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .5em;
  border-color: transparent #333 transparent transparent;
  position: absolute;
  top: .37em;
  left: 0em;
}

div#sectiontop > div > a:hover {
  color: #ccc;
  background: #333;
  text-decoration: none;
}

div#sectiontop > div > a:hover::before {
  border-color: transparent #ccc transparent transparent;
}

/* *** Style Selector *** */
select#style_selector {
  font-size: 1rem;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  padding: .2em .5em;
  border-radius: 4px;
  border: 2px solid #555;
  /* box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5); */
}

/* ********************* Header ************* */
header {
  padding: 0 .5rem .5rem;
  position: relative;
}
header a.p-signboard__top-link {
  text-decoration: none;
}
header h1 {
  margin: 0;
  /* display: inline-block; */
  position: relative;
}

header h1 img::before {
  content: '大豆戸町内会';
}

header h1 svg,
header h1 img {
  width: 100%;
  height: auto;
  /* width: auto; */
  /* height: 10.5rem; */
  /* filter: drop-shadow(3px 3px 5px #333); */
}

header form {
  display: inline-block;
  position: relative;
  float: right;
  top: .5em;
}

/* ********************* Footer ************* */
footer {
  clear: both;
  padding: .5em .1em;
  font-size: 125%;
}

footer div.poweredby {
  float: right;
  padding-right: 1rem;
  font-size: 60%;
  /* color: gray; */
}

footer div.copyright {
  padding-left: 1rem;
  font-size: 80%;
}

footer div.copyright span.nobreak {
  white-space: nowrap;
}

/* ********************* Menu [nav-drawer] ************* */

#nav-drawer {
  position: relative;
}

/* チェックボックス等は非表示に */
.nav-hidden {
  display:none;
}

/* アイコンのスペース */
#nav-open {
  display: none; /* inline-block; */
  width: 40px;
  height: 34px;
  vertical-align: middle;
  padding: 6px;
  margin-bottom: 0;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 4px;
}

#nav-open::before {
  position: absolute;
  bottom: 0;
  left: -4.5em;
  /* color: #777; */
  /* content: 'メニュー'; */
}

/* ハンバーガーアイコンをCSSだけで表現 */
#nav-open span,
#nav-open span::before,
#nav-open span::after {
  background-color: #000;
  position: absolute;
  height: 4px; /* 線の太さ */
  width: 26px; /* 長さ */
  border-radius: 2px;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span::before {
  bottom: -8px;
}
#nav-open span::after {
  bottom: -16px;
}

/* 閉じる用の薄黒カバー */
#nav-close {
  display: none;/* はじめは隠しておく */
  position: fixed;
  z-index: 99;
  top: 0;/* 全体に広がるように */
  left: 0;
  width: 100%;
  height: 100%;
  /* background: black; */
  opacity: 0;
  transition: .3s ease-in-out;
}

/* 中身 */
#nav-content {
  background-color: white;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/* 最前面に */
  width: 90%;/* 右側に隙間を作る（閉じるカバーを表示） */
  max-width: 20em;/* 最大幅（調整してください） */
  height: 100%;
  /* background: #788; */ /* 背景色 */
  transition: .3s ease-in-out;/* 滑らかに表示 */
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/* 左に隠しておく */
}

/* チェックが入ったらもろもろ表示 */
#nav-input:checked ~ #nav-close {
  display: block;/* カバーを表示 */
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/* 中身を表示（右へスライド） */
  box-shadow: 6px 0 25px rgba(0,0,0,.5);
}

#nav-content .menu__item {
  padding: .5em .5em .5em 0;
  margin-left: 0;
  margin-right: 1em;
  margin-top: .5em;
}

/* ********************* Menu / Sub Menu ************* */

.menu {
}

/* Main menu */
.menu__btn {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  /* color: #fff; */
  /* background: #788; */ /* #2a2a2a; */
  border: 0;
  outline: 0;
}

.menu__btn-title {
  position: relative;
  display: block;
  padding: .5rem .5rem;
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

:focus > .menu__btn-title {
  /* box-shadow: inset 0 0 1px 3px #e22d30; */
}

button:not(:-moz-focusring):focus > .menu__btn-title {
  box-shadow: none;
}

.menu__btn:focus,
.menu__btn-title:focus {
  outline: 0;
}

.js .menu__btn--active {
  /* color: #e22d30; */
}

.menu__list,
.submenu__list {
  list-style: none;
  /* background: #788; */ /* #2a2a2a; */
  padding-left: 0;
  margin: 0;
}

.menu__item {
  margin-left: .2em;
}

.menu__item:first-child {
  margin-left: .5em;
}

.menu__item:hover > a {
}

.menu__item--active {
  background: #e22d30;
}

.menu__link {
  display: block;
  padding: .3rem .5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.menu__list .menu__item .submenu__list {
  background: /* #788; */ /* #2a2a2a; */
  visibility: hidden;
  opacity: 0;
  position: absolute;
  max-width: 15rem;
  transition: all 0.5s ease;
  display: none;
}

.menu__item.menu__dropdown input[type="checkbox"] {
  display: none;
}

.menu__list .menu__item:hover > .submenu__list,
.menu__list .menu__item:focus-within > .submenu__list,
.menu__list .menu__item .submenu__list:hover,
.menu__list .menu__item .submenu__list:focus {
  visibility: visible;
  opacity: 1;
  display: block;
}

.menu__link {
  text-decoration: none;
}

.menu__link:hover {
  /* color: #fff; */
}

.js .menu__list {
  position: absolute;
  z-index: 1;
  width: 100%;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.js .menu__list--active {
  visibility: visible;
  /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.menu__list--transition {
  transition: visibility 0.15s ease, transform 0.15s ease,
    -webkit-transform 0.15s ease;
}

/* *** *** */

span.draft {
    display: inline-block;
    margin-left: .5em;
    padding: 0 .5em .2em;
    /* background-color: #555; */
    /* color: #fff; */
    border-radius: .3em;
    position: relative;
    top: -1em;
    font-size: 50%;
}

div#contentarea {
  padding-bottom: 1rem;
  min-height: 640px;
}

div#contentbody {
  /* max-width: calc(100% - 2rem); */
  overflow-x: hidden !important;
  line-height: 1.75;
}

ul.list,
ul.monthlist,
ul.yearlist {
  min-width: 18rem;
  max-width: 100%;
  list-style: none;
  padding: 0;
}

div#home ul.list li div.title {
  /* border-bottom: 1px dotted gray; */
}

div#notice ul.list li div.title a,
div#home ul.list li div.title a {
  padding-right: 5em;
}

ul.list li time {
	font-size: 80%;
    float: right;
    display: inline-block;
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 0;
}

ul.list li time::before {
    content: '( ';
}

ul.list li time::after {
    content: ' )';
}

ul.list li {
  margin: .5em;
}

ul.list li div.title {
  border: none;
  position: relative;
  padding-left: 1em;
}

ul.list li div.summary {
  margin-top: .5em;
  margin-left: 1em;
}

ul.list li div.summary::after {
  content: ' …';
  
}

ul.list li div.content {
  margin-left: 1em;
}

div#home,
div#news,
div#courses,
div#papers,
div#tips,
div#for,
div#about {
  margin: .5em 1em;
  position: relative;
}

div#home div#faceimage {
  width: 100%;
  margin: auto;
}
div#home div#faceimage img {
  display: block;
  max-width: 100%;
  /* max-height: 240px; */
  height: auto;
  margin: auto;
  /* float: right; */
  /* max-width: 50%; */
  /* padding: 0 0 8px 8px; */
  /* filter: opacity(50%); */
}

div#home div.newarticle {
  margin-bottom: 1.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
div#home div.newarticle span.titlebox {
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
}
div#home div.newarticle span.upperline {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
}
div#home div.newarticle span.icon,
div#home div.newarticle span.newsign,
div#home div.newarticle span.date,
div#home div.newarticle span.title {
}

div#home div.newarticle span.icon {
  margin: 0 .5em 0 0;
}

div#home div.newarticle span.icon img {
  /* height: 64px; */
}

div.newarticle span.date {
  text-align: right;
}

/*
div.newarticle span.date::before { content: '('; }
div.newarticle span.date::after { content: ')'; }
*/
a:hover {
  text-decoration: none;
}

a div.newarticle {
  display: inline-block;
  font-size: 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid #333;
}

a:hover div.newarticle {
  text-decoration: none;
  border-bottom: 1px solid #007bff;
}

div#home h2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
}

div#home h2 span.updatedlist {
  display: inline-block;
  padding: .2em .5em;
  /* color: #fff; */
  /* background-color: #2ca559; */
}

div#home h2 span.notice {
  font-size: 75%;
  display: inline-block;
  float: right;
  position: relative;
  top: 1em;
}

div#home ul.list li div.title::before {
  width: 0;
  height: 0;
  content: '';
  border-width: .3em;
  border-style: solid;
  border-width: .3em 0 .3em .3em;
  /* border-color: transparent transparent transparent #333; */
  position: absolute;
  top: .5em;
  left: .5em;
}

div#homecontent h2,
div#about h2,
div#mamedo h2,
div#notice h2 {
  margin-top: 2rem;
  padding-left: .5rem;
  /* border-left: .5rem solid silver; */
  /* border-right: .5rem solid silver; */
  /* border-top: 1px solid silver; */
  /* border-bottom: 1px dotted silver; */
}

div#homecontent h3,
div#about h3,
div#mamedo h3,
div#notice h3 {
  margin-top: .5rem;
  padding-left: .5rem;
}

div#about figure {
  max-width: 48%;
  display: inline-block;
}

div#about figure img {
  max-width: 90%;
}

div#about figure figcaption {
  max-width: 90%;
  font-weight: bold;
  text-align: center;
}

div#about figure.photo360 {
  max-width: 100%;
}
div#about figure.photo360 figcaption {
  max-width: 100%;
}
div#about figure.photo360 iframe {
}

div#about figure.directions {
  max-width: 100%;
  display: block;
  background-color: #fff;
}

div#about figure.directions img,
div#about figure.directions figcaption {
  width: 100%;
  max-width: 100%;
  /* max-width: 732px; */ /* 実際の画像サイズ（幅）に合わせる */
}

div#links h2 {
  margin-top: 1rem;
}

/* *** 目次 *** */

aside.toc {
  margin: 0 0 1em 1em;
}

aside.toc>nav#TableOfContents ul {
  list-style-type: none;
  padding-left: 0;
  position: relative;
}
aside.toc>nav#TableOfContents li {
  position: relative;
}
aside.toc>nav#TableOfContents>ul {
}
aside.toc>nav#TableOfContents>ul::before {
  display: block;
  content: '＜目次＞';
  text-align: center;
  background-color: silver;
}

aside.toc>nav#TableOfContents>ul {
  padding: 0;
  border: 1px solid silver;
}

aside.toc>nav#TableOfContents>ul {
  padding: 0;
  border: 1px solid silver;
  list-style-type: none;
  margin-left: .5em;
  margin-bottom: 0;
}

aside.toc>nav#TableOfContents>ul>li>ul,
aside.toc>nav#TableOfContents>ul>li {
  margin: 0 .5em 0 1em;
}

aside.toc>nav ul>li a {
  text-decoration: underline;
}

/* *** 目次中の sourcefrom は表示しない *** */
aside.toc>nav ul>li a span.from {
  display: none;
}

aside.toc>nav {
  max-width: 46em;
}

div#about ul.list li {
  margin-top: 1.5em;
}

div#notice span.date {
  display: block;
  text-align: right;
  position: relative;
  top: 2em;
  left; 0;
}

div#notice span.signature {
  display: block;
  text-align: right;
}

div#notice h2 {
  position: relative;
}

div#notice h2 span.date {
  display: block;
  font-size: 70%;
  text-align: right;
}

div#notice h2 span.date>span {
  display: inline-block;
  padding: 0 .2em;
  margin: .2em;
  white-space: nowrap;
  background-color: rgba(255,255,255,.6);
}

div#notice ul.list li div.title,
div#about ul.list li div.title {
  border-radius: .5em;
  padding: .5em;
}

div#notice ul.list li div.title a,
div#about ul.list li div.title a {
  /* color: #fff; */
  text-decoration: none;
}

/* *** 町内会だより『まめど』のページ *** */
div.mamedo {
  position: relative;
}

div.mamedo div.note {
  display: inline-block;
  vertical-align: top;
}

div.mamedo div.note span.text,
div.mamedo div.note span.notice {
  display: block;
  margin-left: 2em;
}

div.mamedo div.note span.notice {
  position: absolute;
  bottom: 1em;
}

div.mamedo div.note span.text::after {
  content: '';
  display: block;
  clear: both;
}

div.mamedo::after {
  content: '';
  display: block;
  clear: both;
}

div#mamedo>div>p::before,
div#mamedo>div>ul::before,
div#mamedo>div>ol::before {
  content: '【補足情報】\A';
  white-space: pre;
}

div#mamedo>div>p,
div#mamedo>div>ul,
div#mamedo>div>ol {
  margin-left: 2em;
  padding: .4em;
}
div#mamedo>div>ul {
  list-style-type: disc;
}
div#mamedo>div>ol {
  list-style-type: decimal;
}
div#mamedo>div>ul>li,
div#mamedo>div>ol>li {
  margin-top: 0;
}
div#mamedo>div>ol>li {
  margin-left: 1em;
  padding: .4em;
}

/* ********* 通常時、印刷時  ********** */

@media screen and (min-width: 767px), print {
  .menu {
  }

  .menu__btn {
    display: none;
  }

  .menu__list,
  .js .menu__list {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    visibility: visible;
    border: 0;
    -webkit-transform: none;
    transform: none;
  }

  .menu__item {
  }

  div#mamedo>div {
    /* font-size: larger; */
  }
}

/* ********************* Table ************* */

table.default {
  border-collapse: collapse;
  /* border: 2px solid gray; */
  margin-bottom: 1em;
}

table.default th,
table.default td {
  padding: .2em .5em;
  border: 1px solid gray;
}

table.default th {
  background-color: #eee;
}

table.default tr:nth-child(even) {
  background-color: #e7ffff;
}

div#about table.stocklist th:nth-child(1) {
  min-width: 27em;
}

div#about table.stocklist th:nth-child(2),
div#about table.stocklist td:nth-child(2) {
  border-right: none;
  padding-right: 0;
}

div#about table.stocklist th:nth-child(3),
div#about table.stocklist td:nth-child(3) {
  border-left: none;
  padding-left: .25em;
}


/* ************* External Link Button ************* */
/*
div.googlemap {
  display: inline-block;
  border: 1px solid gray;
  padding: .2em .5em;
  border-radius: .5em;
}

div.googlemap>a {
}

div.googlemap>span {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: .5em solid black;
  border-top: .5em solid transparent;
  border-bottom: .5em solid transparent;
  position: relative;
  top: .2em;
}
*/

div.download-button,
div.link-button {
  display: inline-block;
  padding: .3rem 0 .6rem;
}

div.download-button > a,
div.link-button > a {
  display: inline-block;
  padding: .2em .5em .2em 1.5em;
  border-radius: .4em;
  position: relative;
}

div.link-button > a::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .5em 0 .5em .5em;
  border-color: transparent transparent transparent #000;
  position: absolute;
  top: .5em;
  left: .5em;
}

div.link-button > a:hover {
  color: #000;
  background: #fff;
  text-decoration: none;
}

div.link-button > a:hover::before {
  border-color: transparent transparent transparent #000;
}

div.download-button {
  display: inline-block;
  padding: .3rem 0 .6rem;
}

div.download-button > a {
  display: inline-block;
  padding: .2em .5em .2em .4em;
  color: #000;
  background: #fff;
  border: 2px solid #fff;
  border-radius: .4em;
  position: relative;
}

div.download-button > a > span.icon-outer {
  font-size: 75%;
  margin-right: 1em;
}

div.download-button > a > span.icon-outer,
div.download-button > a > span.icon-inner {
  display: inline-block;
  position: relative;
  height: 1.5em;
  width: 1.5em;
  border-radius: .5em;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
}

div.download-button > a > span.icon-outer::before {
  content: '';
  height: 0;
  width: 0;
  display: block;
  border: .8em transparent solid; /* transparent */
  border-top-color: #000;
  position: absolute;
  top: .4em;
  left: .3em;
}

div.download-button > a > span.icon-outer::after {
  content: '';
  height: .5em;
  width: .6em;
  display: block;
  background: #000;
  position: absolute;
  top: 0;
  left: .8em;
}

div.download-button > a > span.icon-outer > span.icon-inner::before {
  content: '';
  height: .5em;
  width: 2.1em;
  display: block;
  border: 2px #000 solid;
  border-top: none;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* *** 別ページで開くアイコン *** */
span.open-new-window-icon {
  position: relative;
  padding-left:.5em;
}
svg.open-new-window-icon {
  position: absolute;
  top: 0;
  width: .8em;
  height: .8em;
}

svg.open-new-window-icon {
  fill: currentColor;
}

/* *** 『まめど』 ページ用 *** */

div.mamedo {
  margin-bottom: 1em;
  padding: .5em;
}

div.mamedo > a > span.thumb,
div.mamedo > a > span.text {
  display: inline-block;
}

div.mamedo > span.notice {
  display: block;
  font-size: 80%;
  padding: 2em 1em 1em 2em;
}

div.mamedo > a > span.thumb > img {
  width: 140px;
  height: auto;
  margin-bottom: 10px;
}

/* *** 360°写真用 *** */

iframe {
  border: none;
}
figure.photo360 {
 font-size: 0;
}
figcaption {
  font-size: 1rem;
  border-top: none;
}

/* *** ページ先頭へ戻るボタン *** */

div#pagetop.visible {
	visibility: visible;
}

div#pagetop {
	width: 7rem;
	height: 4rem;
	position: fixed;
	right: 1rem;
	bottom: 1.5rem;
	background-color: #333;
	opacity: .6;
	border-radius: 1.5rem;
	box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
	transition: .5s;
	visibility: hidden;
	z-index: 99;
}

div#pagetop a {
	position: relative;
	display: block;
	width: 7rem;
	height: 4rem;
	text-decoration: none;
}

div#pagetop a::before {
	content: '▲';
	font-size: 1.5rem;
	color: #fff;
	position: absolute;
	width: 1em;
	top: .2em;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

div#pagetop a::after {
	content: 'ページ先頭へ';
	font-size: 1rem;
	color: #fff;
	position: absolute;
	top: 2.4rem;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

div.leaflet {
	display: inline-block;
	position: relative;
	vertical-align: top;
	margin: 1rem 1rem 1rem 0;
	padding: .5rem;
	width: 23rem;
	border: 1px solid gray;
	border-radius: .5rem;
}

div.leaflet div.actname {
	margin-bottom: .5rem;
	padding: 0 .5rem;
	color: white;
	background-color: gray;
}

div.leaflet div.actname span.division {
	font-size: smaller;
	float: right;
}

div.leaflet img {
	border: 1px solid #ccc;
	box-shadow: 8px 8px 8px -4px #ccc;
}

div.leaflet div.note {
	position: absolute;
	bottom: 0;
	right: 0;
}

div.leaflet div.note span.text,
div.leaflet div.note span.notice {
	display: block;
}

div.leaflet h3 {
	font-size: 1.2rem;
	font-weight: bold;
	margin: 0;
}

div.leaflet p {
	margin-bottom: 0;
}

/* *********************************** スマホ対応 ***************************** */

@media screen and (max-width: 767px) {
  #nav-drawer {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  #nav-open {
    display: inline-block;
  }

  nav.menu {
    display: none;
  }

  .menu__item {
    margin-bottom: .3em;
  }

  .menu__item.menu__dropdown .drop-icon {
    display: none;
  }

  .menu__item.menu__dropdown input[type="checkbox"] + .submenu__list {
    display: none;
  }

  .menu__item.menu__dropdown input[type="checkbox"]:checked + .submenu__list {
    border: none;
    padding-left: 1rem; /* 20px; */
    visibility: visible;
    opacity: 1;
    display: block;
    position: relative;
    max-width: 100%;
  }

  header form {
    /* right: 3em; */
  }

  div#home img#kaikan {
    right: 0;
    z-index: -1;
  }

  div#home div.newarticle span.date {
    font-size: 75%;
  }

  div#home div.newarticle span.icon img {
    max-width: 3em;
    height: auto;
  }

  div#mamedo>div figure {
    max-width: 30%;
    margin-right: .5rem;
  }
  div#mamedo>div img {
    width: 100%;
  }

  div#about table {
    width: 100%;
  }

  div#about table.stocklist th:nth-child(1) {
    min-width: 10em;
  }

  div#about table.stocklist th:nth-child(2) {
    min-width: 3em;
  }
  div#about table.stocklist th:nth-child(3) {
    min-width: 4em;
  }

  div#about table.stocklist td:nth-child(2) {
    white-space: nowrap;
  }

  div.leaflet {
    display: block;
    margin: 1rem auto;
  }

  /* *** Style Selector *** */
  select#style_selector {
    right: 3em;
  }
}