@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');

/*======================
base
=======================*/
html{
height: 100%; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
font-size: 62.5%; /*-- ベースのフォントサイズを10pxに指定 各要素のフォントサイズ指定はremで --*/
overflow: hidden;
}

body{
font-family: 'M PLUS 1p', sans-serif;
font-size: 1.4em; /*-- bodyのフォントサイズを14pxに指定 --*/
color: #222525;
display: flex; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
flex-direction: column; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
/*height: 100%; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
-webkit-text-size-adjust: 100%;/*-- iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ --*/
background: #FFFFFE;
height: 100%;
overflow-y: auto;
}

header, footer {
flex: 0 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}

.contents {
flex: 1 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}

/*======================
common
=======================*/
/*
 テキストリンク
-----------------------*/
a {
text-decoration: none;
color: #f45d48;
}

a:link,
a:visited {
text-decoration: none;
color: #f45d48;
}

a:hover,
a:active {
text-decoration: underline;
color: #f45d48;
}

/*======================
 footer
=======================*/
footer {
width: 100%;
font-size: 1.1rem;
text-align: center;
padding: 1em;
background: #F7F5F1;
}

/*======================
 header
=======================*/
header {
width: 100%;
text-align: center;
background: #EADDD0;
}

header.history {
position: fixed;
}

header.history .logo_img {
width: 100px;
margin: 1em auto 0;
}

header.history .logo_img img {
width: 100%;
height: auto;
}

header.history h2 {
margin: .5em 0 0;
}

/*======================
 contents
=======================*/
.contents {
width: 100%;
text-align: center;
}

#overlay {
background: rgba(0,0,0,.6);
width: 100vw;
height: 100vh;
position: fixed;
z-index: 1000;
display: none;
}

/*
 デバッグエリア
-----------------------*/
.debug {
width: 90%;
margin: 3em auto;
}


/*
 履歴
-----------------------*/
.contents.history .inner {
padding: 11em 0 2em;
}

.history_btn_set {
background: #F9F4F0;
padding: .8em 0;
margin: .8em 0 0;
}

.history_btn_set .inner {
width: 90%;
max-width: 480px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.history_btn_set .btn {
font-size: 1.2rem;
font-weight: bold;
display: inline-block;
padding: .5em 1.5em;
border-radius: .5em;
color: #FFF;
cursor: pointer;
background: #020826;
}

.history_btn_set .btn.delete {
font-size: 1.2rem;
font-weight: bold;
display: inline-block;
padding: .5em 1.5em;
border: 2px solid #020826;
border-radius: .5em;
color: #020826;
cursor: pointer;
background: #FFF;
}


.history_list {
width: 90%;
max-width: 480px;
margin: 0 auto;
display: flex;
justify-content: start;
text-align: left;
align-items: center;
padding: 1em .5em;
border-top: solid 1px #EADDD0;
gap: 1em;
}

.history_list:last-child {
border-bottom: solid 1px #EADDD0;
}

.history_date {
white-space: nowrap;
}

.history_word {
line-height: 1.4em;
}

/*
 ボタン
-----------------------*/
.btn {
font-size: 1.4rem;
font-weight: bold;
display: inline-block;
padding: .8em 1.5em;
border-radius: 100vw;
color: #FFF;
cursor: pointer;
background: #020826;
}

.btn a {
text-decoration: none;
color: #f45d48;
}

.btn a:link,
.btn a:visited {
text-decoration: none;
color: inherit;
}

.btn a:hover,
.btn a:active {
text-decoration: none;
color: inherit;
}


.btn.link_share_btn {
color: #020826;
border: solid 2px #020826;
background: #FFF;
}

.btn.link_history_btn {
font-size: 1.2rem;
padding: .5em 1.5em;
color: #020826;
border: solid 2px #020826;
background: #FFF;
}


.btn:link,
.btn:visited {
opacity: 1;
}

.btn:hover,
.btn:active {
opacity: .8;
transition: opacity .3s ease;
}

#btn_start {
margin: 1.5em auto 0;
}

