@charset "utf-8";


.pc { display: block !important; }
.sp { display: none !important; }

html, body {
  margin: 0;height: 100%;overflow: hidden;
}

body {
    background-color: #ecdad1;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN", "Meiryo","sans-serif","Noto Sans KR","Apple SD Gothic Neo","Gulim","Malgun Gothic","sans-serif";
    margin: 0;
}

* {
    box-sizing:border-box;
}
.prcap {width: 100%;margin: 10px 2% 0; text-align: left; font-size:80%;color: #787878;}

/* 画面高さ固定。それぞれのカラムでスクロール */
.wrapper {width: 100%;max-width: 1800px;margin: 0 auto;display: flex;height: 100vh;overflow-y: scroll;}


.left_side {flex: 0 0 33%;min-width: 330px;padding: 0; position: sticky;top: 0;height: 100vh;}
.main {flex: 1; min-width: 0;padding: 0;height: fit-content;background-color: #fff;color: #42210b;}
/*.main {flex: 1; min-width: 540px;background-color: #333;padding: 0;height: fit-content;}*/
.right_side {flex: 0 0 24%;min-width: 300px;padding: 80px 0 0; position: sticky;top: 0;
height: 100vh;overflow-y: auto;scrollbar-width: none;}


/* 左カラム */
.mapimage {width: 100%;margin: 140px 0 0;position: relative;}
.mapimage img {width:100%;display: block;}
.whitelogo {width: 70%; position: absolute; top:-10px;left:50%;z-index: 2;transform: translateX(-50%);}
.whitelogo img {width: 100%;}
.chara01 {bottom: 16px;right: 10px;width: 25%; position: absolute;}
.chara01 img {width: 100%; height: auto; display: block;}
.messelogo {width: 70%; margin: 0 auto 0;}
.messelogo img {width: 100%; height: auto;}

/* センターカラム */
.intro-area{width: 100%;padding: 0;background-color: #fff;}
h1 {width:55%; margin: 80px auto 0;}
h1 img {width: 100%;}
.keyboad-img {width:16%;min-width:80px;max-width: 180px;margin: 6px auto;}
.keyboad-img img{width:100%;}
h2 {width:90%;margin: 10px auto 20px; font-size: 18px; line-height: 2.3;text-align: center;text-decoration: underline;text-underline-offset: 0.5em;text-decoration-color: #5e3e30;text-decoration-thickness: 1px;}
.intro-txt {width:78%;margin: 5px auto;padding:10px 0; font-size: 13px;line-height: 2;color: #735d58;text-align: center;}
.cap-b {font-weight: bold;}


.game-area {width: 100%;margin: 70px 0 0;padding:8% 6% 20%;background-color: #f2efe9;text-align: center;position: relative;}
.contents-ttl{width: 30%;min-width:210px;height: 36px; font-size: 13px; font-weight: normal; letter-spacing: 0.7px; color: #ecdad1; background-color: #5e3e30;display: flex;justify-content: center;align-items: center;text-align: center;border-radius: 30px;margin: auto;position: absolute;top:-18px;left: 50%;transform: translateX(-50%);}
.stage_icon img {max-width: 65px; height: auto;text-align: center;}

.g-contents-wrap {width: 100%;margin: 20px 0;background-color: #fff; border: solid 1px #42210b;}
h3.category {font-size: 15px; letter-spacing: 0.5px; border-bottom: solid 1px #42210b;width:100%;height: 50px;display: flex;align-items: center;justify-content: center;margin: 0;font-weight: normal;}
.category::before,
.category::after {content: "⚪︎";font-size: 10px;flex-shrink: 0;margin-right: 10px;margin-left: 10px;}

/*スライド用*/
.g-contents-section {width: 100%;margin: 0;padding: 0;position: relative;}
.slide-view {overflow: hidden;width: 100%;padding: 0 2%;box-sizing: border-box;}
.slider {display: flex;gap: 10px;transition: transform 0.5s ease;align-items: center;}
.slide {flex: 0 0 95%;text-align: center;padding:0;display: flex;justify-content: center;align-items: center; }
.arrow {position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;background: rgba(94, 62, 48, 0.5);color: #fff;border: none;width: 40px;height: 40px;cursor: pointer;}
.prev { left: 10px; }
.next { right: 10px; }
.slide-view a {text-decoration: none;color: #42210b;}
.slide-inner {width: 100%;display: flex;justify-content: center;align-items: center;padding:15px 0;}

.card-typing,.card-cardgame {width: 100%;margin: 0;padding: 0;}
.card-typing {background-color: #f9f7f6;}
.card-cardgame {background-color: #f8f8fa;}

.gameimage {width:100%;margin: 0;padding: 3% 8% 2%;}
.gameimage img{width:100%;margin: 0;padding: 0;}
.gamename {margin: 0 0 0 10%; text-align: left;}
.sub-gametxt {font-size: 17px;font-weight: bold;margin: 0;}
h4 {margin: 1px 0;font-size: 28px;}
.marker-text span{display: inline;background: linear-gradient(transparent 60%, #f2e2c4 60%);padding: 0 6px;letter-spacing: 0.7px;}
.marker-text-blue span{display: inline;background: linear-gradient(transparent 60%, #e6edf9 60%);padding: 0 6px;letter-spacing: 0.7px;}
.game-introtxt {width: 100%; padding: 1% 9% 2%; margin: 0; font-size: 13px; line-height: 1.8; text-align: left;}
.cap-bold {font-weight: 700;}
.mg-top15 {margin-top: 15px;}

.instbtn {display: flex;align-items: center;justify-content:center;width: 220px;height: 50px;padding: 0 auto;color: #fff;text-decoration: none;font-size: 14px;border: solid 1px #42210b;border-radius: 10px;box-sizing: border-box;transition: all 0.2s;margin: 0 0 6% 9%}
.instbtn:active {transform: translateY(3px);}
.instbtn::before,
.instbtn::after {content: "⚪︎";font-size: 10px;flex-shrink: 0;margin-right: 10px;margin-left: 10px;color: #42210b;}
.bk-brown {background-color: #d4af7a;}
.bk-blue {background-color: #4c5f80;}


.blog-area {width: 100%;margin: 0;padding:8% 6%;text-align: center;position: relative;background-color: #fff;border:}
.graph-paper {background-color: #ffffff;
    background-image: 
    linear-gradient(#f6f6f6 1px, transparent 1px), /* 横線 */
    linear-gradient(90deg, #f6f6f6 1px, transparent 1px); /* 縦線 */
  background-size: 16px 16px;}

.blog-container {width:100%; margin:50px 0 0; padding:0;display: flex;align-items: flex-start;}
.blog-left {flex: 0 1 40%;}
.blog-right {flex: 0 1 60%;min-width: 280px;text-align: left;margin-left:10px;}
.blog-right p {color: #42210b;font-size: 13px;margin: 0 0 8px;}
.text-link {display: inline-block; font-size: 13px;line-height: 1.6;color: #42210b;transition: transform 0.2s ease-out; text-decoration: none;border-bottom: 1px solid transparent;padding-bottom: 1px;}
.blog-left img {width: 100%;height: auto;display: block;border: 1px solid #e0e0e0;}
.blog-arrow {text-align: right;padding-right: 10px;}
.blog-arrow img{width:15px;height: auto;margin: 0;}
.blog-container + .blog-container {margin-top: 30px;padding-top: 30px;border-top: 1px solid #b9b1b3;}




/*右サイド用*/
.menu-block {width: 100%;margin: 0;}
.title-with-dots {color:#42210b; font-weight: normal; letter-spacing: 2px; font-size: 12px;display: flex;align-items: center;justify-content: center;white-space: nowrap;}
.title-with-dots::before,
.title-with-dots::after {content: "";width: 50px; height: 1px; margin: 0 15px; border-bottom: 1px dotted #42210b;}

.rightmenu-wrap{margin: 0 0 60px;padding: 0 20px;}
.rightmenu-group {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;padding-left:0px;}
.rightmenu-btn {list-style: none;width:70px;}
.rightmenu-action {display: flex;flex-direction: column;align-items: center;padding: 6px;border: none;background: none;text-decoration: none;cursor: pointer;width: 80px; transition: transform 0.1s;}
.image-box,.image-box-beige {width: 75px;height: 70px; border-radius: 50%;display: flex;justify-content: center;align-items: center;background-color: #fff;box-shadow: 0 2px 0 0 #c8a08f;transition: all 0.2s;}
.image-box img {max-width: 60%;max-height: 60%;object-fit: contain;}
.image-box-beige img {max-width: 75%;max-height: 75%;object-fit: contain;}
.btn-label {font-size: 11px;margin-top: 5px;text-align: center; color: #42210b;line-height: 16px;}
.cap-bold {font-weight: bold;}
.rightmenu-action:active {transform: translateY(3px);box-shadow: none;}
.image-box {background-color: #fff;}
.image-box-beige {background-color: #fff4e0!important; border:solid 2px #fff;}


footer {width: 100%;margin: 0;padding:30px 30px 10px;display: block; background-color: #b9b1b3; text-align: left;}
.f-logo {width:40%; min-width: 200px;margin: 0;}
.f-logo img {width:100%; padding: 0;}
.f-menu {font-size: 12px; line-height: 1.6;margin: 30px 0 30px;}
.f-menu a {font-size: 12px; color: #fff; text-decoration: none;}
.f-copyright {font-size: 10px; color: #fff; margin: 0;}


/* --------------------------------------------------*/
/* 1200px未満（2カラム）*/
/* --------------------------------------------------*/
@media (max-width: 1199px) {

.left_side {display: none;} 
.main {flex: 0 0 60%; min-width: auto;}
.right_side {flex: 0 0 40%; min-width: auto;}
    
    
    
}


/* --------------------------------------------------*/
/* 660px未満（2カラム）*/
/* --------------------------------------------------*/

@media (max-width: 659px) {
.pc { display: none !important; }
.sp { display: block !important; }
    
    
html, body {height: auto;overflow: auto;} 
    
    
.wrapper {flex-direction: column;display: block;height: auto;overflow: visible;}
.left_side {display: block;order: 1;}
.main {order: 2;flex: none;}
.right_side{display: none;}

    
.left_side,
.main,
.right_side {position: static;height: auto;min-width: 0;width: 100%;} 
    
.hamburger {display: block;}
    
.mapimage {width: 80%;margin: 70px auto 0;position: relative;}
    
h1 {width:70%; margin: 70px auto 0;}    
  

.blog-area {width: 100%;margin: 0;padding:8% 6%;text-align: center;position: relative;background-color: #fff;border:}
.graph-paper {background-color: #ffffff;
    background-image: 
    linear-gradient(#f6f6f6 1px, transparent 1px), /* 横線 */
    linear-gradient(90deg, #f6f6f6 1px, transparent 1px); /* 縦線 */
  background-size: 16px 16px;}

.blog-container {display: block;margin:20px 0 0;}
.blog-left {display: block;width:100%; text-align: center;}
.blog-right {display: block;width:100%;margin-left:20px;}
.blog-right p {margin: 15px 0 5px;}
.blog-left img {width: 40%;height: auto;display: block;margin: auto;}
.blog-arrow {text-align: left;padding-left: 10px;}
.blog-container + .blog-container {margin-top: 10px;padding-top: 20px;}
.text-link {text-decoration-color: #42210b;text-underline-offset: 5px;}
  
    
}

@media (hover: hover) and (pointer: fine) {
    .instbtn:hover
    {
    transform: translateY(-2px);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
  }
    .text-link:hover {transform: translateY(-1px); text-decoration: underline;filter: brightness(1.1);}

}