@charset "utf-8";


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


body {
    background-color: #fff4e0;
    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;}
.pankuzu {width: 100%;margin: 10px 2% 0; text-align: left; font-size:80%;}    


/*ヘッダー*/
header {width: 100%; min-width: 1230px;background-color:#d5c6c6; color: #fff; margin: 0;}
.header-wrapper {width: 100%; max-width: 1400px; min-width: 800px; margin: auto; display: flex; align-items: center;}
.logo {padding: 10px;display: inline-block;}
.logo img {width:300px; height: auto;}
header nav {margin-left: auto; padding:0;}
header nav ul {display: flex; list-style: none; padding: 0; margin: 20px 0 0;}
header nav ul li{padding: 10px 0 0; font-size: 13px; border-radius: 60px 60px 0 0; width: 140px;text-align: center;}

header nav ul li:nth-child(1) {border: solid 3px #d5c6c6; border-bottom: none; background-color: #F6F4F4;}
header nav ul li:nth-child(2) {border: solid 3px #d5c6c6; border-bottom: none; background-color: #F7EDED;}
header nav ul li:nth-child(3) {border: solid 3px #d5c6c6; border-bottom: none; background-color: #EAEBF1;}
header nav ul li:nth-child(4) {border: solid 3px #d5c6c6; border-bottom: none; background-color: #fff9f1;}
header nav img{height: 45px;}
header nav ul li a {text-decoration: none;color: #344655;}
header nav ul li p {margin: 0;}
.subttl {margin: 5px 0 0;padding: 2px 0; color: #fff; font-size:11px; letter-spacing: 1.1px;}

.wrapper  {width: 100%; max-width: 1400px; min-width: 1230px; margin: auto; display: flex;align-items: stretch;}
.side-wrapper {max-width:330px; min-width: 330px; margin-left: auto; padding:0; background-color: #fff;}/*サイドエリア*/
.game-area {flex: 1; margin: 0; padding:0; min-width: 900px;/*ゲームエリア*/}
   

/*トップページメインエリア*/s
.game-wrapper {width: 100%; padding:0 3%; color: #534741;}
.main-area {width: 100%; margin: 20px 0 0;}
.top_h1 {font-size: 32px; text-align: left; margin: 80px 0 40px 20px; color: #754c24; font-weight: 500; letter-spacing: 2px;}
.cap-en {font-size:28px; line-height: 2; background: linear-gradient(transparent 50%, #fff 50%);}
.cap-pink {color: #ea8189;}
.cap-orange {color: #d78257;}
.cap-gold {color: #ea8189;}
.cap-blue {color: #6f9bd0;}
.play-aten {width:96%; margin: 30px auto 6px; border: solid 1px #534741; border-radius: 10px; background-color: #e4d1be; padding:20px 30px; font-size: 13px;line-height: 1.7;}
.img-fukuro1 {width:96%; margin:0 auto;text-align: right;}
.img-fukuro1 img {width: 130px;}

.game-menu{width: 96%; border-radius: 10px; background-color: #fff; margin:0 auto; padding: 4%;}
.mtarea {display: flex;align-items: center;justify-content: center; text-align: center;}
.mtarea-left {width: 75%; padding:40px 0;font-size: 28px; text-align: left; font-weight: 500; letter-spacing: 1.2px;line-height: 1.8;}
.mtarea-right {width: 25%;}
.mtarea-right img {width: 80%;}
.yellow-marker {background: linear-gradient(transparent 60%, #fef1a7 40%);}
.white-marker {background-color: #fff;}


.typingbox,.cardbox {width: 100%; margin: 0 0 60px 0;border-radius: 20px;background-image: url(image/bg-check-pink.png); background-repeat: repeat; padding:20px;background-color: #e7bdb9;}
.cardbox {background-image: url(image/bg-check-blue.png); background-repeat: repeat;background-color: #88abd5;}
.h2-top {text-align: center; padding:0;margin: 0;}
.h2-top img {width:70%;}
.typing-section_p,.typing-section_b{width:100%; margin: 0; background-color: #fdf6f8;border-radius: 20px; padding:5px 20px 20px;text-align: center; font-size: 20px;}
.typing-section_b{background-color: #f1f6f9;}
.game-text_flex {display: flex;align-items: flex-start;justify-content: center; margin:0;text-align:left;}
.geme-text-left{width: 60%; font-size: 14px; line-height: 1.8; padding: 0 10px 0 0;}
.geme-text-right{width: 40%; text-align: center;}
.geme-text-right img {width: 90%;}



.txt-b {font-weight: bold;}
.mg-top {margin-top: 0;}


.bt-typing,.bt-card {font-size:18px;display: block;text-align: center;vertical-align: middle;text-decoration: none;width: 50%;margin: 30px auto 20px;padding: 20px 30px;font-weight: bold; letter-spacing: 1.1px; background: #ea8189;color: #fff;border-radius: 100vh;transition: 0.5s; border:solid 1px #ea8189;}
.bt-typing:hover {color: #ea8189;background: #fff;}
.bt-card {background: #4d74a8;border:solid 1px #4d74a8;}
.bt-card:hover {color: #4d74a8;background: #fff;}

.omaketxt {display: flex;align-items: center;justify-content: center; margin:0;}
.omaketxt-left{width: 20%;}
.omaketxt-right{width: 80%;font-size: 16px; line-height: 1.6; padding: 0 0 0 10px;}
.omaketxt-left img {width: 100%;}




/*footer-----*/
footer {width: 100%;background-color:#c7b6b7;color: #fff;margin: 0;}
.f-wrapper {width: 100%;max-width: 1200px;min-width: 800px;display: flex;padding: 10px;margin: 0 auto;list-style: none;align-items: flex-start;}
.f-nav {display: block;width: 100%;box-sizing: border-box;margin: 0;justify-content: center;text-align: center;padding: 10px;}
.f-nav ul {text-align: left;margin: 0;padding: 0 0 0 10%;}
.f-nav ul li {text-align: left;font-size: 14px;line-height: 2;}
.f-nav a {text-decoration: none;color: #fff;}
.f-border {border-left: solid 1px #fff;}
footer img {max-width:70%;height: auto;}
.ftr-cap {text-align: left;font-size: 14px;width: 80%;margin: 20px auto;}

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



/* ------- tablet ---------------------------------------------*/
@media screen and (max-width: 800px) {
    
/*footer*/
footer {text-align: center;} 
.f-wrapper {flex-wrap: wrap;max-width: 600px;min-width: auto;margin: auto;}   
.f-navi {width: 100%;} 
.f-border {border-left: solid 1px #ce9386;}       
footer img {width:220px;height: auto;max-width: 250px;margin: 20px auto;} 
    
 
   
    
}



/* ------- スマホ ------------------------------------------- */
/*-----------------------------------------------------------------*/
@media screen and (max-width: 600px) {
.pc { display: none !important; }
.sp { display: block !important; }
    

header {width: 100%; min-width: 400px; max-width: 600px;}
.header-wrapper {width: 100%;max-width: 600px;min-width: auto;display: block;text-align: center;}  
header .logo img {width:300px;height: auto;max-width: 300px;margin: 10px auto 0;}        
header nav {margin-left: auto;padding:0;}
header nav ul {flex-wrap: wrap;justify-content: center;}
header nav ul li{margin: 0 5px 10px;border-radius: 20px;}

/* ヘッダーメニューエリアここまで---- */      
    
.wrapper {display: block;max-width: 500px;min-width: auto;margin: auto;}
.game-area {width:100%;max-width: none;min-width: 0;}
.side-wrapper {width:100%;max-width: none;min-width: 0;}   
    
.main-area {border-radius: 10px;}
.top_h1 {font-size: 28px; text-align: center; margin: 50px auto 20px;letter-spacing: 1.5px;}
.mtarea-left {width: 60%; padding:20px 0 20px 0px;font-size: 22px;}
.mtarea-right {width: 40%;}
.mtarea-right img {width: 80%;}
    

.typingbox,cardbox {width: 100%;padding:20px;}

.h2-top img {width:90%;}
.typing-section_p,.typing-section_b{padding:5px 16px;font-size: 18px;}
    
.game-text_flex{display: block;}
.geme-text-left{width: 100%; padding: 0;}
.geme-text-right{width: 100%; text-align: center; margin: 20px 0 0;}
.geme-text-right img {width: 80%;}
    
.bt-typing,.bt-card {font-size:15px;width: 98%;margin: 30px auto 20px;padding: 20px 10px;}

.omaketxt-left{width: 40%;}
.omaketxt-right{width: 60%;}
.omaketxt-left img {width: 90%;}
    
}