#j_btn,
#give_up {
}

#back_home {
background: #FFF;
color: #020826;
}

.btn_box {
width: 100%;
max-width: 320px;
margin: 1.5em auto 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 1em;
}

.btn_box .btn {
width: 100%;
}

.btn_box .btn.view_commentary {
width: auto;
margin: 0 auto;
color: #020826;
border: solid 2px #020826;
background: #FFF;
}

.btn_box .btn.view_commentary.giveup {
width: 100%;
margin: 0;
}

/*
 設定フィールド
-----------------------*/
#setting_field {
background: #FFF;
width: 80%;
max-width: 420px;
padding: 2em 3em;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
border-radius: .5em;
z-index: 2000;
display: none;
}

#setting_field .logo_img {
width: 80%;
max-width: 140px;
margin: 1em auto 0;
}

#setting_field .logo_img img {
width: 100%;
height: auto;
}

#setting_field h2 {
margin: 1.5em 0 0;
}

#setting_field .hd {
font-size: 1.2rem;
font-weight: bold;
white-space: nowrap;
min-width: 3em;
text-align: left;
}

#setting_field .hd sup {
font-size: .8em;
vertical-align: super;
}

#setting_field .sub_hd {
font-size: 1.2rem;
white-space: nowrap;
}

.setting_btn_set {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1em;
}

/*- 人物ON・OFFの設定 -*/
.set_category {
display: flex;
align-items: center;
/*justify-content: center;*/
gap: 2em;
margin: 0 0 0;
padding: 1em .8em;
border-bottom: solid #EADDD0 1px;
position: relative;
}

.category_select {
display: flex;
justify-content: center;
align-items: center;
gap: .5em;
font-size: 1.4rem;
}

.category_select > input {
display: none;
}

.category_select > label {
display: block;
position: relative;
width: 3em;
height: .3em;
border-radius: 1em;
background-color: #CCC;
cursor: pointer;
}
.category_select > input:checked + label {
background-color: #F45D49;
}
.category_select > label::before {
position: absolute;
top: 50%;
left: 0.1em;
width: 1.3em;
height: 1.3em;
border-radius: calc(1em - 0.1em);
background-color: #FFF;
border: 1px solid #AAA;
transition: 0.5s;
transform: translateY(-50%);
content: "";
}
.category_select > input:checked + label::before {
left: calc(100% - 1.4em);
}

.set_category_attention {
display: none;
color: #FFF;
width: 100%;
font-size: 1.1rem;
text-align: left;
line-height: 1.4em;
background: rgba(140,122,81,1);
padding: .8em;
border-radius: .5em;
position: absolute;
z-index: 3;
bottom: 3.5em;
left: 50%;
transform: translateX(-50%);
}

.set_category_attention::after {
content: "";
display: block;
width: 1em;
height: 1em;
background: rgba(140,122,81,1);
position: absolute;
bottom: -.2em;
left: 3.5em;
transform: rotate(45deg);
}

.hd {
display: flex;
align-items: center;
}

.hd > span {
display: flex;
align-items: center;
justify-content:center;
color: #BBB;
width: 1.5em;
height: 1.5em;
border: solid 2px #BBB;
border-radius: 50%;
cursor: pointer;
margin: 0 0 0 .5em;
}

.history_lead {
font-size: 1.1rem;
line-height: 1.4em;
margin: 1em 0 0;
}

/*- 単語数の設定 -*/
.set_num_word {
display: flex;
align-items: center;
/*justify-content: center;*/
gap: 2em;
margin: 1em 0 0;
padding: 1em .8em;
border-top: solid #EADDD0 1px;
}

.word_num_box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .8em;
}

.word_num_box label {
font-size: 1.4rem;
white-space: nowrap;
}

