@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');
html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search][type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted}[type=reset],[type=submit],button,html [type=button]button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}img{max-width: 100%;vertical-align: bottom;}
/* 文字 */
html{
font-family: "Yuji Syuku", serif;
}
/* ボタンデザイン */
.vending-btn{
width: 140px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 30px;
background: linear-gradient(to bottom, #ffffff 0%, #919191 100%);
box-shadow:inset 0 2px 4px rgba(196, 196, 196, 0.9),0 4px 0 #707070,0 6px 10px rgba(62, 62, 62, 0.3);
margin-left: auto;
a{
color:inherit;
}
}
/* ヘッダー */
.ice{
display: none;
}
header{
position: relative;
}
.header-bgi1{
background: url(../img/wood.webp) repeat ;
}
.signboard{
display: flex;
}
.circle-board{
flex:1;
}
.square-board{
flex:2;
}
.manager{
width: 30%;
position: absolute;
top: 55%;
}
.machine{
position: relative;
position: absolute;
overflow: hidden;
width: 60%;
top: 35%;
right: -20%;
}
.header-nav{
width: 55%;
position: absolute;
top: 10%;
left: 15%;
}
.header-bgi2>img{
width: 100%;
height: 120px;
}
/* top-about */
main{
background: url(../img/wood.webp) repeat ;
padding: 50px 20px;
}
.top-about{
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px auto;
>img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.about-content,details{
background: url(../img/paper.webp) ;
background-size: cover;
padding: 20px;
margin-bottom: 50px;
}
summary{
text-align: center;
cursor: pointer;
user-select: none;
list-style: none;
}
.accordion summary::-webkit-details-marker {
display: none;
}
summary::before{
font-weight: bold;
font-size: 20px;
content: "＋";
}
[open] summary::before{
font-weight: bold;
font-size: 20px;
content: "ー";
}
/* top-lineup */
#top-lineup-wrapper{
padding: 20px 0;
margin:0 auto 50px auto;
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 20px;
place-items: center; 
}
.top-lineup-wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.copy{
background: url(../img/paper.webp) ;
background-size: cover;
padding: 20px;
width: fit-content;
font-size: 14px;
}
.btn-img{
margin-bottom: 20px;
}
}
/* フッター */
footer{
position: relative;
}
.bus{
width: 400%;
bottom: 15%;
position: absolute;
left: 100%; 
}
.bus.run{
animation: busflow 6s linear infinite;
animation-delay:0.3s
}
@keyframes busflow{
0% {
transform: translateX(0);
}
100% {
transform: translateX(-250%); 
}
}
.busstop{
position: relative;
position: absolute;
width: 50%;
bottom: 0;
z-index: 10;
}
.footer-nav{
position: absolute;
top: 45%;
left: 0;
right: 0;
margin: auto;
>li{
font-size: 24px;
text-align: center;
margin-bottom: 20px;
>a{
color: #333;
cursor: pointer;
}
}
}
/* 作品詳細ページ */
.detail-wrapper{
padding: 50px 20px;
background: url(../img/wood.webp) repeat;
>h1{
margin-bottom: 20px;
font-size: 20px;
background-image: url(../img/paper.webp);
background-size: cover;
text-align: center;
padding:10px;
}
.detail-img{
overflow: hidden;
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
margin-bottom: 20px;
.detail-img-pc{
flex: 2;
>img{
margin-bottom: 20px;
}
}
>img{
flex: 1;
min-width: 0;
}
}
}
.detail-content{
display: flex;
flex-direction: column;
gap: 20px 0;
align-items: center;
justify-content: center;
.content{
background-image: url(../img/paper.webp);
background-size: cover;
padding: 20px;
>dl>dt{
font-weight: bold;
}
>dl>dd{
margin-bottom: 10px;
}
>ol{
list-style-type: decimal;
>li{
margin-left: 20px;
}
}
>h2{
font-size: 20px;
}
}
}
.content-tool,.content-step,content-study{
margin-bottom: 20px;
}
.content-study{
>dt{
border-bottom: 1px dashed #333;
}
}
/* 店主の部屋 */
.chest{
display: none;
}
.room-bgi1{
background: url(../img/wood.webp) repeat;
position: relative;
height: 80vh;
.clock{
position: absolute;
width: 30%;
top: 0;
left: 0;
z-index: 10;
}
.lamp{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 30%;
z-index: 20;
}
.paper{
position: absolute;
width: 80%;
top: 40%;
left: 0;
right: 0;
margin: auto;
background-image: url(../img/paper.webp);
background-size: cover;
padding: 10px;
}
}
.room-manager{
position: absolute;
z-index: 15;
width: 30%;
left: 0;
bottom: 10%;
}
.tv{
position: absolute;
z-index: 10;
width: 70%;
right: 0;
bottom: 10%;
}
.room-bgi2{
background-image: url(../img/tatami.webp);
background-size: cover;
height: 20vh;
}
/* 作品一覧 */
.lineup-container{
padding: 50px 20px;
background: url(../img/wood.webp) repeat;
.btn-group{
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 50px;
.filter-btn{
width: 150px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 10%;
background: linear-gradient(to bottom, #fff2d8 0%, #aca392 100%);
box-shadow:inset 0 2px 4px #bec09be6,0 4px 0 #696959,0 6px 10px #3f3f334d;
color: #FFA600;
font-weight: bold;
-webkit-text-stroke:1px #00000045;
font-size: 20px;    
}
}
.lineup-box{
width: 150px;
margin: 20px 20px 0 0;
.lineup-img{
margin-bottom: 10px;
}
>a{
color:inherit;
}
}
}
@media (min-width: 768px){
body{
overflow-x: hidden;
}
.vending-btn{
width: 20%;
>a{
font-size: 20px;
font-weight: bold;
}
}
/* ヘッダー */
.ice{
display: none;
}
.circle-board{
flex: 1;
}
.square-board{
flex:2;
}
.curtain{
justify-content: left;
height: 20vh;
>img{
width: 100%;
height: 100%;
}
}
.door{
width: 100%;
height: 80vh;
>img{
width: 100%;
height: 100%;
}
}
.manager{
width: 25%;
bottom: 5%;
left: 5%;
top: auto;
}
.machine{
width: 70%;
right:-20%;
bottom: 5%;
top: auto;
}
.header-nav{
width: 40%;
top: 10%;
left: 10%;
}
.header-nav>li:hover{
transform: scale(1.2,1.2);
}
/* about */
main{
padding: 100px 20px;
}
.about-content,details,.top-lineup-wrapper{
width: 70%;
margin: 0 auto 50px auto;
}
#about>details:last-of-type{
margin-bottom: 100px;
}
/* toplineup */
#top-lineup-wrapper{
padding: 20px 0;
margin:0 auto 50px auto;
display: grid;
gap: 20px;
place-items: center; 
}
.copy{
white-space: wrap;
}
/* フッター */
footer{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.bus{
width: 200%;
animation: busflow 4s linear infinite;
z-index: 5;
}
.busstop{
width: 15%;
left: 10%;
}
.footer-nav{
position: absolute;
top: 45%;
left: 0;
right: 0;
margin: auto;
>li{
font-size: 24px;
text-align: center;
margin-bottom: 20px;
>a{
color: #333;
cursor: pointer;
}
}
}
.footer-nav a:hover{
text-decoration: underline;
text-underline-offset: 4px;
}
.footer-bgi1,.footer-bgi2{
position: absolute;
left: 0;
width: 100%;
}
.footer-bgi1{
top: 0;
height: 70vh; 
}
.footer-bgi2{
bottom: 0;
height: 30vh;
}
.footer-bgi1 img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
}
.footer-bgi2 img{
width: 100%;
height: 100%;
object-fit: cover;
}
/* 作品詳細ページ */
.detail-wrapper{
>h1{
width: 50%;
font-size: 26px;
padding: 20px;
margin: 0 auto 20px auto;
}
.detail-img{
.detail-img-pc{
>img{
margin-bottom: 100px;
}
}
}
.vending-btn{
margin-right: auto;
width: 30%;
}
.content{
width: 70%;
}
}
/* 店主の部屋 */
.room-wrapper{
width: 100vw;
height: 100vh;
}
.room-bgi1{
width: 100%;
.clock{
width: 10%;
left: 20%;
}
.lamp{
overflow: hidden;
top: -5%;
width: 10%;
}
.paper{
width: 50%;
 p{
text-align: center;
}
}
}
.room-manager{
width: 10%;
left: 20%;
}
.tv{
width: 30%;
}
.chest{
display: block;
position: absolute;
bottom: 10%;
>img{
width: 70%;
}
}
.room-bgi2{
background-image: url(../img/tatami.webp);
background-size: cover;
height: 20vh;
}
/* 作品一覧 */
.lineup-container{
.btn-group{
justify-content: center;
gap: 20px;
}
.lineup-box{

.vending-btn{
width: 80%;
}
}
}
}
@media (min-width: 1024px){
body{
overflow-x: hidden;
}
.vending-btn{
width: 20%;
>a{
font-size: 20px;
font-weight: bold;
}
}
/* ヘッダー */
.ice{
display: block;
position: absolute;
}
header{
position: relative;
width: 100vw;
overflow-x: hidden;
}
.header-bgi1{
background: url(../img/wood.webp) repeat ;
}
.signboard{
height: 35vh;
justify-content: center;
align-items: center;
gap: 0;
 img{
width: 100%;
height: 100%;
object-fit: fill;
}
}
.circle-board{
display: none;
}
.square-board{
flex:none;
height: 100%;
width: 60%;
}
.curtain{
justify-content: left;
height: 20vh;
>img{
width: 100%;
height: 100%;
}
}
.door{
width: 70%;
height: 100vh;
>img{
width: 100%;
height: 100%;
}
}
.manager{
width: 15%;
bottom: 8%;
left: 5%;
top: auto;
}
.machine{
right: -45%;
bottom: 10%;
top: auto;
}
.header-nav{
width: 22%;
top: 8%;
left: 8%;
}
.header-nav>li:hover{
transform: scale(1.2,1.2);
}
.ice{
position: absolute;
bottom: 12%;
right: 25%;
width: 30%;
height: auto;
>img{
width: 100%;
height: auto;
}
}
.header-bgi2>img{
height: 200px;
}
/* about */
main{
padding: 100px 20px;
}
.about-content,details,.top-lineup-wrapper{
width: 70%;
margin: 0 auto 50px auto;
}
#about>details:last-of-type{
margin-bottom: 100px;
}
/* toplineup */
#top-lineup-wrapper{
padding: 20px 0;
margin:0 auto 50px auto;
display: grid;
grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
gap: 20px;
place-items: center; 
}
.copy{
white-space: nowrap;
}
/* フッター */
footer{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.bus{
width: 200%;
animation: busflow 4s linear infinite;
z-index: 5;
}
.busstop{
width: 15%;
left: 10%;
}
.footer-nav{
position: absolute;
top: 45%;
left: 0;
right: 0;
margin: auto;
>li{
font-size: 24px;
text-align: center;
margin-bottom: 20px;
>a{
color: #333;
cursor: pointer;
}
}
}
.footer-nav a:hover{
text-decoration: underline;
text-underline-offset: 4px;
}
.footer-bgi1,.footer-bgi2{
position: absolute;
left: 0;
width: 100%;
}
.footer-bgi1{
top: 0;
height: 70vh; 
}
.footer-bgi2{
bottom: 0;
height: 30vh;
}
.footer-bgi1 img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
}
.footer-bgi2 img{
width: 100%;
height: 100%;
object-fit: cover;
}
/* 作品詳細ページ */
.detail-wrapper{
>h1{
width: 50%;
font-size: 26px;
padding: 20px;
margin: 0 auto 20px auto;
}
.detail-img{
.detail-img-pc{
>img{
margin-bottom: 100px;
}
}
}
.vending-btn{
margin-right: auto;
width: 30%;
}
.content{
width: 70%;
}
}
/* 店主の部屋 */
.room-wrapper{
width: 100vw;
height: 100vh;
}
.room-bgi1{
width: 100%;
.clock{
width: 10%;
left: 20%;
}
.lamp{
overflow: hidden;
top: -5%;
width: 10%;
}
.paper{
width: 50%;
 p{
text-align: center;
}
}
}
.room-manager{
width: 10%;
left: 20%;
}
.tv{
width: 30%;
}
.chest{
display: block;
position: absolute;
bottom: 10%;
>img{
width: 70%;
}
}
.room-bgi2{
background-image: url(../img/tatami.webp);
background-size: cover;
height: 20vh;
}
/* 作品一覧 */
.lineup-container{
.btn-group{
justify-content: center;
gap: 20px;
}
.lineup-box{

.vending-btn{
width: 80%;
}
}
}
}