*,
*::before,
*::after {
box-sizing: border-box;
}
* {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@-ms-viewport {
width: device-width;
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
body {
margin: 0;
font-size: 1rem;
font-weight: 100;
line-height: 1.8;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
dfn {
font-style: italic;
}
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([tabindex]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
pre,
code,
kbd,
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: 0.75rem;
padding-bottom: 0.75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
}
button:focus {
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
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-cancel-button,
[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;
}@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
font-family: 'EB Garamond',serif;
line-height: 1.7em;
}
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
}
a {
text-decoration: none;
}
a:link {
color: #ffffff;
text-decoration: none;
outline: none;
}
a:visited {
color: #ffffff;
}
a:hover {
　color: #ffffff;
text-decoration: none;
outline: none;
}
a:active {
color: #ffffff;
outline: none;
}
.fadein.scrollin {
opacity: 1;
transform: translate(0, 0);
}
.fadein {
opacity: 0.0;
transform: translate(0, 50px);
transition: all 1000ms;
}
body {
background: linear-gradient(143deg, #2f2f2f, #0e0d0d);
}
.description a {
text-decoration: none;
text-decoration: none;
color: #256ebb!important;
border-bottom: 1px solid #256ebb;
font-weight: bold;
}
.description a:hover {
　color: #256ebb!important;
border-bottom: 2px solid #256ebb;
}
.description a:active {
color: #256ebb!important;
}
.mb10{ margin-bottom: 10px; }
.mb20{ margin-bottom: 20px; }
.mb30{ margin-bottom: 30px; }
.mb40{ margin-bottom: 40px; }
.mb50{ margin-bottom: 50px; }
.mb100{ margin-bottom: 100px; }
.mt150{ margin-top: 150px!important; }
.mt130{ margin-top: 130px!important; }
.mt120{ margin-top: 120px!important; }
.mt110{ margin-top: 110px!important; }
.pb10{ padding-bottom: 10px; }
.pb20{ padding-bottom: 20px; }
.pb30{ padding-bottom: 30px; }
.pb40{ padding-bottom: 40px; }
.pb50{ padding-bottom: 50px; }
.pb100{ padding-bottom: 100px; }
.pb150{ padding-bottom: 150px; }
.pt50{ padding-top: 50px; }
.pt100{ padding-top: 100px; }
.view_sp{ display: none!important; }
.view_wide{ display: block!important; }
@media screen and (max-width:768px) {
.view_sp{ display: block!important; }
.view_wide{ display: none!important; }
}
a, button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
button{
font-size: 11px;
line-height: 1.7em;
letter-spacing: 1px;
font-family: 'EB Garamond',serif;
outline: none;
}
header {
height: 100px;
z-index: 4000;
position: fixed;
background-color: #2b2b2b;
width: 100%;
}
.pageclass_top header {
background-color: rgba(0, 0, 0, 0.0);
}
.pageclass_sub header {
margin-bottom: 20px;
}
.pageclass_sub > .sections {
padding-top: 100px;
}
.logo a{
border: 0px;
}
.globalmenu {
display: inline-block;
position: absolute;
top: 0px;
right: 20px;
height: 100%;
transition: all 0.3s ease-in;	
}
.globalmenu li {
line-height: 100px;
display: inline-block;
padding: 0px 20px;
}
.globalmenu li a{
font-size: 14px;
letter-spacing: 5px;
color: #ffffff!important;
font-weight: 100;
border: 0px;
}
.globalmenu li a:hover{
color: #ffffff!important;
border: 0px!important;
border: 0px!important;
}
.footer-menu {
transition: all 0.3s ease-in;
width: 260px;
text-align: left;
margin-left: 30px;
}
.footer-menu li {
display: inline-block;
padding-right: 20px;
}
.footer-menu li a{
font-size: 10px;
letter-spacing: 2px;
color: #ffffff!important;
font-weight: 100;
border: 0px;
}
.footer-menu li a:hover{
color: #333333!important;
border: 0px!important;
border: 0px!important;
}
.footer-menu ul {
margin-left: 0px;
padding-left: 0px;
}
.left-unit {
float: left;
}
.left-unit {
float: left;
}
.right-unit {
float: right;
}
.pageclass_sub .hedarea {
display: block;
}
.pageclass_top .hedarea {
display: none;
} .sections.mt130{
margin-top: 110px!important;
}
.sections.mt100{
margin-top: 110px!important;
}
header {
z-index: 4000;
width: 100%;
}
header h1.logo {
margin-top: 30px;
margin-left: 20px;
display: block;
font-size: 12px;
letter-spacing: 4px;
margin-bottom: 0px;
}
header .caption {
font-size: 10px!important;
margin-left: 20px;
letter-spacing: 2px;
color: #A09680;
}
.globalmenu {
overflow: auto;
width: 100%;
position: fixed;
z-index: 990;
right: 0px;
}
.globalmenu ul {
padding: 0px;
position: absolute;
left: calc(50% - 76px);
top: calc(50% - 156px);
}
.globalmenu li {
padding: 0px 20px;
line-height: initial;
display: block;
text-align: center;
margin-bottom: 20px;
}
.globalmenu li a{
font-size: 14px;
letter-spacing: 5px;
color: #ffffff;
}
.minilogo {
width: 50px;
margin-top: 60px;
}
header .line {
position: absolute;
bottom: 0px;
}
.right-menu {
position: absolute;
right: 0px;
bottom: 0px;
padding: 20px;
text-align: center;
font-size: 11px;
z-index: 9999;
}
.globalmenu.close{
opacity: 0.0;
top:-100%;
}
.globalmenu.open{
opacity: 1.0;
top:0px;
background-color: rgba(10,10,10,0.8);
} .flexslider, ul.slides, .flexslider .slides li, .flexslider .slides img{
width: 100%;
height: 100%;
} .section.map {
margin: 0 auto;
width: 800px;
}
.section.event{
margin: 0 auto;
width: 800px;
}
.section.slider{
margin-left: 0px;
margin-right: 0px;
}
.section.about {
width: 600px;
margin: 0 auto;
}
.top {
width: 100%;
padding: 180px 0px;
}
.top h1 {
text-align: center;
letter-spacing: 3px;
font-size: 14px;
}
.top .caption {
font-size: 10px!important;
letter-spacing: 3px;
color: #A09680;
text-align: center;
}
.blog .title {
margin: 0 auto 70px;
text-align: center;
}
.member .title {
margin: 0 auto 70px;
text-align: center;
}
.section .title {
margin-bottom: 100px;
}
.section .title h2,.section .title h3 {
margin-bottom: 0px;
letter-spacing: 6px;
font-weight: 100;
font-size: 16px;
}
.sub_caption {
font-size: 11px;
margin-bottom: 17px;
}
.section .title .caption {
font-size: 10px;
}
.section .description {
font-size: 13px;
line-height: 2.0em;
margin-bottom: 40px;
}
.section .description img {
width: 100%;
}
.section .more-button{
text-align: center;
margin-bottom: 100px;
}
.section .more-button img{
width: 198px;
}
.section.about .title {
margin-bottom: 30px;
}
.section.about .title h2,.section.about .title h3 {
margin-bottom: -8px;
letter-spacing: 6px;
font-weight: 100;
}
.section.about .title .caption {
font-size: 10px;
}
.section.about .description {
font-size: 13px;
line-height: 2.0em;
margin-bottom: 40px;
}
.section.about .description img {
width: 100%;
}
.section.about .more-button{
text-align: center;
}
.section.about .more-button img{
width: 198px;
}
.section.attention {
width: 600px;
margin: 0 auto;
}
.section.attention .title {
margin-bottom: 30px;
}
.section.attention .title h2,.section.about .title h3 {
margin-bottom: -8px;
letter-spacing: 6px;
font-weight: 100;
}
.section.attention .title .caption {
font-size: 10px;
}
.section.attention .description {
font-size: 13px;
line-height: 2.0em;
margin-bottom: 40px;
}
.section.attention .description img {
width: 100%;
}
.section.attention .more-button{
text-align: center;
}
.section.attention .more-button img{
width: 198px;
}
@media screen and (max-width:768px) {
.section.about .title {
margin-left: 0px;
}
.blog .title {
width: auto;
}
.section.attention{
margin-left: 30px;
margin-right: 30px;
width: auto;
}
.section .title {
margin-left: 0px;
margin-bottom: 30px;
}
}
.section.map .title {
margin-bottom: 30px;
}
.section.map .title h2,.section.map .title h3 {
margin-bottom: -8px;
letter-spacing: 6px;
font-weight: 100;
}
.section.map .title .caption {
font-size: 10px;
}
.section.map iframe{
width: 100%;
}
.section.event .title {
margin-bottom: 30px;
}
.section.event .title h2,.section.event .title h3 {
margin-bottom: -8px;
letter-spacing: 6px;
font-weight: 100;
}
.section.event .title .caption {
font-size: 10px;
}
.section.event .description {
font-size: 13px;
line-height: 2.0em;
margin-bottom: 40px;
}
.section.event .event-title{
text-align: center;
margin-bottom: 50px;
}
.section.event .event-title img{
width: 292px;
}
.section.event h2.event-title span,.section.event h3.event-title span {
font-size: 20px;
text-align: left;
letter-spacing: 2px;
}
.section.event h2.event-title,.section.event h3.event-title {
font-size: 29px;
font-weight: 100;
}
.section.event .description{
font-size: 13px;
}
.section.event .description img{
width: 100%;
margin-bottom: 20px;
}
.section.event .more-button{
text-align: center;
}
.section.event .more-button img{
width: 198px;
}
@media screen and (max-width:768px) {
.section.event h2.event-title span,.section.event h3.event-title span {
font-size: 15px;
}
.section.event h2.event-title,.section.event h3.event-title{
font-size: 22px;
}
.section.event .description iframe{
width: 100%;
}
} footer{
text-align: center;
padding-top: 50px;
margin-bottom: 20px;
}
footer .footermenu ul{
padding: 0px;
}
footer .footermenu li {
line-height: 100px;
display: inline-block;
padding: 0px 20px;
}
footer .footermenu li a{
font-size: 13px;
letter-spacing: 2px;
color: #ffffff;
}
footer .placefiller{
margin: 0px;
letter-spacing: 1px;
font-size: 12px;
}
footer .sns-icon {
width: 290px;
overflow: auto;
margin: 0 auto;
}
footer .sns-icon a img {
width: 30px;
height: auto;
margin-bottom: 30px;
}
footer .sns-icon .item{
display: inline-block;
font-size: 10px;
letter-spacing: 2px;
color: #333333!important;
font-weight: 100;
border: 0px;
margin-right: 10px;
text-align: center;
margin-left: 10px;
}
.center-unit .item{
color: #fff;
letter-spacing: 2px;
font-size: 11px;
}
footer .logo-v{
width: 80px;
}
@media screen and (max-width:768px) {
footer .logo-v {
padding-bottom: 20px;
}
footer .footermenu li {
line-height: 50px;
display: inline-block;
padding: 0px 20px;
width: 49%;
}
footer .footermenu li a{
font-size: 10px;
}
footer .sns-icon {
width: auto;
overflow: auto;
margin-bottom: 30px;
}
footer .sns-icon .item {
font-size: 10px;
letter-spacing: 2px;
color: #333333!important;
font-weight: 100;
border: 0px;
margin-right: 20px;
text-align: right;
margin-bottom: 3px;
}
}
.menu-area.close {
transition: all 0.3s linear;
height: 0px;
padding: 0px;
padding-top: 5px;
overflow: hidden;
}
.right-menu.switch {
top: 20px;
right: 30px;
padding: 0px;
border: 0px;
height: 50px;
}
button {
display: block;
background: none;
border: none;
padding: 0;
width: 40px;
color: #fff;
letter-spacing: 0.1em;
cursor: pointer;
top: 10px;
left: 10px;
z-index: 1001;
text-align: center;
outline: none;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
button span.bar {
display: block;
height: 1px;
background-color: #fff;
margin: 12px 0;
transition: all 0.3s;
transform-origin: 0 0;
width: 36px;
}
button.active .bar1 {
transform: rotate(40deg);
margin-left: 1px;
}
button .close {
letter-spacing: 0.08em;
display: none;
font-size: 10px;
}
button .menu {
display: inline;
font-size: 10px;
margin-left: 0px;
padding: 0px;
margin: 0px;
line-height: 0px;
letter-spacing: 0px;
}
button.active span.bar {
width: 40px;
}
button.active .bar1 {
transform: rotate(40deg);
margin-left: 5px;
}
button.active .bar2 {
opacity: 0;
}
button.active .bar3 {
transform: rotate(-40deg);
margin-left: 5px;
}
button.active .menu {
display: none;
}
button.active .close {
display: inline;
font-size: 10px;
margin-left: 0px;
padding: 0px;
margin: 0px;
line-height: 0px;
letter-spacing: 0px;
}
.contact_block p{
font-size: 11px;
}
ul.about-list{
padding-left: 0px;
}
ul.about-list li{
font-size: 13px;
list-style: none;
margin-bottom: 50px;
padding-bottom: 20px;
border-bottom: 1px solid #E1CCA4;
}
ul.about-list .text {
margin-left: 100px;
}
ul.about-list span {
float: left;
margin-right: 30px;
}
ul.doc-list{
padding-left: 0px;
}
ul.doc-list li{
font-size: 13px;
list-style: none;
margin-bottom: 10px;
}
ul.doc-list li span.cap {
font-size: 11px;
background-color: #E1CCA4;
line-height: 1.8em;
padding: 3px 8px;
margin-left: 10px;
list-style: none;
margin-bottom: 10px;
display:inline-block;
}
input, select, optgroup, textarea {
border: 1px solid #555555;
width: 100%;
padding: 3px;
}
.section.contact {
width: 600px;
margin: 0 auto;
}
.contact_block{
margin-bottom: 40px;
}
.contact_block p{
margin-bottom: 10px;
}
input[type=radio], input[type=checkbox] {
width: auto;
} input[type="submit"]{
background-color: #5d5c5b;
color: #ffffff;
margin-bottom: 20px;
}
.contact_message{
font-size: 11px;
margin-bottom: 50px;
}
.section.contact .description {
font-size: 13px;
line-height: 2.0em;
margin-bottom: 40px;
}
@media screen and (max-width:768px) {
.section.contact {
width: auto;
margin: 0 auto;
margin-left: 30px;
margin-right: 30px;
}
} section.member, section.blog, section.report{
width: 960px;
margin: 0 auto 100px;
}
.layout_entry_wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
}
.layout_entry{
position: relative;
width: 300px;
margin: 10px;
text-align: center;
}
.layout_entry .title_section {
text-align: left;
margin-left: 10px;
font-size: 11px;
}
.title_section p {
font-size: 13px;
letter-spacing: 1px;
font-family: sans-serif;
}
.title_section .link {
font-size: 11px;
letter-spacing: 1px;
font-family: sans-serif;
padding-bottom: 20px;
border-bottom: 1px solid #4a4a4a;
}
.layout_entry img {
width: 280px;
height: 280px;
object-fit: cover;
margin-bottom: 20px;
}
.layout_entry .title_section h2 {
font-size: 14px;
color: #ffffff;
line-height: 1.8em;
letter-spacing: 2px;
text-align:center;
margin-bottom: 20px;
}
.layout_entry .title_section .category {
margin-bottom: 15px;
font-size: 12px;
background-color: #989898;
display: inline-block;
padding: 5px 10px;
}
.layout_schedule_entry{
margin: 0 auto;
width: 500px;
text-align: left;
}
.layout_schedule_entry .layout_schedule_child .title_section {
text-align: left;
font-size: 11px;
}
.layout_schedule_entry .layout_schedule_child .title_section p {
font-size: 11px;
letter-spacing: 1px;
font-family: sans-serif;
}
.layout_schedule_entry .layout_schedule_child  .title_section h2 {
font-size: 11px;
color: #ffffff;
line-height: 1.8em;
letter-spacing: 2px;
text-align:left;
margin-bottom: 20px;
}
.layout_schedule_entry .layout_schedule_child .date{
font-size: 11px;
color: #C0AF81;
letter-spacing: 1px;
font-family: serif;
margin-bottom: 5px;	
}
.layout_schedule_entry .layout_schedule_child .location{
font-size: 11px;
color: #C0AF81;
letter-spacing: 1px;
font-family: serif;
margin-bottom: 5px;	
}
.layout_schedule_entry .layout_schedule_child .readmore{
font-size: 11px;
letter-spacing: 1px;
font-family: serif;
text-align: right;
padding-bottom: 10px;	
border-bottom: 1px solid #ffffff;
}
.layout_schedule_single {
margin-bottom: 60px;
}
.layout_schedule_single p {
margin-bottom: 0px!important;
color: #C0AF81!important;
line-height: 2.0em!important;
letter-spacing: 2px!important;
font-size: 12px!important;
}
@media screen and (min-width:0px) and ( max-width:960px) {
.layout_schedule_entry{
width: auto;
margin: 0 20px;
}
}
.title_section .category.gray{
background-color: #989898;
}
.title_section .category.blue, .title_section .category.news{
background-color: #8cb9bb;
}
.title_section .category.red, .title_section .category.musubine{
background-color: #E18483;
}
.title_section .category.yellow, .title_section .category.kyobatethinking{
background-color: #cec183;
}
.title_section .category.green, .title_section .category.hatenomidori{
background-color: #20B2AA;
}
.title_section .category.green, .title_section .category.jikkenntenpo{
background-color: #00bb98;
}
.title_section .category.green, .title_section .category.hitdukuri{
background-color: #33AA98;
}
.title_section .category a{
}
.title_section .date {
font-size: 8px;
}
.title_section {
text-align: left;
}
.title_section .category .line {
border-bottom: 1px solid #aaaaaa;
width: 40px;
height: 1px;
display: inline-block;
margin-right: 30px;
top: -3px;
position: relative;
margin-left: 30px;
}
.blog .more_link {
font-size: 20px;
font-weight: 400;
width: auto;
display: block;
padding-bottom: 5px;
text-align: center;
font-family: 'EB Garamond',serif;
}
@media screen and (min-width:0px) and ( max-width:960px) {
section.blog {
width: auto;
}
.layout_entry_wrapper{
width: 100%;
margin: 0 auto;
display: block;
}
.layout_entry img {
object-fit: cover;
width: 100%;
height: 100%;
}
.layout_entry{
width: auto;
height: auto;
margin: 10px 20px 100px 20px;
}
.title_section h2 {
font-size: 18px;
font-weight: 100;
}
.title_section .category .line {
border-bottom: 1px solid #aaaaaa;
width: 40px;
height: 1px;
display: inline-block;
margin-right: 15px;
margin-left: 15px;
top: -3px;
position: relative;
}
}
@media screen and (min-width:0px) and ( max-width:640px) {
section.blog {
width: 100%;
}
.layout_entry_wrapper{
width: 100%;
margin: 0 auto;
display: block;
}
.layout_entry img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
.news {
width: 600px;
margin: 70px auto 120px;
position: relative;
}
.news ul li span.date {
font-size: 11px;
letter-spacing: 2px;
margin-right: 50px;
}
.news .more_link{
font-size: 10px;
font-weight: 400;
position: absolute;
right: 0px;
letter-spacing: 2px;
}
.news h3{
color: #707070;
font-size: 14px;
margin-bottom: 80px;
font-weight: 100;
margin-left: 0px;
letter-spacing: 2px;
}
.news ul{
margin-bottom: 20px;
margin-left: 0px;
padding-left: 0px;
}
.news ul li{
list-style: none;
font-size: 11px;
margin-bottom: 17px;
position: relative;
}
.news ul li span{
font-size: 11px;
letter-spacing: 2px;
}
.news ul li span.category-name{
margin-right: 0px;
width: 80px;
display: inline-block;
}
.news ul li .line{
border-bottom: 1px solid #aaaaaa;
width: 40px;
height: 1px;
display: inline-block;
margin-left: 30px;
margin-right: 30px;
top: -3px;
position: relative;
}
.news ul li .blank{
width: 100px;
display: inline-block;
position: absolute;
right: 0px;
text-align: right;
font-size: 10px;
}
.news ul li a{
font-size: 12px;
color: #707070;
}
@media (max-width: 960px) {
.news {
width: auto;
height: auto;
margin: 70px auto;
padding: 0px 20px;
z-index: 0;
overflow: hidden;
}
.news ul li span.date {
font-size: 10px;
letter-spacing: 2px;
margin-right: 50px;
display: block;
}
.news h3 {
font-size: 16px;
margin-left: 0px;
}
.news ul li{
margin-bottom: 30px;
}
.news ul li .line{
border-bottom: 1px solid #AAAAAA;
width: 40px;
height: 1px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
top: 2px;
position: relative;
}
.news ul li a{
font-size: 11px;
}
.news ul li span.category-name{
width: 0px;
}
.news ul li span {
margin-bottom: 5px;
}
}
.nav-previous.alignleft {
float: left;
position: absolute;
left: 20px;
top: 0px;
}
.aligncenter {
clear: both;
width: 100%;
text-align: center;
}
.nav-next.alignright {
float: right;
position: absolute;
right: 20px;
top: 0px;
}
.metaslider {
position: relative;
z-index: 0;
max-width: initial!important;
}
.flexslider {
border: 0px solid #fff!important;
}
.bg {
width: 100%;
height: 400px;
overflow: hidden;
margin-bottom: 100px;
}
.bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.header-section.categorylist .head-images,
.header-section.about .head-images,
.header-section.contact .head-images,
.header-section.gardenflow .head-images,
.header-section.single .head-images{
height: 100%;
margin: 0 auto 50px;
}
.header-section.categorylist img,
.header-section.about img,
.header-section.contact img,
.header-section.gardenflow img,
.header-section.single img{
object-fit: cover;
height: 330px;
width: 100%;
}
.header-section.single img {
object-fit: contain;
width: 100%;
height: auto;
}
.header-section .head-images{
}
.header-section.single .head-images img{
width: 600px;
display: block;
margin: 0 auto;
object-fit: cover;
}
.contents .single {
width: 600px;
margin: 0 auto 50px;
}
.contents .single img {
max-width: 100%;
height: auto;
}
.contents .single h3 {
margin-bottom: 50px;
font-size: 14px;
letter-spacing: 2px;
text-align: center;
}
.contents .single .caption a {
padding: 5px 10px;
background-color: #aaa;
font-size: 10px;
color: #fff;
font-weight: bold;
}
.contents .single .text {
line-height: 1.8em;
font-size: 12px;
font-family: 'EB Garamond',serif;
}
.contents .single .text iframe {
width: 100%;
aspect-ratio: 16/9;
height: 100%;
}
.contents .single .text p {
line-height: 2.5em;
font-size: 12px;
font-family: 'EB Garamond', serif;
margin-bottom: 16px;
color: #ffffff;
letter-spacing: 1px;
}
.pageclass_sub .contents {
padding: 0px 0px 100px;
}
.pageclass_sub .contents img {
}
.category-list {
margin-bottom: 50px;
text-align: center;
}
.category-list span {
border: 1px solid #888888;
padding: 5px 15px;
font-size: 12px;
margin: 0px 5px;
}
.pagination-single.clearfix {
overflow: auto;
width: 600px;
margin: 50px auto 50px;
line-height: 1.5em;
font-size: 13px;
position: relative;
}
.pagination-single:after, .pagination-single:before {
clear: both;
display: block;
}
.pagination-single a {
font-family: 'EB Garamond',serif;
color: #888888;
}
.nav-next.alignright {
float: right;
}
.header-section.single.page {
width: auto;
margin: 0 20px;
}
@media (max-width: 600px) {
.header-section.categorylist .head-images,
.header-section.about .head-images,
.header-section.contact .head-images,
.header-section.gardenflow .head-images,
.header-section.single .head-images{
width: auto;
}
.header-section.single .head-images img {
width: 100%;
}
.contents .single{
width: auto;
padding: 0px 20px;
}
.contents .single img{
}
.pagination-single.clearfix {
padding: 0px;
width: auto;
}
}
.page .frame{
overflow: hidden;
position: relative;
top: 0px;
height: 500px;
}
.page .blog{
margin-top: 100px;
}
.page .works .layout_entry{
width: 300px;
height: 320px;
}
.page .works .layout_entry img {
width: 280px;
height: 280px;
object-fit: cover;
margin-bottom: 20px;
}
.page .works h3{
font-size: 20px;
}
.page .blog h3{
font-size: 20px;
}
.contact-area{
width: 490px;
margin: 0 auto;
}
.contact-area label{
display: block;
font-size: 12px;
line-height: 2.0em;
color: #fff;
letter-spacing: 2px;
}
.contact-area p{
font-size: 12px;
line-height: 2.0em;
}
@media (max-width: 600px) {
.contact-area{
width: auto;
margin-left: 30px;
margin-right: 30px;
}
}
.pageclass_sub .mt100 {
margin-top: 100px!important;
}
.pageclass_sub .mt130 {
margin-top: 110px!important;
}
.pageclass_sub .mt100 {
margin-top: 110px!important;
}
.caption2 {
font-size: 12px;
margin-top: -19px;
}
.title img {
width: 130px;
}
.section.about2 {
margin-bottom: 100px!important;
width: 600px;
margin: 0 auto;
}
@media screen and (max-width:768px) {
.section.about,.section.about2, .section.event, .section.map {
margin-left: 0px;
margin-right: 0px;
width: auto;
}
}
.sns-message {
margin-left: 30px;
margin-right: 30px;
}
.wpcf7-list-item {
display: block;
}
.about {
width: 600px;
margin: 0 auto;
}
.about h2 {
text-align: center;
letter-spacing: 3px;
font-size: 14px;
margin-bottom: 30px;
}
.about img {
width: 100%;
margin-bottom: 30px;
height: 300px;
object-fit: cover;
}
.about .caption {
font-size: 11px;
line-height: 2.0em;
color: #fff;
letter-spacing: 0px;
margin-bottom: 30px;
line-break: anywhere;
}
@media screen and (max-width:768px) {
.about {
width: auto;
padding: 0px 20px;
}
}
.daypiano {
width: 100%;
margin: 0 auto 150px;
background-image: url(//yokoyamatatsuro.com/wp-content/themes/minimal/images/daypiano.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
height: 310px;
}
.daypiano h2 {
text-align: center;
letter-spacing: 3px;
font-size: 14px;
margin-bottom: 30px;
position: relative;
top: 80px;
}
.daypiano .caption {
width: 170px;
margin: 0 auto;
font-size: 11px;
line-height: 2.0em;
color: #fff;
letter-spacing: 2px;
margin-bottom: 30px;
position: relative;
top: 80px;
}
.daypiano .pianostart {
width: 100%;
text-align: center;
display: block;
position: relative;
top: 70px;
}
.daypiano .pianostart img {
width: 50px;
}
.head-images {
position: relative;
}
.head-images h2 {
position: absolute;
width: 100%;
text-align: center;
font-size: 16px;
letter-spacing: 5px;
padding: 150px 0px;
}
section.news{
width: 960px;
margin: 0 auto 100px;
}
.layout_entry_news{
width: 960px;
}
.layout_entry_news h2{
font-size: 15px;
line-height: 1.8em;
letter-spacing: 2px;
margin-bottom: 1px;
font-weight: 100;
}
.layout_entry_news p.description{
font-size: 11px;
}
.layout_entry_news .layout_news{
position: relative;
width: 600px;
height: auto;
overflow: hidden;
margin: 0 auto 50px;
}
.layout_entry_news .layout_news img {
width: 100%;
height: auto;
object-fit: cover;
float: none;
margin-bottom: 20px;
}
.title_section .date {
font-size: 12px;
letter-spacing: 3px;
color: #C0AF81;
font-family: 'EB Garamond';
}
@media screen and (min-width:0px) and ( max-width:960px) {
section.news{
width: auto;
}
.layout_entry_news{
width: auto;
}
.layout_entry_news .layout_news img {
object-fit: cover;
}
.layout_entry_news .layout_news{
width: auto;
position: relative;
margin: 10px 20px 60px 20px;
float: none;
}
}
.self-building-square-spinner, .self-building-square-spinner * {
box-sizing: border-box;
}
.self-building-square-spinner {
height: 30px;
width: 30px;
top: calc( -10px * 2 / 3);
margin: 0 auto;
}
.self-building-square-spinner .square {
height: 3px;
width: 3px;
top: calc( -10px * 2 / 3);
margin-right: calc(10px / 3);
margin-top: calc(10px / 3);
background: #ffffff;
float: left;
position:relative;
opacity: 0;
animation: self-building-square-spinner 6s infinite;
}
.self-building-square-spinner .square:nth-child(1) {
animation-delay: calc(300ms * 6);
}
.self-building-square-spinner .square:nth-child(2) {
animation-delay: calc(300ms * 7);
}
.self-building-square-spinner .square:nth-child(3) {
animation-delay: calc(300ms * 8);
}
.self-building-square-spinner .square:nth-child(4) {
animation-delay: calc(300ms * 3);
}
.self-building-square-spinner .square:nth-child(5) {
animation-delay: calc(300ms * 4);
}
.self-building-square-spinner .square:nth-child(6) {
animation-delay: calc(300ms * 5);
}
.self-building-square-spinner .square:nth-child(7) {
animation-delay: calc(300ms * 0);
}
.self-building-square-spinner .square:nth-child(8) {
animation-delay: calc(300ms * 1);
}
.self-building-square-spinner .square:nth-child(9) {
animation-delay: calc(300ms * 2);
}
.self-building-square-spinner .clear{
clear: both;
}
@keyframes self-building-square-spinner {
0% {
opacity: 0;
}
5% {
opacity: 1;
top: 0;
}
50.9% {
opacity: 1;
top: 0;
}
55.9% {
opacity: 0;
top: inherit;
}
}
.audiojs .scrubber {
position: fixed;
width: 100%;
background: #888888;
height: 15px;
margin: 0;
border-top: 0px solid #3f3f3f;
border-left: 0px;
border-bottom: 0px;
overflow: hidden;
bottom: 0px;
left: 0px;
z-index: 1;
}
.audiojs .time,.audiojs .error-message{
display: none;
}
.audiojs {
background: transparent;
overflow: hidden;
font-family: monospace;
font-size: 12px;
background-image: initial;
background-image: initial;
-webkit-box-shadow: initial;
-moz-box-shadow: initial;
-o-box-shadow: initial;
box-shadow: initial;
width: 40px;
margin: 0 auto;
height: 40px;
}
.audiojs .play{
background-image: url(//yokoyamatatsuro.com/wp-content/themes/minimal/images/pianostart.png);
background-repeat: no-repeat;
width: auto;
padding: 0px;
margin: 0px;
height: 40px;
width: 40px;
background-size: cover;
background-position: center;
}
.audiojs .pause{
background-image:url(//yokoyamatatsuro.com/wp-content/themes/minimal/images/pianostop.png); background-repeat:no-repeat; width:auto; padding: 0px;
margin: 0px;
height:40px;
width: 40px;
background-size: cover;
background-position:center;
}
.audiojs .play-pause{
width: 40px;
margin: 0px;
padding: 0px;
}
.audiojs .loaded {
position: absolute;
top: 0px;
left: 0px;
height: 14px;
width: 0px;
background: #888;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.5, #999), color-stop(0.51, #999), color-stop(1, #999));
background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%);
}
.audiojs .progress {
background: #fff;
}
.contents .single .text img {
margin-bottom: 16px;
}
.single .head-images {
padding-top: 50px;
}
@media screen and (min-width:0px) and ( max-width:960px) {
.single .head-images {
padding-top: 0px;
}
}
.globalmenu video {
position: absolute;
top: 0px;
z-index: -1;
height: 100%;
width: 100%;
object-fit: cover;
left: 0px;
opacity: 0.5;
}
section.works{
width: 960px;
margin: 0 auto 100px;
}
.layout_entry_works{
width: 960px;
}
.layout_entry_works h2{
font-size: 15px;
line-height: 1.8em;
letter-spacing: 2px;
margin-bottom: 20px;
font-weight: 100;
}
.layout_entry_works p.description{
font-size: 11px;
}
.layout_entry_works .layout_works{
position: relative;
width: 600px;
height: auto;
overflow: hidden;
margin: 0 auto 50px;
}
.layout_entry_works .layout_works img {
width: 100%;
height: auto;
object-fit: cover;
float: none;
margin-bottom: 20px;
aspect-ratio: 5 / 3;
}
.layout_entry_works .title_section .date {
font-size: 12px;
letter-spacing: 3px;
color: #C0AF81;
font-family: serif;
}
.layout_entry_works .title_section .link {
font-size: 11px;
letter-spacing: 1px;
font-family: serif;
text-align: right;
padding-bottom: 10px;	
border-bottom: 1px solid #ffffff;
}
@media screen and (min-width:0px) and ( max-width:960px) {
section.works{
width: auto;
}
.layout_entry_works{
width: auto;
}
.layout_entry_works .layout_works img {
object-fit: cover;
}
.layout_entry_works .layout_works{
width: auto;
position: relative;
margin: 10px 20px 60px 20px;
float: none;
}
}
h2.single-header {
margin: 0 auto;
display: block;
text-align: center;
width: 600px;
font-size: 16px;
letter-spacing: 3px;
border-bottom: 1px solid #ffffff;
padding-bottom: 70px;
padding-top: 80px;
margin-bottom: 50px;
}
@media screen and (min-width:0px) and ( max-width:960px) {
h2.single-header {
width: auto;
margin: 0 20px 60px;
}
}
.layout_report_entry{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
}
.layout_report_child{
position: relative;
width: 300px;
margin: 10px;
text-align: left;
}
.layout_report_child .title_section {
text-align: left;
font-size: 11px;
}
.layout_report_child .title_section p {
font-size: 13px;
letter-spacing: 1px;
font-family: sans-serif;
}
.layout_report_child img {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 20px;
aspect-ratio: 1 / 1;
}
.layout_report_child .title_section h2 {
font-size: 14px;
color: #ffffff;
line-height: 1.8em;
letter-spacing: 2px;
text-align:left;
margin-bottom: 20px;
}
.layout_report_entry .layout_report_child .date{
font-size: 11px;
color: #C0AF81;
letter-spacing: 1px;
font-family: serif;
margin-bottom: 5px;	
}
.layout_report_entry .layout_report_child .location{
font-size: 11px;
color: #C0AF81;
letter-spacing: 1px;
font-family: serif;
margin-bottom: 5px;	
}
.layout_report_entry .layout_report_child .readmore{
font-size: 11px;
letter-spacing: 1px;
font-family: serif;
text-align: right;
padding-bottom: 10px;	
}
@media screen and (min-width:0px) and ( max-width:960px) {
section.report{
width: auto;
}
.layout_report_child{
width: 42%;
}
.layout_report_child{
margin: 4%;
}
}
.layout_report_single {
margin-bottom: 60px;
}
.layout_report_single p {
margin-bottom: 0px!important;
color: #C0AF81!important;
line-height: 2.0em!important;
letter-spacing: 2px!important;
font-size: 12px!important;
}
@media screen and (min-width:0px) and ( max-width:960px) {
.layout_schedule_entry{
width: auto;
margin: 0 20px;
}
}