/*- 文字数の設定 -*/
.set_num_character {
display: flex;
flex-wrap: warp;
align-items: center;
/*justify-content: center;*/
gap: 2em;
padding: 1em .8em;
border-top: solid #EADDD0 1px;
border-bottom: solid #EADDD0 1px;
}

.character_num_box {
display: flex;
flex-wrap: wrap;
gap: .5em;
}

.character_num_box > dl {
display: flex;
align-items: center;
}

/*
セレクトボックス 
---------------------------*/
.select_character_num {
position: relative;
}

.select_character_num::before,
.select_character_num::after {
position: absolute;
content: '';
pointer-events: none;
}

.select_character_num::before {
display: inline-block;
right: 0;
width: 2em;
height: 2em;
border-radius: 0 3px 3px 0;
background-color: #EADDD0;
}

.select_character_num::after {
position: absolute;
top: 50%;
right: 1em;
transform: translate(50%, -50%) rotate(45deg);
width: .6em;
height: .6em;
border-bottom: 2px solid #FFF;
border-right: 2px solid #FFF;
}

.select_character_num select {
appearance: none;
border: none;
font-size: 1.4rem;
height: 2em;
padding: .2em 3em .2em .8em;
border-radius: .3em;
background-color: #F9F4F0;
cursor: pointer;
}

.select_character_num select:focus {
outline: .1em solid #EADDD0;
}

/*
 ラジオボタン 
---------------------------*/
input[type=radio] {
display: none;
}

.radio {
cursor: pointer;
display: flex;
white-space: nowrap;
align-items: center;
padding-left: 1.6em;
position: relative;
}

.radio::before {
content: '';
display: block;
background: #FFF;
width: 1.2em;
height: 1.2em;
border: 1px solid #AAA;
border-radius: 50%;
position: absolute;
left: 0;
}

.radio::after {
content: '';
display: block;
background: #EADDD0;
width: .9em;
height: .9em;
border-radius: 50%;
opacity: 0;
position: absolute;
top: 50%; left: .22em;
transform: translateY(-50%);
}

input[type=radio]:checked + .radio::after {
opacity: 1;
}

/*
 文字フィールド
-----------------------*/
#words_field {
background: #F9F4EF;
padding: 1em 0 1em;
pointer-events: none;
positon: relative;
}

#words_field .lead {
font-weight: bold;
}

#btn_history {
position: absolute;
top: 1em;
right: 1em;
width: 2em;
height: 2em;
background: url(../img/icon_history.png) no-repeat;
background-size: contain;
cursor: pointer;
}


.words_wrapper {
min-height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}

/*- 文字カード -*/
.words {
/*width: 60.5%;
max-width: 275px;*/
width: 79%;
max-width: 374px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: .8em;
user-select: none;
}

.word {
/*width: calc(20% - .4379em);*/
width: 12.5%;
font-family: 'Sawarabi Mincho', serif;
font-size: 150%;
font-weight: bold;
color: #020826;
border: solid 1px #716040;
border-radius: .35em;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
/*background: #fef6e4;*/
background: #FFF;
transform: rotate(5deg);
cursor: pointer;
z-index: 100;
pointer-events: auto;
position: relative;
transition: border-color .5s;
}

.word[data-ans_idx="0"],
.word[data-ans_idx="1"],
.word[data-ans_idx="2"] {
border: solid 2px #078080;
}

.word.correct::before {
content: "";
width: 50%;
height: 50%;
display: block;
border: solid 3px #FFCBD6;
border-radius: 50%;
position: absolute;
z-index: -1;
}

.word.hinted::before {
content: "";
width: 90%;
height: 90%;
display: block;
background: url(../img/icon_hinted.png) no-repeat;
background-size: contain;
position: absolute;
z-index: -1;
}

.word.incorrect::before,
.word.incorrect::after {
content: "";
width: 80%;
height: .5rem;
display: block;
background: #bae8e8;
position: absolute;
z-index: -1;
}

