@font-face {
  font-family: 'HonokaMin';
  src: url('https://handmade.lyria.me/media/HonokaMin_Subset.woff2') format('woff2');
}

*{
font-family:  'HonokaMin', 'serif';
line-height:130%;
color: #000;
scroll-behavior: smooth;
}

h2{
margin:1em 0 0.5em 0;
width:100%;
background-image: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
background-size: 100% 3px;
background-position: bottom;
background-repeat: no-repeat;
}
.side-column h3{
margin:1em 0 0.25em 0
}
table{
width:100%;
border: 1px solid;
}
img{
max-width:100%;
}

.header{
position: fixed;
z-index:128;
}
.contents{
max-width:1280px;
margin:0 auto;
}
.bg{
width:100vw;
height:100vh;
object-fit:cover;
position: fixed;
z-index:-128;
}
.main{
position:static;
height:auto;
overflow:hidden;
}

.gallery {
float: left;
width: 140px;
height: 140px;
margin: 0 4px 4px 0 ;
}

.status{
border:double #000;
background-color:#fff;
text-align:center;
}

.button{
margin:0.5em 0 0.5em 0;
font-size:1.5em;
border: solid #000;
border-radius:1em;
height:1.75em;
width:100%;
background-color:#000;
color:#fff;
text-align:center;
padding:auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
text-decoration:none;
}
.button:hover {
background-color:rgba(0,0,0,0);
color:#000;

}

.button-s{
white-space:nowrap;
margin:0.5em 0 0.5em 0;
font-size:1em;
border: solid #000 1px;
border-radius:0.75em;
height:1.25em;
width:100%;
background-color:#000;
color:#fff;
text-align:center;
padding:auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
text-decoration:none;
}
.button-s:hover {
background-color:rgba(0,0,0,0);
color:#000;

}

.ib{
display: inline-block;
}
.line{
clear:both;
height:0.1em;
width:100%;
}
.m0{
margin:0;
}
.ml1{
margin-left:1em;
}
.p75{
font-size:75%;
}
.p125{
font-size:125%;
}
.p200{
font-size:200%
}
.bg000{
background-color:#000;
}
.bgfff{
background-color:#fff;
}

.i1{
margin-left:1em;
}

.right{
text-align:right;
}

.cent{
text-align:center;
}

.cb{
clear:both;
}
.tdn{
text-decoration: none;
}

.flow div{
border-radius:1em;
height:2em;
background-color:#000;
color:#fff;
text-align:center;
vertical-align: middle;
}
.flow p{
text-align:center;
font-size:1.5em;
margin:0;
}

.q_and_a h3{
margin:1em 0 0.25em 0;
}
.q_and_a p{
margin:0 0 0.25em 0;
}


@media screen and (min-width: 1024px){
.main-column{
float:left;
width:calc(100% - 410px);
}
.side-column{
float:left;
width:400px
}
.flow{
float:left;
width:400px;
}
.flow2{
float:right;
width:calc(100% - 400px - 1.2em);
margin-left:1em;
}
}

@media screen and (max-width: 1023px){
h1{
font-size:8vw;
}
.main-column,.side-column,.flow{
clear:both;
width:100%;
}
}

@media screen and (min-width: 1200px){
.flow3{
float:left;
width:calc(100% - 400px - 1.2em);
margin-left:1em;
}
}

@media screen and (max-width: 1199px){
.flow3{
clear:both;
width:100%;
}
}

@media screen and (min-width: 414px){
.b414{
display:none;
}
}
@media screen and (min-width: 421px){
.b421{
display:none;
}
}
@media screen and (max-width: 420px){
.n420{
display:none;
}
}