.word.incorrect::before {
transform: rotate(45deg);
}

.word.incorrect::after {
transform: rotate(-45deg);
}

.word:nth-child(2n+1) {
transform: rotate(-20deg);
position: relative;
top: -.5em;
}

.word:nth-child(3n) {
transform: rotate(30deg);
position: relative;
top: .5em;
left: 0em;
}

.word:nth-child(4n) {
transform: rotate(-30deg);
position: relative;
top: 0;
left: -.5em;
}

.word:nth-child(7n) {
transform: rotate(-25deg);
position: relative;
top: 0;
left: .5em;
}

.word:nth-child(8n) {
transform: rotate(-40deg);
position: relative;
top: .5em;
left: 0;
}

/*
 解答フィールド
-----------------------*/
#answer_field {
width: 90%;
max-width: 420px;
margin: 1em auto 0;
}

#answer_field .btn_box .view_commentary {
display: none;
}

.top_box {
display: flex;
align-items: center;
justify-content: end;
gap: .5em;
}

/*- ヒント -*/
.hint {
font-size: 1.2rem;
font-weight: bold;
text-align: left;
color: #FFF;
display: flex;
align-items: center;
gap: .2em;
flex-wrap: nowrap;
border-radius: 100vw;
padding: .2em .5em .2em .2em;
background: #020826;
cursor: pointer;
}

.hint::before {
content: "";
display: block;
width: 1.2em;
height: 1.2em;
background: url(../img/icon_hint.png) no-repeat;
background-size: contain;
}

.hint:hover {
opacity: .8;
transition: opacity .3s ease;
}

.hint img {
width: 60%;
height: auto;
}

/*- カテゴリ -*/
.category {
display: flex;
align-items: center;
/*border: solid .05rem #AAA;*/
padding: .2em .5em;
margin: .8em 0 0;
background: #716040;
color: #FFF;
user-select: none;
}

.category_hd {
font-size: 1.1rem;
font-weight: bold;
}

.category_name {
text-align: left;
font-size: 1.3rem;
border: solid #716040 1px;
}

.category_name.actv {
background: #FFF;
color: #FF8E3C;
font-weight: bold;
border: solid #FF8E3C 1px;
cursor: pointer;
}

.category_name.done {
background: transparent;
color: #FFF;
font-weight: bold;
border: none;
pointer-events: none;
border: solid #716040 1px;
}

.category_hd::after {
content: "：";
}

/*- 解答欄 -*/
.answers {
display: flex;
justify-content: start;
flex-wrap: wrap;
gap: .5em;
margin: .5em 0 0;
}

.answer {
width: calc(12.5% - .4379em);
aspect-ratio: 1;
background: #F9F4EF;
border-radius: .4em;
position: relative;
user-select: none;
}

.answer:nth-child(even) {
background: #EADDCF;
}

/*- 1文字ヒントがアクティブなとき -*/
.answer.actv {
border: solid 2px #FF8E3C;
}

.answer > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 150%;
font-family: 'Sawarabi Mincho', serif;
color: #BBB;
}

/*.answer:has(div){
border: solid .2rem #FF8E3C;
pointer-events: none;
}*/

/*- 解答欄に吸い付く用 -*/
.adjust_zone{
display: block;
position: relative;
opacity: 0;
background-color: aquamarine;
width: 2em;
height: 2em;
top: -1em;
left: -1em;
z-index: 10;
}

.temp{
position: absolute;
}

/*
 ヒントフィールド
-----------------------*/
#hint_field {
display: none;
background: #FFF;
width: 80%;
max-width: 420px;
padding: 2em;
position: absolute;
top: 5em; left: 50%;
transform: translateX(-50%);
border-radius: .5em;
z-index: 2000;
}

#hint_field h2 {
margin: 2em 0 0;
}


/*
 全問正解フィールド
-----------------------*/
#all_correct_field {
display: none;
background: #FFF;
width: 80%;
max-width: 420px;
padding: 2em;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
border-radius: .5em;
z-index: 2000;
}


/*
 ギブアップフィールド
-----------------------*/
#give_up_field {
display: none;
background: #FFF;
width: 80%;
max-width: 420px;
padding: 2em;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
border-radius: .5em;
z-index: 2000;
}

/*
 ×ボタン
-----------------------*/
.close_btn {
display: block;
width: 2em;
height: 2em;
background: #000;
position: absolute;
top: -.5em;
right: -.5em;
border-radius: 50%;
cursor: pointer;
}

.close_btn::before,
.close_btn::after {
content: "";
display: block;
width: 1.2em;
height: .3em;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;;
}

.close_btn::before {
transform: translate(-50%,-50%) rotate(45deg);
}

.close_btn::after {
transform: translate(-50%,-50%) rotate(-45deg);
}


/*
 解説フィールド
-----------------------*/
#commentary_field {
display: none;
background: #FFF;
width: 80%;
max-width: 420px;
padding: 2em;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
border-radius: .5em;
z-index: 2000;
}

.commentary {
max-height: 60vh;
margin: 0 0 2em;
text-align: left;
overflow-y: auto;
}

.commentary_word {
font-size: 1.6rem;
font-weight: bold;
margin: 2em 0 0;
}

.commentary_category {
font-size: 1.2rem;
margin: .5em 0 0;
padding: .2em .5em;
background: #716040;
color: #FFF;
}

.commentary_category::before {
content: "カテゴリ：";
}

.commentary_overview {
font-size: 1.2rem;
line-height: 1.4em;
background: #f9f4ef;
padding: .5em;
}


/*
 通信に失敗しました
-----------------------*/
#connection_fail {
display: none;
background: rgba(0,0,0,.8);
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3000;
}

#connection_fail .inner {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#connection_fail h2 {
color: #FFF;
line-height: 1.4em;
}

#connection_fail p {
color: #FFF;
font-size: 1.3rem;
line-height: 1.4em;
margin: 1em 0;
}


/*
 ロード画面
-----------------------*/
#loader_field {
display: none;
background: rgba(0,0,0,.6);
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
}

#loader_field .inner {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#loader_field .inner p {
font-size: 1.3rem;
color: #FFF;
}

.loader {
width: 4em;
height: 4em;
position: relative;
}

.loader:before , .loader:after {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 2em;
height: 2em;
border-radius: 50%;
background:#FFF;
transform: translate(-50% , -100%)  scale(0);
animation: push 2s infinite linear;
}
.loader:after {
animation-delay: 1s;
}
@keyframes push {
0% , 50%{ transform: translate(-50% , 0%)  scale(1) }
100% { transform: translate(-50%, 100%) scale(0) }
}


/*
 シェア画面
-----------------------*/
#share_field {
display: none;
background: #FFF;
width: 80%;
max-width: 320px;
padding: 2em;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
border-radius: .5em;
z-index: 2000;
}

#share_field p {
font-size: 1.6rem;
}

.share_btn_list {
width: 200px;
display: flex;
margin: 2em auto;
gap: 1.5em;
justify-content: center;
align-items: center;
}

.share_btn_list img {
width: 100%;
height: auto;
}

.share_btn_list li {
position: relative;
}

#share_link_copy{
cursor: pointer;
}

.message_copied {
padding: .5em;
background: #020825;
color: #FFF;
border-radius: 100vw;
position: absolute;
top: -1.5em; left: 50%;
transform: translateX(-50%);
font-size: 1.1rem;
display: block;
white-space: nowrap;
}



@media screen and (min-width: 960px) {
/*-- min-width: 960px //--*/

/*======================
 footer: 960px
=======================*/


/*======================
header: 960px
=======================*/


/*======================
 contents: 960px
=======================*/


/*--// min-width: 960px //--*/
}