/*----------------全体的なcss------------------*/
html {
width: 100%;
}
@media (prefers-color-scheme: dark) {
html, body {
color: #000000 !important;
}
input, textarea, select {
background-color: #ffffff !important;
color: #000000 !important;
}
button {
color: #212529 !important;
}
.toggle-button, .action-btn{
color: white !important;
}
}
body {
background-color: #ffe89d;
}
#map_page_color {
background-color: #5F87A7;
}
button.md-btn {
vertical-align: middle; /* ボタンをテキストの中央に配置 */
}
button.me_btn {
vertical-align: middle; /* ボタンをテキストの中央に配置 */
}
select {
-moz-appearance: none;
-webkit-appearance: none;
/ need for safari / appearance: none;
font-size: 14px;
}
/*----------------全体的なcss（終了）------------------*/
/*----------------コンテンツ再利用------------------*/
.free_waku {
border: 0.1em solid #050505;
padding: 2em;
background-color: cornsilk;
border-radius: 0.5em;
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
.free_width_waku {
border: 0.1em solid #050505;
padding: 2em;
background-color: cornsilk;
border-radius: 0.5em;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
@media screen and (max-width: 480px) {
.free_waku {
padding: 1em;
width: 100%;
}
.free_width_waku {
padding: 1em;
width: 100%;
}
}
/*----------------//コンテンツ再利用------------------*/
.info_waku {
margin-bottom: 1em;
}
.free_info_waku {
border: 0.1em solid #050505;
padding: 2em;
background-color: cornsilk;
border-radius: 0.5em;
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
.info_waku_white {
border: 0.1em solid #050505;
background-color: white;
border-radius: 0.5em;
margin-left: 1em;
margin-right: 1em;
padding: 1em;
line-height: 2em;
/*white-space: pre-wrap;*/
}
.info_popup_waku_white {
border: 0.1em solid #050505;
background-color: white;
border-radius: 0.5em;
margin-left: 1em;
margin-right: 1em;
padding: 2em;
font-size: 18px;
line-height: 2em;
font-weight: 300;
font-family: "Font Awesome 5 Free", 'Quicksand', 'Avenir', 'Arial', sans-serif;
}
@media screen and (max-width: 480px) {
.info_popup_waku_white {
padding: 2em 1em;
font-size: 15px;
line-height: 2em;
font-family: "Font Awesome 5 Free", 'Quicksand', 'Avenir', 'Arial', sans-serif;
}
}
/*----------------お知らせ一覧------------------*/
/*----------------//お知らせ一覧------------------*/
/*----------------固定ボタン------------------*/
#add_image {
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-10%);
pointer-events: none;
z-index: 2;
}
#add_image img {
width: 20%;
pointer-events: auto
}
@media screen and (max-width: 480px) {
#add_image {
position: fixed;
left: 50%;
bottom: 10%;
transform: translateX(-10%);
}
#add_image img {
width: 30%;
}
}
/*----------------固定ボタン（終）------------------*/
/*----------------シーケンスボタン------------------*/
/* LINE004 */
.button_line004 {
margin-bottom: 1em;
font-size: 12px;
}
.button_line004 a {
position: relative;
justify-content: space-around;
align-items: center;
padding: 5px 10px;
color: #313131;
transition: 0.3s ease-in-out;
font-weight: 600;
z-index: 1;
}
.button_line004 a:before,
.button_line004 a:after {
content: '';
width: 18px;
height: 18px;
border-color: #6bb6ff;
box-sizing: border-box;
border-style: solid;
display: block;
position: absolute;
transition: all 0.3s ease-in-out;
}
.button_line004 a:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
.button_line004 a:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
.button_line004 a:hover:before,
.button_line004 a:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #6bb6ff;
}
.button_line004 a:hover {
color: #fff;
background-color: #6bb6ff;
border-color: #6bb6ff;
}
/*----------------シーケンスボタン------------------*/
/*----------------お絵描きエリア------------------*/
#drawingCanvas {
position: absolute;
z-index: 9999;
}
/*----------------お絵描きエリア（終）------------------*/
/*----------------タイトル------------------*/
#list_title {
text-align: center;
font-size: 25px;
font-family: serif;
line-height: 2em;
}
#list_title span {
font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}
@media screen and (max-width: 767px) {
#list_title {
text-align: center;
font-size: 20px;
font-family: serif
}
}
/*----------------タイトル（終）------------------*/
/*----------------一覧メニュー関係------------------*/
/*============
nav
=============*/
#menu_nav {
display: block;
position: fixed;
top: 0;
left: -50%;
bottom: 0;
width: 50%;
background: #f7f3ee;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s;
z-index: 3;
opacity: 0;
}
.open #menu_nav {
left: 0;
opacity: 1;
z-index: 4;
}
#menu_nav .inner {
padding: 25px;
}
#menu_nav .inner ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid;
text-align: center;
}
#menu_nav .inner ul li {
position: relative;
flex: 43%; /* 25% 幅の列として設定（例えば、4列の場合） */
margin: 0; /* 列と列の間隔を設定 */
}
#menu_nav .inner ul li img {
width: 50px;
}
#menu_nav .inner ul li p {
font-size: 14px;
}
#menu_nav .inner ul li a {
display: block;
color: #333;
font-size: 14px;
padding: 1em;
text-decoration: none;
transition-duration: 0.2s;
}
#menu_nav .inner ul li a:hover {
background: #e4e4e4;
}
.menu_title {
color: gray;
font-size: 15px;
}
.only_menu {
font-size: 14px;
padding: 1em;
text-decoration: none;
transition-duration: 0.2s;
background-color: aliceblue;
font-family: serif;
text-align: center;
}
@media screen and (max-width: 767px) {
#menu_nav {
left: -80%;
width: 80%;
}
#menu_nav .inner ul li p {
font-size: 13px;
}
#menu_nav .inner ul li img {
width: 40px;
}
}
/*============
.toggle_btn
=============*/
.toggle_btn {
display: block;
position: fixed;
top: 30px;
right: 30px;
width: 30px;
height: 30px;
transition: all .5s;
cursor: pointer;
z-index: 3;
}
.toggle_btn span {
display: block;
position: absolute;
left: 0;
width: 30px;
height: 2px;
background-color: #333;
border-radius: 4px;
transition: all .5s;
}
.toggle_btn span:nth-child(1) {
top: 4px;
pointer-events: none;
}
.toggle_btn span:nth-child(2) {
top: 14px;
pointer-events: none;
}
.toggle_btn span:nth-child(3) {
bottom: 4px;
pointer-events: none;
}
.open .toggle_btn span {
background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
-webkit-transform: translateY(10px) rotate(-315deg);
transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
-webkit-transform: translateY(-10px) rotate(315deg);
transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
display: none;
transition: all .5s;
}
.open #mask {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .8;
z-index: 3;
cursor: pointer;
}
/*============
main
=============*/
main {
padding: 50px;
}
main h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
}
/*----------------一覧メニュー関係（終）------------------*/
/*----------------フォーム関係------------------*/
#new_add_data_textarea {
white-space: pre-wrap;
line-height: 2em
}
/*----------------フォーム関係------------------*/
/*----------------パンくすリストCSS------------------*/
.breadcrumb {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.breadcrumb li:not(:last-of-type)::after {
content: "»";
margin: 0 .6em; /* 記号の左右の余白 */
color: #777; /* 記号の色 */
}
/*----------------パンくすリストCSS（終了）------------------*/
/*----------------ロード画面-----------------*/
/*==================
#loading
==================*/
#loading {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 99999;
width: 100%;
height: 100%;
background: #999;
}
#loading_box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.loading-one {
display: inline-block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.loading-one p.loading-txt {
color: #fff;
font-size: 20px;
letter-spacing: 0.25em;
line-height: 2.0;
padding: 2em 0;
}
.load_top_text {
position: relative;
border-radius: 5px;
border: 1px solid white;
text-align: center;
line-height: 2em;
word-wrap: break-word;
margin: 1em;
color: white;
}
/*==================
.animation_loading
==================*/
.animation_loading {
animation: equalizer_loading 7000ms infinite;
animation-iteration-count: 10;
}
@keyframes equalizer_loading {
0% {
width: 70%;
}
10% {
width: 50%;
}
20% {
width: 100%;
}
30% {
width: 10%;
}
40% {
width: 50%;
}
50% {
width: 70%;
}
60% {
width: 50%;
}
70% {
width: 10%;
}
80% {
width: 100%;
}
90% {
width: 10%;
}
100% {
width: 70%;
}
}
/*----------------ロード画面-----------------*/
/*-----------図式制作ページcss-----------------*/
#map_set {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
}
#block_space {
position: absolute;
top: 50%;
left: 21%;
transform: translate(0%, -50%);
height: 100%;
width: 50%;
}
#line_outer {
width: 50%;
height: 5%;
position: absolute;
top: 50%;
left: 21%;
transform: translate(0%, -50%);
border-left: 2px solid;
border-right: 2px solid;
}
.line_inner {
width: 100%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid;
}
#left_box {
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
break-inside: avoid;
height: 35%;
width: 15%;
position: absolute;
top: 50%;
left: 5%;
transform: translate(0%, -50%);
}
#right_box {
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
break-inside: avoid;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
height: 15%;
width: 15%;
position: absolute;
top: 50%;
left: 72%;
transform: translate(0%, -50%);
z-index: 2000;
overflow-wrap: break-word;
}
.left_box_line {
width: 100%;
border: 0.5px solid;
}
.right_box_line {
width: 100%;
border: 0.5px solid;
}
.shape_line {
height: 100%;
position: relative;
top: 50%;
transform: translate(-50%, -50%);
border-right: 1px solid;
}
.shape_outer {
position: relative;
left: 50%;
transform: translate(-50%, -50%);
border-top: 1px solid;
}
.line_set {
width: 25%;
height: 20%;
position: relative;
top: 6%;
left: 50%;
transform: translate(-50%, -50%);
}
.staging_block {
position: absolute;
top: 45%;
transform: translate(-50%, -50%);
width: 35%;
height: 50%;
}
.icon_space {
border-top: 1px solid;
}
.staging_box {
background-color: #FFFFFF; /* 背景色指定 */
border-radius: 5px; /* 角丸指定 */
box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
height: 40%;
break-inside: avoid;
margin-bottom: 2em;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
margin-right: 10px;
margin-left: 10px;
}
.white_map_box {
background-color: #FFFFFF; /* 背景色指定 */
border-radius: 5px; /* 角丸指定 */
box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
height: 40%;
break-inside: avoid;
margin-bottom: 2em;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
margin-right: 10px;
margin-left: 10px;
overflow-wrap: break-word;
}
.staging_title {
height: 70%;
white-space: normal;
overflow: scroll;
}
.stance_title {
height: 70%;
white-space: normal;
overflow: scroll;
}
.stance_block {
position: absolute;
top: 74%;
transform: translate(-50%, -50%);
width: 35%;
height: 50%;
}
#map_view {
white-space: nowrap;
}
#product_name {
height: 60%;
white-space: normal;
overflow: scroll;
}
#char_name {
margin-left: 5px;
white-space: normal;
overflow: scroll;
height: 60%;
overflow-wrap: break-word;
}
#stance_name {
margin: 5px;
white-space: normal;
overflow: scroll;
height: 60%;
padding-top: 0.5em;
overflow-wrap: break-word;
}
.stance_text_box {
height: 50%;
}
.char_text_box {
height: 50%;
}
.box_group {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
}
.title_text {
padding-bottom: 3em;
overflow-wrap: break-word;
pointer-events: none;
}
/*-----------図式制作ページcss（終了）-----------------*/
/*-----------質問エリア-----------------*/
.popup_title {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
.popup_title:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
.popup_title:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
#question_text {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
#question_text:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
#question_text:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
#question_text2 {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
#question_text2:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
#question_text2:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
#question_text3 {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
#question_text3:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
#question_text3:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
#question_text4 {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
#question_text4:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
#question_text4:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
#question_text5 {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
#question_text5:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
#question_text5:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
#question_from {
/*margin-top: 50px;*/
position: relative;
left: 50%;
transform: translate(-50%, 10px);
}
#question_from2 {
/*margin-top: 50px;*/
position: relative;
left: 50%;
transform: translate(-50%, 10px);
}
#question_from3 {
/*margin-top: 50px;*/
position: relative;
left: 50%;
transform: translate(-50%, 10px);
}
#button_func {
/*margin-top: 50px;*/
position: relative;
left: 50%;
transform: translate(-50%, 10px);
}
button.button_center.btn.btn-border {
position: relative;
left: 50%;
transform: translate(-50%, 10px);
}
button.margin_top.btn.btn-border {
margin-top: 20px;
}
#button_func2 {
margin-top: 20px;
}
#button_func3 {
margin-top: 20px;
}
.sq_margin_text {
margin-top: 1em;
margin-bottom: 1em;
color: cadetblue;
}
.sq_setting_field {
text-align: center;
}
.button_position {
text-align: center;
}
#map_button_func {
/*margin-top: 50px;*/
position: relative;
left: 50%;
transform: translate(-50%, 10px);
}
#button_func_waku4 {
/*margin-top: 50px;*/
position: relative;
left: 50%;
transform: translate(-50%, 10px);
}
#select_design {
width: 100%;
padding: 10px;
border: 1px solid #b6b5b5;
color: #757373;
}
.stance_select_design {
width: 100%;
padding: 10px;
border: 1px solid #b6b5b5;
color: #757373;
}
.staging_select_design {
width: 100%;
padding: 10px;
border: 1px solid #b6b5b5;
color: #757373;
}
@media screen and (max-width: 480px) {
.popup_title {
font-size: 15px;
line-height: 2em;
}
#question_text {
font-size: 15px;
line-height: 2em;
}
#question_text2 {
font-size: 15px;
line-height: 2em;
}
#question_text3 {
font-size: 15px;
line-height: 2em;
}
#question_text4 {
font-size: 15px;
line-height: 2em;
}
#question_text5 {
font-size: 15px;
line-height: 2em;
}
}
/*-----------質問エリア（終了）-----------------*/
/*----------------アンケート設計エリア------------------*/
.dd-box {
padding: 10px;
}
.dd-box li {
user-select: none;
background: #FFFFFFff;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2);
cursor: grab;
padding: 10px;
transition: box-shadow .3s;
}
.dd-box li.onGrab {
cursor: grabbing;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, .15);
position: absolute;
z-index: 1;
}
.dd-box li:not(:last-child) {
margin-bottom: 30px;
}
.hidden {
visibility: hidden;
}
.setting_position {
position: absolute;
right: 0;
transform: translate(-20%, -120%);
}
.create_item {
width: 3em;
vertical-align: middle;
}
@media screen and (max-width: 480px) {
.create_item {
width: 3em;
vertical-align: middle;
}
}
#create_area {
margin-top: 100px;
margin-left: 50px;
}
@media screen and (max-width: 767px) {
#create_area {
margin-top: 0;
margin-left: 0;
margin-bottom: 5em;
}
}
/*----------------アンケート設計エリア（終）------------------*/
/*----------------フォームボタンエリア------------------*/
#menu_form {
background-color: #FFFFFF;
width: 100%;
height: auto;
border-radius: 10px;
border: solid #000000;
text-align: center;
position: relative;
top: 3em;
}
.form_add {
font-size: 15px;
}
/*----------------フォームボタンエリア（終了）------------------*/
/*----------------１行フォーム------------------*/
.form_design {
position: relative;
width: 100%;
margin-right: auto;
margin-left: auto;
}
.normal_form {
position: relative;
width: 100%;
margin-right: auto;
margin-left: auto;
font: 15px/24px sans-serif;
box-sizing: border-box;
padding: 1em;
transition: 0.3s;
letter-spacing: 1px;
border: 1px solid #ffffff;
box-shadow: 1px 1px 2px 0 #707070 inset;
border-radius: 4px;
}
.form_design input[type='text'] {
font: 15px/24px sans-serif;
box-sizing: border-box;
width: 100%;
padding: 1em;
transition: 0.3s;
letter-spacing: 1px;
color: #aaaaaa;
border: 1px solid #ffffff;
box-shadow: 1px 1px 2px 0 #707070 inset;
border-radius: 4px;
}
.form_design textarea {
font: 15px/24px sans-serif;
box-sizing: border-box;
width: 100%;
padding: 1em;
transition: 0.3s;
letter-spacing: 1px;
color: #aaaaaa;
border: 1px solid #ffffff;
box-shadow: 1px 1px 2px 0 #707070 inset;
border-radius: 4px;
margin-top: 2em;
height: 300px;
margin-bottom: 2em;
}
.ef textarea:focus {
outline: none;
box-shadow: inset 1px 1px 2px 0 #c9c9c9;
}
@media screen and (max-width: 480px) {
.form_design {
position: relative;
width: 98%;
margin-right: auto;
margin-left: auto;
}
}
/*----------------検索フォームcss（終）------------------*/
/*----------------検索フォームcss------------------*/
.cp_iptxt {
position: relative;
width: 100%;
margin-right: auto;
margin-left: auto;
}
.cp_iptxt input[type='text'] {
font: 15px/24px sans-serif;
box-sizing: border-box;
width: 100%;
padding: 1em;
transition: 0.3s;
letter-spacing: 1px;
/*color: #aaaaaa;*/
border: 1px solid #ffffff;
box-shadow: 1px 1px 2px 0 #707070 inset;
border-radius: 4px;
}
.cp_iptxt select {
font: 15px/24px sans-serif;
box-sizing: border-box;
width: 100%;
padding: 1em;
transition: 0.3s;
letter-spacing: 1px;
/*color: #aaaaaa;*/
border: 1px solid #ffffff;
box-shadow: 1px 1px 2px 0 #707070 inset;
border-radius: 4px;
}
.cp_iptxt textarea {
font: 15px/24px sans-serif;
box-sizing: border-box;
width: 100%;
padding: 1em;
transition: 0.3s;
letter-spacing: 1px;
/*color: #aaaaaa;*/
border: 1px solid #ffffff;
box-shadow: 1px 1px 2px 0 #707070 inset;
border-radius: 4px;
margin-top: 2em;
height: 300px;
margin-bottom: 2em;
}
.ef textarea:focus {
outline: none;
box-shadow: inset 1px 1px 2px 0 #c9c9c9;
}
@media screen and (max-width: 480px) {
.cp_iptxt {
position: relative;
width: 98%;
margin-right: auto;
margin-left: auto;
}
}
/*----------------検索フォームcss（終）------------------*/
/*----------------ボタンナビゲーションcss------------------*/
.mini-text {
font-size: 10px;
pointer-events: none;
}
/*文字大きさ*/
ul.bottom-menu {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 45px; /*高さ*/
margin: 0;
padding: 0;
background-color: #f5f5f5; /*背景色*/
border-top: 2px solid #808080; /*バーの上の線*/
border-bottom: 2px solid #808080; /*バーの下の線*/
z-index: 30;
display: flex;
}
ul.bottom-menu.top {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 45px; /*高さ*/
margin: 0;
padding: 0;
background-color: #f5f5f5; /*背景色*/
border-top: 2px solid #808080; /*バーの上の線*/
border-bottom: 2px solid #808080; /*バーの下の線*/
z-index: 30;
display: flex;
}
ul.bottom-menu li {
float: left;
width: 50%;
background-color: #f5f5f5; /*背景色*/
list-style-type: none;
text-align: center;
font-size: 25px; /*アイコンのサイズ*/
}
.bottom-menu li a {
display: block;
color: #808080; /*アイコン＆文字の色*/
padding-top: 10px;
padding-bottom: 5px;
line-height: 10px;
text-decoration: none;
}
.bottom-menu li a:hover {
color: #a9a9a9; /*マウスオーバー時の色*/
}
/* === 展開メニュー === */
ul.menu-second-level {
visibility: hidden;
opacity: 0;
z-index: 1;
}
ul.menu-second-level li a {
border-top: 1px dashed #a9a9a9; /*展開の枠点線*/
font-size: 15px; /*展開メニューの文字サイズ*/
line-height: 30px; /*文字の縦幅*/
}
.menu-second-level li a:hover {
height: 100%;
background: lightgrey; /*マウスオーバーの色*/
}
li.menu-width-max ul.menu-second-level {
position: absolute;
bottom: 47px; /*高さ*/
left: 0;
box-sizing: border-box;
width: 100%;
padding: 0;
}
li.menu-width-max:hover ul.menu-second-level {
bottom: 47px; /*高さ*/
visibility: visible;
opacity: 1;
}
li.menu-width-max ul.menu-second-level li {
float: left;
width: 100%;
border: none;
}
/* ボトムメニューを表示しない指示 */
@media (orientation: landscape) {
/*スマホで横画面の時*/
@media (min-width: 768px) {
/*PC表示の時*/
ul.bottom-menu {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 45px; /*高さ*/
margin: 0;
padding: 0;
background-color: #f5f5f5; /*背景色*/
border-top: 2px solid #808080; /*バーの上の線*/
border-bottom: 2px solid #808080; /*バーの下の線*/
z-index: 30;
}
}
/*スマホの時だけ ボトムメニュー分フッタを底上げ*/
@media (max-width: 767px) {
#footer {
margin-bottom: 45px;
}
}
}
/*----------------ボタンナビゲーションcss（終）------------------*/
/*---------自作ポップアップcss----------*/
.md-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .7;
z-index: 9999;
}
.md-contents {
display: none;
position: fixed;
top: 10px;
left: 50%;
width: 95%;
height: 95%;
overflow: hidden;
transform: translateX(-50%);
z-index: 10000;
overflow-y: scroll;
text-align: left;
line-height: 2em;
font-size: 0.9em;
border-radius: 0.5em;
}
.md-inner {
padding: 3em;
background: #ffe89d;
border-radius: 10px;
}
.popup_area {
border: 0.1em solid #050505;
padding: 3em;
background-color: cornsilk;
border-radius: 0.5em;
}
#waku1 {
border: 0.1em solid #050505;
padding: 3em;
background-color: cornsilk;
border-radius: 0.5em;
}
#waku2 {
border: 0.1em solid #050505;
padding: 3em;
background-color: cornsilk;
border-radius: 0.5em;
}
#waku3 {
border: 0.1em solid #050505;
padding: 3em;
background-color: cornsilk;
border-radius: 0.5em;
}
#waku4 {
border: 0.1em solid #050505;
padding: 3em;
background-color: cornsilk;
border-radius: 0.5em;
}
.md-xmark {
position: absolute;
top: 10px;
right: 9px;
width: 25px;
height: 22px;
z-index: 9999;
cursor: pointer;
}
.md-xmark span {
height: 0.1em;
position: absolute;
left: 0;
width: 100%;
background-color: #333;
border-radius: 4px;
}
.md-xmark span:nth-of-type(1) {
top: 0;
transform: translateY(10px) rotate(-45deg);
pointer-events: none;
}
.md-xmark span:nth-of-type(2) {
bottom: 0;
transform: translateY(-10px) rotate(45deg);
pointer-events: none;
}
@media screen and (max-width: 480px) {
.md-inner {
padding: 1em;
background: #ffe89d;
border-radius: 10px;
}
#waku1 {
border: 0.1em solid #050505;
padding: 1em;
}
.popup_area {
border: 0.1em solid #050505;
padding: 1em;
}
#waku2 {
border: 0.1em solid #050505;
padding: 1em;
}
#waku3 {
border: 0.1em solid #050505;
padding: 1em;
}
#waku4 {
border: 0.1em solid #050505;
padding: 1em;
}
}
/*---------自作ポップアップcss-----------*/
/*---------ナビボタンのサイズ-----------*/
.elem_sys_image {
width: 3em;
vertical-align: middle;
}
@media screen and (max-width: 480px) {
.elem_sys_image {
width: 4em;
vertical-align: middle;
}
}
/*---------ナビボタンのサイズ（終）-----------*/
/*----------タグ生成&検索フォームシステム----------------------*/
/* Reset */
button {
border: none;
background-color: transparent;
cursor: pointer
}
ul, li, button {
padding: 0;
margin: 0
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*タグクラウドのデザイン*/
.tag_design {
display: inline-block;
margin: 1em .6em 0;
padding: .6em;
line-height: 1;
text-decoration: none;
color: #0000ee;
background-color: #fff;
border: 1px solid #0000ee;
border-left: 5px solid #0000ee;
}
/*-----------タグ生成&検索フォームシステム（終）-----------------*/
/*-----------アンケート作成 > 選択ボタンcss-----------------*/
.radio-group {
display: flex;
column-gap: .5rem;
margin-bottom: 0.5rem;
padding: 1rem 0.5rem;
border: 1px solid #333;
}
.radio-area input[type=radio] {
display: none;
}
.radio-area label {
cursor: pointer;
padding: 0.5rem;
color: #333;
transition: .5s;
}
.radio-area input[type=radio]:checked + label {
color: white;
background-color: #41e0dd;
}
/*-----------アンケート作成 > 選択ボタンcss（終）-----------------*/
/*----------------一覧ページ関係----------------*/
#elem_all {
column-count: 4;
height: auto;
margin: 2em 2em 10em;
}
#elem_all_tag1 {
column-count: 4;
height: auto;
margin: 2em 2em 10em;
}
#elem_all_tag2 {
column-count: 4;
height: auto;
margin: 2em 2em 10em;
}
.tag_elem_list {
column-count: 4;
height: auto;
margin: 2em 2em 10em;
}
#elem_all2 {
column-count: 1;
height: auto;
margin: 2em 2em 5em;
}
#elem_all3 {
column-count: 4;
height: auto;
margin: 2em 2em 10em;
}
#elem_all4 {
column-count: 4;
height: auto;
margin: 2em 2em 10em;
}
.elem_all {
column-count: 1;
height: auto;
margin: 2em 2em 10em;
}
.cost_elem_all {
column-count: 4;
height: auto;
margin: 2em 2em 10em;
}
a {
text-decoration: none;
}
.elem_field {
background-color: #FFFFFF; /* 背景色指定 */
border-radius: 5px; /* 角丸指定 */
/*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.45);*/
height: auto;
break-inside: avoid;
margin-bottom: 2em;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
margin-right: 10px;
margin-left: 10px;
border: black 1px solid;
}
/*アイコン設定*/
.edit_icon {
border-top: solid #797979 0.25px;
margin-top: 0.5em;
}
.edit_item {
width: 2em;
}
.delete_item {
width: 2em;
}
@media screen and (max-width: 480px) {
#elem_all {
column-count: 1;
height: auto;
margin: 2em 2em 10em;
}
#elem_all3 {
column-count: 1;
height: auto;
margin: 2em 2em 10em;
}
#elem_all4 {
column-count: 1;
height: auto;
margin: 2em 2em 10em;
}
#elem_all_tag1 {
column-count: 1;
height: auto;
margin: 2em 2em 10em;
}
#elem_all_tag2 {
column-count: 1;
height: auto;
margin: 2em 2em 10em;
}
.tag_elem_list {
column-count: 1;
height: auto;
margin: 2em 2em 10em;
}
.cost_elem_all {
column-count: 1;
height: auto;
margin: 2em 2em 10em;
}
}
/*----------------一覧ページ関係（終了）----------------*/
/*----------------アンケート設計エリア------------------*/
.dd-box {
padding: 10px;
}
.dd-box li {
user-select: none;
background: #FFFFFFff;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2);
cursor: grab;
padding: 10px;
transition: box-shadow .3s;
}
.dd-box li.onGrab {
cursor: grabbing;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, .15);
position: absolute;
z-index: 1;
}
.dd-box li:not(:last-child) {
margin-bottom: 30px;
}
.hidden {
visibility: hidden;
}
.setting_position {
position: absolute;
right: 0;
transform: translate(-20%, -120%);
}
.create_item {
width: 3em;
vertical-align: middle;
}
@media screen and (max-width: 480px) {
.create_item {
width: 3em;
vertical-align: middle;
}
}
#create_area {
margin-top: 100px;
margin-left: 50px;
}
@media screen and (max-width: 767px) {
#create_area {
margin-top: 0;
margin-left: 0;
margin-bottom: 5em;
}
}
/*----------------アンケート設計エリア（終）------------------*/
/*----------------フォームボタンエリア------------------*/
#menu_form {
background-color: #FFFFFF;
width: 100%;
height: auto;
border-radius: 10px;
border: solid #000000;
text-align: center;
position: relative;
top: 3em;
}
.form_add {
font-size: 15px;
}
/*----------------フォームボタンエリア（終了）------------------*/
/*----------------ワンブロック全体css------------------*/
.white_space {
width: 640px;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5%;
background-color: white;
border-radius: 10px;
border: solid;
}
.white_space_text {
padding: 2% 5% 0 6%;
font-size: 20px;
line-height: 2em;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
@media screen and (max-width: 480px) {
.white_space {
width: 90%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5%;
background-color: white;
border-radius: 10px;
}
.white_space_text {
padding: 2% 5% 0 5%;
font-size: 15px;
line-height: 2em;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
}
/*----------------ワンブロック全体css（終了）------------------*/
/*----------------ワンブロック個別css------------------*/
.we_dd_rule {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
.title_space {
width: 80%;
margin-right: auto;
margin-left: auto;
position: relative;
top: 19px;
}
.white_space_layout {
display: flex;
width: 80%;
height: 13em;
margin-left: auto;
margin-right: auto;
margin-bottom: 5em;
}
.white_space_rule {
width: 80%;
padding: 0.7em;
margin-top: 1em;
background-color: white;
border-radius: 10px;
border: solid;
overflow-y: scroll;
}
.white_space_navi {
width: 20%;
margin-top: 1em;
margin-left: 1em
}
.white_space_text_bottom {
padding: 0.5em;
}
.white_space_text_tag {
font-size: 1.3em;
padding: 1em;
}
.white_space_rule_bottom {
background-color: white;
border-radius: 10px;
border: solid;
overflow-x: scroll;
margin-bottom: 1em;
display: flex;
}
.white_space_rule_tag {
background-color: white;
border-radius: 10px;
border: solid;
height: 12em;
font-size: 10px;
overflow-y: scroll;
}
.white_space_text_rule {
padding: 0.2em;
font-size: 18px;
line-height: 2em;
font-weight: 300;
font-family: "Font Awesome 5 Free", 'Quicksand', 'Avenir', 'Arial', sans-serif;
}
#tag_add_area {
margin-bottom: 1em;
}
@media screen and (max-width: 480px) {
.we_dd_rule {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-bottom: 3em;
}
.title_space {
width: 98%;
margin-right: auto;
margin-left: auto;
position: relative;
top: 19px;
}
.white_space_layout {
display: flex;
width: 98%;
height: 13em;
margin-left: auto;
margin-right: auto;
}
.white_space_rule {
width: 80%;
padding: 0.7em;
margin-top: 1em;
background-color: white;
border-radius: 10px;
border: solid;
overflow-y: scroll;
}
.white_space_navi {
width: 20%;
margin-top: 1em;
margin-left: 0.5em
}
.white_space_text_bottom {
padding: 0.5em;
}
.white_space_text_tag {
font-size: 1.3em;
padding-left: 0.5em;
}
.white_space_rule_bottom {
background-color: white;
border-radius: 10px;
border: solid;
font-size: 10px;
overflow-x: scroll;
margin-bottom: 1em;
display: flex;
}
.white_space_rule_tag {
background-color: white;
border-radius: 10px;
border: solid;
overflow-y: scroll;
}
.white_space_text_rule {
padding: 0.2em;
font-size: 14px;
line-height: 2em;
font-weight: 300;
font-family: "Font Awesome 5 Free", 'Quicksand', 'Avenir', 'Arial', sans-serif;
}
}
/*----------------ワンブロック個別css（終了）------------------*/
/*----------------吹き出しcss------------------*/
h1 {
position: relative;
padding: 0.6em;
background: #FFF056;
border: 1px solid #000000;
border-radius: 0.2em;
font-size: 1em;
}
h1::before {
position: absolute;
content: '';
top: 102%;
left: 30px;
border-top: 15px solid #000000;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
width: 0;
height: 0;
}
h1::after {
position: absolute;
content: '';
top: 98%;
left: 30px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
width: 0;
height: 0;
border-top: 15px solid #FFF056;
}
@media screen and (max-width: 480px) {
h1 {
position: relative;
padding: 0.6em;
background: #FFF056;
border: 1px solid #000000;
border-radius: 0.2em;
font-size: 1em;
}
h1::before {
position: absolute;
content: '';
top: 102%;
left: 30px;
border-top: 15px solid #000000;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
width: 0;
height: 0;
}
h1::after {
position: absolute;
content: '';
top: 98%;
left: 30px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
width: 0;
height: 0;
border-top: 15px solid #FFF056;
}
}
/*----------------吹き出しcss（終）------------------*/
/*---------ナビボタンのサイズ-----------*/
.elem_sys_image {
width: 3em;
vertical-align: middle;
}
@media screen and (max-width: 480px) {
.elem_sys_image {
width: 4em;
vertical-align: middle;
}
}
/*---------ナビボタンのサイズ（終）-----------*/
/*----------タグ生成&検索フォームシステム----------------------*/
/* Reset */
button {
border: none;
background-color: transparent;
cursor: pointer
}
ul, li, button {
padding: 0;
margin: 0
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*タグクラウドのデザイン*/
.tag_design {
display: inline-block;
margin: 1em .6em 0;
padding: .6em;
line-height: 1;
text-decoration: none;
color: #0000ee;
background-color: #fff;
border: 1px solid #0000ee;
border-left: 5px solid #0000ee;
}
/*-----------タグ生成&検索フォームシステム（終）-----------------*/
/*-----------登録または変更ボタンのcss-----------------*/
.btn,
button.btn {
font-size: 1em;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
button.btn-border {
margin-bottom: 40px;
padding: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border-radius: 0;
}
button.btn-border span {
position: relative;
display: block;
padding: 0.5em 2em;
color: #000;
border: 2px solid #000;
border-radius: 0.5rem;
background: #fff;
pointer-events: none;
}
button.btn-border:before {
position: absolute;
bottom: -6px;
left: 0;
display: block;
width: 96%;
height: 10px;
content: "";
-webkit-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #000;
border-top: 1px solid #000;
border-radius: 0 0 0.5rem 0.5rem;
background-image: -webkit-repeating-linear-gradient(
135deg,
#000,
#000 1px,
transparent 2px,
transparent 5px
);
background-image: repeating-linear-gradient(
-45deg,
#000,
#000 1px,
transparent 2px,
transparent 5px
);
background-size: 7px 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
button.btn-border:hover {
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
}
button.btn-border:hover:before {
bottom: -5px;
}
button.btn-border:active {
-webkit-transform: translate(0, 7px);
transform: translate(0, 7px);
}
button.btn-border:active:before {
bottom: -1px;
}
/*-----------登録または変更ボタンのcss（終）-----------------*/
/*-----------アンケート作成 > 選択ボタンcss-----------------*/
.radio-group {
display: flex;
column-gap: .5rem;
margin-bottom: 0.5rem;
padding: 1rem 0.5rem;
border: 1px solid #333;
}
.radio-area input[type=radio] {
display: none;
}
.radio-area label {
cursor: pointer;
padding: 0.5rem;
color: #333;
transition: .5s;
}
.radio-area input[type=radio]:checked + label {
color: white;
background-color: #41e0dd;
}
/*-----------アンケート作成 > 選択ボタンcss（終）-----------------*/
/*-----------切り替えタグのデザイン------------------------------------------*/
* {
box-sizing: border-box;
padding: 0;
}
ul {
list-style-type: none;
}
.tab-area {
display: flex;
border: 1px solid;
cursor: pointer; /* カーソルポインターに */
background-color: cornsilk;
}
.tab {
width: 100%;
padding: 5px;
text-align: center;
}
.tab:nth-child(n+2) {
border-left: 1px solid;
}
.tab.active {
background-color: cadetblue;
color: #FFFFFF;
}
.panel {
display: none;
}
.panel.active {
display: block;
}
.tab-area2 {
display: flex;
border: 1px solid;
cursor: pointer; /* カーソルポインターに */
background-color: cornsilk;
margin-bottom: 2em;
}
.tab2 {
width: 100%;
padding: 5px;
text-align: center;
}
.tab2:nth-child(n+2) {
border-left: 1px solid;
}
.tab2.active {
background-color: cadetblue;
color: #FFFFFF;
}
.panel2 {
display: none;
}
.panel2.active {
display: block;
}
.tab_text_area {
background-color: white;
border-radius: 0.5em;
margin-top: 1em;
border: 1px solid #b6b5b5;
height: 10em;
font-size: 16px;
overflow-y: auto;
padding-top: 1em;
padding-left: 2em;
padding-right: 2em;
}
.tag_page {
margin-top: 3em;
}
#tag_page {
margin-top: 3em;
}
#tag_design {
margin-top: 3em;
}
#tag_page3 {
margin-top: 3em;
}
#char_comment_tag {
margin-top: 3em;
}
#stance_comment_tag {
margin-top: 3em;
}
#product_comment_tag {
margin-top: 3em;
}
#how_comment_tag {
margin-top: 3em;
}
#staging_comment_tag {
margin-top: 3em;
}
#variation_comment_tag {
margin-top: 3em;
}
#staging_change_tag {
margin-top: 3em;
}
#stance_change_tag {
margin-top: 3em;
}
#char_sequence_tag {
margin-top: 3em;
}
#product_sequence_tag {
margin-top: 3em;
}
#staging_sequence_tag {
margin-top: 3em;
}
@media screen and (max-width: 480px) {
.tab_text_area {
padding: 1em;
}
}
/*-----------切り替えタグのデザイン（終）------------------------------------------*/
/*----------------印刷設定------------------*/
@media print {
/* 印刷時に適用されるスタイルを指定 */
/* 例: 不要な要素を非表示にする */
header, footer {
display: none;
}
ul.bottom-menu {
display: none;
}
html {
transform: rotate(90deg); /* 90度回転させる */
margin-top: 10em;
}
#left_box {
box-shadow: none;
border: black 1px solid;
}
.white_map_box {
box-shadow: none;
border: black 1px solid;
}
#right_box {
box-shadow: none;
border: black 1px solid;
}
.edit_item {
display: none;
}
.delete_item {
display: none;
}
.icon_space {
display: none;
}
.right_box_line {
display: none;
}
.staging_title {
height: 90%;
}
#char_name {
height: 90%;
}
#stance_name {
height: 90%;
}
#stance_title {
height: 90%;
}
#product_name {
height: 90%;
}
#hint {
display: none;
}
}
@page {
size: portrait;
margin: 0;
}
/*----------------印刷設定（終）------------------*/
/*----------------マップデザイン------------------*/
#map_space {
/*height: 800px;*/
/*width: 1440px;*/
}
#data_page {
overflow-y: auto;
margin-top: 3em;
}
.row_elem {
width: 100%;
height: 100px;
position: relative;
transform: translate(0%, 30%);
}
.row_space {
height: 150px;
border-bottom: black 1px solid;
}
.map_block {
width: 200px;
background-color: white;
border: black 1px solid;
padding: 0.5em;
position: absolute;
left: 0;
white-space: normal; /* テキストの改行によって行を調整する */
word-wrap: break-word; /* 長い単語がはみ出る場合に改行する */
}
.title_block {
width: 10%;
height: 80%;
background-color: white;
border: black 1px solid;
padding: 0.5em;
position: relative;
}
.title_b {
position: relative;
}
.vertical-align img {
display: block;
}
.click_space {
width: 100%;
height: 100%;
}
.map_elem_icon {
position: absolute;
top: 100%;
left: -1%
}
/*----------------マップデザイン（終了）------------------*/
/*----------------elem_sq関係------------------*/
#elem_sq_title {
background-color: white;
border-radius: 0.5em;
margin-top: 1em;
border: 1px solid #b6b5b5;
height: 4em;
font-size: 16px;
overflow-y: auto;
padding-top: 1em;
padding-left: 2em;
padding-right: 2em;
}
#elem_sq_memo {
background-color: white;
border-radius: 0.5em;
margin-top: 1em;
border: 1px solid #b6b5b5;
height: 10em;
font-size: 16px;
overflow-y: auto;
padding-top: 1em;
padding-left: 2em;
padding-right: 2em;
margin-bottom: 5em;
}
.detail_text {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
}
.detail_text:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
.detail_text:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
.select_sq_all {
background-color: white;
border-radius: 0.5em;
margin-top: 1em;
border: 1px solid #b6b5b5;
height: 4em;
font-size: 16px;
padding-left: 2em;
}
.elem_field_sq {
background-color: #FFFFFF; /* 背景色指定 */
border-radius: 5px; /* 角丸指定 */
/*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.45);*/
break-inside: avoid;
margin-bottom: 2em;
margin-right: 10px;
margin-left: 10px;
border: black 1px solid;
padding: 1em;
position: relative;
}
.close-button {
content: "×";
position: absolute;
top: -20px;
right: -10px;
color: black;
font-size: 25px;
padding: 2px 4px;
border-radius: 50%;
cursor: pointer;
}
.none_sq {
background-color: tan; /* 背景色指定 */
border-radius: 5px; /* 角丸指定 */
/*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.45);*/
break-inside: avoid;
margin-bottom: 2em;
margin-right: 10px;
margin-left: 10px;
border: black 1px solid;
text-align: center;
padding: 1em;
}
.switch {
position: relative;
left: 50%;
width: 150px;
height: 50px;
text-align: center;
margin: 0 0 0 -75px;
background: #00bc9c;
transition: all 0.2s ease;
border-radius: 25px;
margin-bottom: 3em
}
.switch span {
position: absolute;
width: 20px;
height: 4px;
top: 50%;
left: 50%;
margin: -2px 0px 0px -4px;
background: #fff;
display: block;
transform: rotate(-45deg);
transition: all 0.2s ease;
}
.switch span:after {
content: "";
display: block;
position: absolute;
width: 4px;
height: 12px;
margin-top: -8px;
background: #fff;
transition: all 0.2s ease;
}
input[type=radio] {
display: none;
}
.switch label {
cursor: pointer;
color: rgba(0, 0, 0, 0.2);
width: 60px;
line-height: 50px;
transition: all 0.2s ease;
}
label[for=yes] {
position: absolute;
left: 0px;
height: 20px;
}
label[for=no] {
position: absolute;
right: 0px;
}
#no:checked ~ .switch {
background: darkgray;
}
#no:checked ~ .switch span {
background: #fff;
margin-left: -8px;
}
#no:checked ~ .switch span:after {
background: #fff;
height: 20px;
margin-top: -8px;
margin-left: 8px;
}
#yes:checked ~ .switch label[for=yes] {
color: #fff;
}
#no:checked ~ .switch label[for=no] {
color: #fff;
}
@media screen and (max-width: 480px) {
.detail_text {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 15px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
}
}
/*----------------elem_game------------------*/
#elem_game {
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
.game_waku_white {
border: 0.1em solid #050505;
background-color: white;
border-radius: 0.5em;
margin-left: 2em;
margin-right: 2em;
padding: 1em;
line-height: 2em;
}
.yazirusi {
text-align: center;
margin: 1em
}
@media screen and (max-width: 480px) {
#elem_game {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
}
/*----------------elem_game------------------*/
/*----------------hint------------------*/
#hint {
width: 70%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
#base_hint {
width: 70%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
#last_check {
width: 90%;
height: 100%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.hint_waku {
border: 0.1em solid #050505;
padding: 2em;
background-color: cornsilk;
border-radius: 0.5em;
margin-bottom: 5em;
}
.hint_waku_white {
border: 0.1em solid #050505;
background-color: white;
border-radius: 0.5em;
margin-left: 1em;
margin-right: 1em;
padding: 2em;
line-height: 2em;
}
.hint_text {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
.hint_text:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
.hint_text:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
@media screen and (max-width: 480px) {
.hint_waku_white {
line-height: 2em;
padding-top: 2em;
padding-left: 1em;
padding-right: 1em;
}
.hint_waku {
border: 0.1em solid #050505;
padding: 1em;
}
#hint {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
#base_hint {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
}
/*----------------hint------------------*/
#top {
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
.top_waku {
border: 0.1em solid #050505;
padding: 2em;
background-color: cornsilk;
border-radius: 0.5em;
margin-bottom: 5em;
}
.tab_wide {
width: 98%;
margin-top: 5em;
margin-right: auto;
margin-left: auto;
}
.top_waku_white {
border: 0.1em solid #050505;
background-color: white;
border-radius: 0.5em;
margin-left: 1em;
margin-right: 1em;
padding: 2em;
line-height: 2em;
/*white-space: pre-wrap;*/
}
.top_text {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
.top_text:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
.top_text:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
@media screen and (max-width: 480px) {
.top_waku_white {
line-height: 2em;
padding-top: 2em;
padding-left: 1em;
padding-right: 1em;
}
.top_waku {
border: 0.1em solid #050505;
padding: 1em;
}
#top {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
}
/*----------------rank------------------*/
#rank {
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
.rank_waku {
border: 0.1em solid #050505;
padding: 2em;
background-color: cornsilk;
border-radius: 0.5em;
margin-bottom: 5em;
}
.rank_waku_white {
border: 0.1em solid #050505;
background-color: white;
border-radius: 0.5em;
margin-left: 1em;
margin-right: 1em;
padding: 2em;
line-height: 2em;
}
.rank_text {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
.rank_text:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
.rank_text:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
h4 {
position: relative;
display: inline-block;
text-align: center;
padding: 1em;
font-size: 25px;
font-weight: 300;
margin: 0 0 1em;
}
h4::before, h4::after {
position: absolute;
content: '';
height: 50px;
border-left: #000000 solid 2px;
}
h4::before {
left: 0;
transform: rotate(-30deg);
}
h4::after {
right: 0;
transform: rotate(30deg);
}
.rank_elem {
background-color: lightskyblue; /* 背景色指定 */
border-radius: 5px; /* 角丸指定 */
/*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.45);*/
height: 4em;
break-inside: avoid;
margin-bottom: 2em;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
margin-right: 10px;
margin-left: 10px;
border: black 1px solid;
}
@media screen and (max-width: 480px) {
.rank_waku_white {
line-height: 2em;
padding-top: 2em;
padding-left: 1em;
padding-right: 1em;
}
.rank_waku {
border: 0.1em solid #050505;
padding: 1em;
}
#rank {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
}
/*----------------rank------------------*/
/*!*----------------sq_map------------------*!*/
/*.map_view{*/
/* white-space: nowrap;*/
/*}*/
/*.map_set{*/
/* position: relative;*/
/* top: 50%;*/
/* left: 50%;*/
/* transform: translate(-50%, -50%);*/
/* height: 100%;*/
/*}*/
/*.left_box{*/
/* background-color: #FFFFFF;*/
/* border-radius: 5px;*/
/* box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);*/
/* break-inside: avoid;*/
/* height: 35%;*/
/* width: 15%;*/
/* position: absolute;*/
/* top: 50%;*/
/* left: 5%;*/
/* transform: translate(0%, -50%);*/
/*}*/
/*.char_name{*/
/* margin-left: 5px;*/
/* white-space: normal;*/
/* overflow: scroll;*/
/* height: 60%;*/
/* overflow-wrap: break-word;*/
/*}*/
/*.stance_name{*/
/* margin: 5px;*/
/* white-space: normal;*/
/* overflow: scroll;*/
/* height: 60%;*/
/* padding-top: 0.5em;*/
/* overflow-wrap: break-word;*/
/*}*/
/* .line_outer{*/
/* width: 50%;*/
/* height: 5%;*/
/* position: absolute;*/
/* top: 50%;*/
/* left: 21%;*/
/* transform: translate(0%, -50%);*/
/* border-left: 2px solid;*/
/* border-right: 2px solid;*/
/*}*/
/*.right_box{*/
/* background-color: #FFFFFF;*/
/* border-radius: 5px;*/
/* box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);*/
/* break-inside: avoid;*/
/* padding-top: 1em;*/
/* padding-left: 1em;*/
/* padding-right: 1em;*/
/* height: 15%;*/
/* width: 15%;*/
/* position: absolute;*/
/* top: 50%;*/
/* left: 72%;*/
/* transform: translate(0%, -50%);*/
/* z-index: 2000;*/
/* overflow-wrap: break-word;*/
/*}*/
/*.product_name{*/
/* height: 60%;*/
/* white-space: normal;*/
/* overflow: scroll;*/
/*}*/
/*.block_space{*/
/* position: absolute;*/
/* top: 50%;*/
/* left: 21%;*/
/* transform: translate(0%, -50%);*/
/* height: 100%;*/
/* width: 50%;*/
/*}*/
/*!*----------------sq_map------------------*!*/
/*!*----------------吹き出し------------------*!*/
.balloon1 {
position: relative;
display: inline-block;
margin: 5px 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 12px;
background: #FFF056;
border: solid 2px #555;
box-sizing: border-box;
text-align: center;
cursor: pointer;
user-select: none;
}
.balloon1:before {
content: "";
position: absolute;
bottom: -23px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #FFF056;
z-index: 2;
}
.balloon1:after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #555;
z-index: 1;
}
.balloon1 p {
margin: 0;
padding: 0;
}
.balloon2 {
position: relative;
display: inline-block;
margin: 5px 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 12px;
background: #FFF056;
border: solid 2px #555;
box-sizing: border-box;
text-align: center;
cursor: pointer;
user-select: none;
}
.balloon2:before {
content: "";
position: absolute;
bottom: -23px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #FFF056;
z-index: 2;
}
.balloon2:after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #555;
z-index: 1;
}
.balloon2 p {
margin: 0;
padding: 0;
}
.under_btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.skip_text {
margin-left: auto;
cursor: pointer;
color: #555;
font-size: 12px;
}
/*!*----------------吹き出し------------------*!*/
/*!*----------------生年月日------------------*!*/
.form-select-wrap {
display: inline-flex;
max-width: 300px;
align-items: center;
}
.form-select-wrap > select {
padding: 8px 16px;
margin-left: 10px;
margin-right: 10px;
border: 1px solid gray;
border-radius: 4px;
font-size: 14px;
}
/* 行の高さを変更する */
#app thead td {
padding-top: 1px;
padding-bottom: 1px;
}
#app tbody td {
padding-top: 1px;
padding-bottom: 1px;
}
/* 行の色を変更する */
#app thead tr {
background-color: skyblue;
}
#app tbody tr.odd {
background-color: cornsilk;
}
#app tbody tr.even {
background-color: wheat;
}
/* 罫線を引く */
#app thead td:first-child {
border-left: 1px solid #404040;
}
#app thead td {
border-top: 1px solid #404040;
border-right: 1px solid #404040;
}
#app tbody td:first-child {
border-left: 1px solid #404040;
padding-top: 1em;
padding-bottom: 1em;
}
#app tbody td {
border-right: 1px solid #404040;
}
/*!*----------------生年月日------------------*!*/
/*-----------sq_map-----------------*/
.sp_box {
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.45);
break-inside: avoid;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
height: 15%;
width: 15%;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
z-index: 2000;
overflow-wrap: break-word;
}
.sp_box_text {
height: 60%;
white-space: normal;
overflow: scroll;
}
.sp_line {
width: 50%;
height: 5%;
position: absolute;
top: 50%;
left: 16%;
transform: translate(0%, -50%);
border-left: 2px solid;
border-right: 2px solid;
}
.sp_map {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
}
/*-----------sq_map（終了）-----------------*/
/*-----------sp_map-----------------*/
.sp_map_box {
height: 150px;
width: 150px;
border-radius: 2px;
background-color: white;
border: solid 1px black;
position: absolute;
}
/*-----------sp_map（終了）-----------------*/
/*-----------answer-----------------*/
.answer_box {
width: 80%;
background-color: white;
border-radius: 5px;
border: solid 1px black;
padding: 1em;
margin-bottom: 2em;
}
.answer_dt {
text-align: end;
}
.answer_text {
white-space: pre-wrap;
}
.edit_consultation_icon {
text-align: end;
height: 1em;
margin-bottom: 5px;
}
.answer_name {
font-size: 10px;
}
.answer_dt {
font-size: 10px;
}
/*-----------sp_map（終了）-----------------*/
/*-----------content-----------------*/
.content_waku_white {
border: 0.1em solid #050505;
background-color: white;
border-radius: 0.5em;
margin-left: 1em;
margin-right: 1em;
padding: 2em;
line-height: 2em;
margin-bottom: 2em;
}
/*-----------content（終了）-----------------*/
/*----------------design------------------*/
#design_menu {
width: 3em;
position: absolute;
top: 3em;
left: 3em;
}
.design_btn {
width: 3em;
position: relative;
margin: 1em;
}
button.select.design_btn {
border: solid 1px #333;
padding: 16px 20px;
width: 100%;
margin: 0 auto 3em;
}
button.select.design_btn::after {
content: "";
width: 10px;
height: 10px;
border-top: solid 1px #333;
border-right: solid 1px #333;
transform: rotate(45deg);
margin-top: -5px;
top: 50%;
right: 20px;
position: absolute;
}
div.network-manipulationDiv {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(252, 252, 252, 0.6) 48%, rgba(250, 250, 250, 0.6) 50%, rgba(252, 252, 252, 0.6) 100%)
}
div.vis-network button.vis-edit-mode, div.vis-network div.vis-edit-mode {
display: none;
}
.vis-manipulation {
display: none !important;
}
/*----------------design------------------*/
/*----------------frame------------------*/
#frame {
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
.frame_waku {
border: 0.1em solid #050505;
padding: 2em;
background-color: cornsilk;
border-radius: 0.5em;
margin-bottom: 5em;
}
.frame_waku_white {
border: 0.1em solid #050505;
background-color: white;
border-radius: 0.5em;
margin-left: 1em;
margin-right: 1em;
padding: 2em;
line-height: 2em;
}
.frame_text {
position: relative;
padding: 15px;
border-radius: 5px;
border: 2px solid #333;
color: #333;
font-size: 24px;
text-align: center;
margin-bottom: 1em;
line-height: 2em;
word-wrap: break-word;
}
.frame_text:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 3px;
width: 20px;
background-color: #fff;
content: "";
}
.frame_text:after {
position: absolute;
top: 95%;
left: 50%;
transform: translateX(-50%);
height: 20px;
width: 2px;
background-color: #333;
content: "";
}
h4 {
position: relative;
display: inline-block;
text-align: center;
padding: 1em;
font-size: 25px;
font-weight: 300;
margin: 0 0 1em;
}
h4::before, h4::after {
position: absolute;
content: '';
height: 50px;
border-left: #000000 solid 2px;
}
h4::before {
left: 0;
transform: rotate(-30deg);
}
h4::after {
right: 0;
transform: rotate(30deg);
}
.frame_elem {
background-color: lightskyblue; /* 背景色指定 */
border-radius: 5px; /* 角丸指定 */
/*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.45);*/
height: 4em;
break-inside: avoid;
margin-bottom: 2em;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
margin-right: 10px;
margin-left: 10px;
border: black 1px solid;
}
@media screen and (max-width: 480px) {
.frame_waku_white {
line-height: 2em;
padding-top: 2em;
padding-left: 1em;
padding-right: 1em;
}
.frame_waku {
border: 0.1em solid #050505;
padding: 1em;
}
#frame {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5em;
}
}
/*----------------frame------------------*/
/*----------------chat------------------*/
/*============
.toggle_btn
=============*/
.chat_btn {
display: block;
position: fixed;
bottom: 30px;
right: 30px;
padding: 10px; /* タップエリアを追加 */
transition: all .5s;
cursor: pointer;
z-index: 5;
pointer-events: none;
}
.chat_btn img {
position: relative;
z-index: -1; /* 画像が後ろにくる */
width: 3em;
pointer-events: auto;
}
.chat_btn span {
display: block;
position: absolute;
left: 0;
width: 30px;
height: 2px;
background-color: #333;
border-radius: 4px;
transition: all .5s;
}
.chat_btn span:nth-child(1) {
top: 4px;
pointer-events: none;
}
.chat_btn span:nth-child(2) {
top: 14px;
pointer-events: none;
}
.chat_btn span:nth-child(3) {
bottom: 4px;
pointer-events: none;
}
.open .chat_btn span {
background-color: #fff;
}
.open .chat_btn span:nth-child(1) {
-webkit-transform: translateY(10px) rotate(-315deg);
transform: translateY(10px) rotate(-315deg);
}
.open .chat_btn span:nth-child(2) {
opacity: 0;
}
.open .chat_btn span:nth-child(3) {
-webkit-transform: translateY(-10px) rotate(315deg);
transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#chat_mask {
display: none;
transition: all .5s;
}
.open #chat_mask {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .8;
z-index: 3;
cursor: pointer;
}
/*============
nav
=============*/
#chat_nav {
display: block;
position: fixed;
top: 10%;
right: -50%;
bottom: 0;
width: 50%;
background: #f7f3ee;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s;
z-index: 3;
opacity: 0;
}
.open #chat_nav {
right: 5%;
bottom: 5%;
opacity: 1;
z-index: 4;
border-radius: 10px
}
#chat_nav .inner {
padding: 25px;
}
#chat_nav .inner ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid;
text-align: center;
}
#chat_nav .inner ul li {
position: relative;
flex: 43%; /* 25% 幅の列として設定（例えば、4列の場合） */
margin: 0; /* 列と列の間隔を設定 */
}
#chat_nav .inner ul li img {
width: 50px;
}
#chat_nav .inner ul li p {
font-size: 14px;
}
#chat_nav .inner ul li a {
display: block;
color: #333;
font-size: 14px;
padding: 1em;
text-decoration: none;
transition-duration: 0.2s;
}
#chat_nav .inner ul li a:hover {
background: #e4e4e4;
}
#chat_nav {
padding: 1em;
background: #ffe89d;
border-radius: 10px;
}
.user_chat_waku {
border: 0.1em solid #050505;
padding-left: 1em;
padding-right: 1em;
background-color: cornsilk;
border-radius: 0.5em;
height: 65%;
overflow-y: auto; /* 縦スクロールを有効にする */
justify-content: flex-end;
display: flex;
flex-direction: column;
}
.user_chat_input {
margin-top: auto;
margin-bottom: 0; /* もし他の要素との間にスペースが不要なら0に設定 */
}
#user_chat_textarea {
height: 150px;
}
.user_chat_box {
margin-bottom: 100px;
margin-top: 50px;
}
.user_chat_box_text {
width: 80%;
background-color: white;
border-radius: 5px;
border: solid 1px black;
padding: 1em;
margin-bottom: 2em;
}
.user_chat_dt {
text-align: end;
font-size: 10px;
}
.user_chat_text {
white-space: pre-wrap;
}
.user_chat_icon {
text-align: end;
height: 1em;
margin-bottom: 5px;
}
.user_chat_name {
font-size: 10px;
}
.cp_iptxt.chat {
overflow-y: auto;
}
@media screen and (max-width: 767px) {
#chat_nav {
right: -80%;
width: 80%;
top: 5%;
}
#chat_nav .inner ul li p {
font-size: 13px;
}
#chat_nav .inner ul li img {
width: 40px;
}
#chat_nav {
padding: 1em;
background: #ffe89d;
border-radius: 10px;
}
.chat_waku {
border: 0.1em solid #050505;
padding: 1em;
}
.textarea_wrapper {
position: relative;
}
.chat_reset_btn {
position: absolute;
top: 40px;
right: 10px;
background-color: transparent;
border: none;
font-size: 16px;
cursor: pointer;
z-index: 10;
}
}
/*----------------chat------------------*/
/*----------------data_time------------------*/
.date_text {
text-align: end;
font-size: 12px; /* 文字サイズを調整 */
}
/*----------------data_time------------------*/
/*!*----------------リスト------------------*!*/
/* 行の高さを変更する */
.list_data thead td {
padding-top: 1px;
padding-bottom: 1px;
}
.list_data tbody td {
padding-top: 1px;
padding-bottom: 1px;
}
/* 行の色を変更する */
.list_data thead tr {
background-color: skyblue;
}
.list_data tbody tr.odd {
background-color: cornsilk;
}
.list_data tbody tr.even {
background-color: wheat;
}
/* 罫線を引く */
.list_data thead td:first-child {
border-left: 1px solid #404040;
}
.list_data thead td {
border-top: 1px solid #404040;
border-right: 1px solid #404040;
}
.list_data tbody td:first-child {
border-left: 1px solid #404040;
padding-top: 1em;
padding-bottom: 1em;
}
.list_data tbody td {
border-right: 1px solid #404040;
}
/*!*----------------リスト------------------*!*/
/*----------------本設計ページの詳細------------------*/
/*============
.toggle_btn
=============*/
.design_btn {
display: block;
position: fixed;
bottom: 30px;
right: 30px;
padding: 10px; /* タップエリアを追加 */
transition: all .5s;
cursor: pointer;
z-index: 5;
pointer-events: none;
}
.design_btn img {
position: relative;
z-index: -1; /* 画像が後ろにくる */
width: 3em;
pointer-events: auto;
}
.design_btn span {
display: block;
position: absolute;
left: 0;
width: 30px;
height: 2px;
background-color: #333;
border-radius: 4px;
transition: all .5s;
}
.design_btn span:nth-child(1) {
top: 4px;
pointer-events: none;
}
.design_btn span:nth-child(2) {
top: 14px;
pointer-events: none;
}
.design_btn span:nth-child(3) {
bottom: 4px;
pointer-events: none;
}
.open .design_btn span {
background-color: #fff;
}
.open .design_btn span:nth-child(1) {
-webkit-transform: translateY(10px) rotate(-315deg);
transform: translateY(10px) rotate(-315deg);
}
.open .design_btn span:nth-child(2) {
opacity: 0;
}
.open .design_btn span:nth-child(3) {
-webkit-transform: translateY(-10px) rotate(315deg);
transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#design_mask {
display: none;
transition: all .5s;
}
.open #design_mask {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .8;
z-index: 3;
cursor: pointer;
}
/*============
nav
=============*/
#design_nav {
display: block;
position: fixed;
top: 10%;
right: -50%;
bottom: 0;
width: 50%;
background: #f7f3ee;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s;
z-index: 3;
opacity: 0;
}
.open #design_nav {
right: 5%;
bottom: 5%;
opacity: 1;
z-index: 4;
border-radius: 10px
}
#design_nav .inner {
padding: 25px;
}
#design_nav .inner ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid;
text-align: center;
}
#design_nav .inner ul li {
position: relative;
flex: 43%; /* 25% 幅の列として設定（例えば、4列の場合） */
margin: 0; /* 列と列の間隔を設定 */
}
#design_nav .inner ul li img {
width: 50px;
}
#design_nav .inner ul li p {
font-size: 14px;
}
#design_nav .inner ul li a {
display: block;
color: #333;
font-size: 14px;
padding: 1em;
text-decoration: none;
transition-duration: 0.2s;
}
#design_nav .inner ul li a:hover {
background: #e4e4e4;
}
#design_nav {
padding: 1em;
background: #ffe89d;
border-radius: 10px;
}
.user_design_waku {
border: 0.1em solid #050505;
padding-left: 1em;
padding-right: 1em;
background-color: cornsilk;
border-radius: 0.5em;
height: 65%;
overflow-y: auto; /* 縦スクロールを有効にする */
justify-content: flex-end;
display: flex;
flex-direction: column;
}
.user_design_input {
margin-top: auto;
margin-bottom: 0; /* もし他の要素との間にスペースが不要なら0に設定 */
}
#user_design_textarea {
height: 150px;
}
.user_design_box {
margin-bottom: 100px;
margin-top: 50px;
}
.user_design_box_text {
width: 80%;
background-color: white;
border-radius: 5px;
border: solid 1px black;
padding: 1em;
margin-bottom: 2em;
}
.user_design_dt {
text-align: end;
font-size: 10px;
}
.user_design_text {
white-space: pre-wrap;
}
.user_design_icon {
text-align: end;
height: 1em;
margin-bottom: 5px;
}
.user_design_name {
font-size: 10px;
}
.cp_iptxt.design {
overflow-y: auto;
}
@media screen and (max-width: 767px) {
#design_nav {
right: -80%;
width: 80%;
top: 5%;
}
#design_nav .inner ul li p {
font-size: 13px;
}
#design_nav .inner ul li img {
width: 40px;
}
#design_nav {
padding: 1em;
background: #ffe89d;
border-radius: 10px;
}
.design_waku {
border: 0.1em solid #050505;
padding: 1em;
}
.textarea_wrapper {
position: relative;
}
.design_reset_btn {
position: absolute;
top: 40px;
right: 10px;
background-color: transparent;
border: none;
font-size: 16px;
cursor: pointer;
z-index: 10;
}
}
/*----------------design------------------*/
/*----------------チェックボックス------------------*/
ul.ks-cboxtags {
list-style: none;
padding: 20px;
}
ul.ks-cboxtags li {
display: inline;
}
ul.ks-cboxtags li label {
display: inline-block;
background-color: rgba(255, 255, 255, .9);
border: 2px solid rgba(139, 139, 139, .3);
color: #adadad;
border-radius: 25px;
white-space: break-spaces;
width: 100%;
margin: 3px 0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: all .2s;
}
ul.ks-cboxtags li label {
padding: 8px 12px;
cursor: pointer;
}
ul.ks-cboxtags li label::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 12px;
padding: 2px 6px 2px 2px;
content: "\f067";
transition: transform .3s ease-in-out;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
content: "\f00c";
transform: rotate(-360deg);
transition: transform .3s ease-in-out;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label {
border: 2px solid #1bdbf8;
background-color: #12bbd4;
color: #fff;
transition: all .2s;
}
ul.ks-cboxtags li input[type="checkbox"] {
display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
position: absolute;
opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {
border: 2px solid #e9a1ff;
}
ul.ks-cboxtags li input[type="radio"]:checked + label::before {
content: "\f00c";
transform: rotate(-360deg);
transition: transform .3s ease-in-out;
}
ul.ks-cboxtags li input[type="radio"]:checked + label {
border: 2px solid #1bdbf8;
background-color: #12bbd4;
color: #fff;
transition: all .2s;
}
ul.ks-cboxtags li input[type="radio"] {
position: absolute;
opacity: 0;
}
ul.ks-cboxtags li input[type="radio"]:focus + label {
border: 2px solid #e9a1ff;
}
/*----------------チェックボックス------------------*/
/*----------------カードデザイン------------------*/
.creditcard {
max-width: 300px;
min-height: 185px;
color: #000;
background: linear-gradient(145deg, #fff233, #d9cb00, #b19e00, #d9c100, #fff233, #d9c100, #b19500, #d9b700, #fff233);
border: outset 1px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 5px -3px rgba(0, 0, 0, 0.8),
inset 1px 1px 1px rgba(255, 255, 255, 0.8);
text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 15px;
aspect-ratio: 1.618/1;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
font-family: "Courier New", monospace, sans-serif;
position: relative;
font-size: 16px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-left: auto;
margin-right: auto;
}
.logo {
font-size: 1.8em;
font-weight: bold;
text-align: left;
margin-bottom: 35px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2),
-2px -2px 1px rgba(255, 255, 255, 0.4);
color: #220;
}
.card-number {
font-size: 1.3em;
margin-bottom: 15px;
text-align: right;
font-weight: bold;
font-family: "Consolas", "Roboto Mono", "Menlo", "Courier New", monospace;
letter-spacing: 1px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3),
-1px -1px 1px rgba(255, 255, 255, 0.5);
color: #220;
}
.expiry-date,
.card-holder {
font-size: 0.9em;
display: block;
margin-bottom: 5px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3),
-1px -1px 1px rgba(255, 255, 255, 0.5);
color: #220;
}
.card-holder {
text-transform: uppercase;
}
.cvv {
font-size: 0.9em;
opacity: 0.8;
position: absolute;
bottom: 10px;
right: 70px;
background: linear-gradient(45deg, #ffd700, #ffcc00, #ffdb58, #b88a00); /* セミコロン追加 */
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7), /* コンマ追加 */ -1px -1px 4px rgba(255, 255, 255, 0.4), /* コンマ追加 */ 0 0 25px rgba(255, 255, 255, 0.4); /* コンマ追加 */
}
.chip {
position: absolute;
top: 45px;
left: 15px;
width: 40px;
height: 30px;
background: linear-gradient(135deg, #bbb, #ddd);
border-radius: 5px;
}
.chip::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.05) 50%),
linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.05) 50%);
background-size: 4px 4px;
opacity: 0.5;
}
.hologram {
position: absolute;
bottom: 10px;
right: 15px;
width: 50px;
height: 30px;
background: linear-gradient(45deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f);
opacity: 0.3;
border-radius: 5px;
}
.creditcard:hover {
transform: rotateY(5deg) rotateX(20deg);
box-shadow: 5px 8px 8px -3px rgba(0, 0, 0, 0.2),
inset 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.creditcard::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 50%,
rgba(0, 0, 0, 0.1) 100%
);
opacity: 0;
transition: opacity 0.3s ease, background 0.3s ease;
}
.creditcard:hover::after {
opacity: 1;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0) 50%,
rgba(0, 0, 0, 0.1) 100%
);
}
/*----------------カードデザイン------------------*/
/*----------------テーブル------------------*/
table {
margin: 20px auto;
}
.tbl-r02 th {
background: #e9727e;
border: solid 1px #ccc;
color: #fff;
padding: 10px;
}
.tbl-r02 td {
border: solid 1px #ccc;
padding: 10px;
background-color: white;
}
@media screen and (max-width: 640px) {
.last td:last-child {
border-bottom: solid 1px #ccc;
width: 100%;
}
.tbl-r02 {
width: 80%;
}
.tbl-r02 th,
.tbl-r02 td {
border-bottom: none;
display: block;
width: 100%;
}
}
/*----------------テーブル------------------*/
#rankingContainer {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
.summary-card {
background: white;
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease;
}
.summary-card:hover {
transform: translateY(-4px);
}
.summary-card h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: #3f51b5;
}
.summary-card p {
margin: 6px 0;
font-size: 0.95rem;
}
.generated-assets {
list-style: none;
padding-left: 0;
margin-top: 12px;
}
.generated-assets li {
background-color: #f6f8fa;
padding: 6px 12px;
border-radius: 6px;
margin-bottom: 6px;
font-size: 0.9rem;
transition: background 0.2s;
}
.generated-assets li:hover {
background-color: #e3eaf2;
}
.toggle-button {
margin-top: 12px;
background-color: #3f51b5;
color: white;
border: none;
padding: 8px 16px;
font-size: 0.85rem;
cursor: pointer;
border-radius: 6px;
transition: background-color 0.2s;
}
.toggle-button:hover {
background-color: #303f9f;
}
.card-actions {
position: relative;
margin-top: 10px;
text-align: right;
}
.action-toggle {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
.action-menu {
position: absolute;
right: 0;
top: 30px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
padding: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
gap: 6px;
z-index: 10;
}
.action-btn {
background-color: #007bff;
color: white;
border: none;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
}
.hidden {
display: none;
}
.flow-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
margin: 10px 0;
background: #f9f9f9;
width: fit-content;
}
/*----------------資産カード------------------*/
.asset-section {
margin-bottom: 30px;
}
.asset-section-title {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 10px;
text-align: left;
padding: 6px 12px;
border-radius: 4px;
}
.asset-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
/* 遊戯王カード風スタイル */
.yugioh-card {
display: flex;
flex-direction: column;
height: 350px;
width: 250px;
background: burlywood;
border: 4px ridge #d4af37;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
font-family: 'Cinzel Decorative', serif;
overflow: hidden;
transition: transform 0.3s ease;
}
.yugioh-card:hover {
transform: scale(1.05);
}
.card-title {
font-size: 1.1rem;
padding: 6px;
font-weight: bold;
border-bottom: 2px solid #440000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
color: #fff;
/* 🟡 エンボス風スタイル */
/*text-shadow: 1px 1px 0 #000, !* 下影 *! -1px -1px 0 #fff, !* 上光 *! 2px 2px 4px rgba(0, 0, 0, 0.4); !* ふんわりとした立体感 *!*/
text-shadow: 5px 2px 4px rgba(0, 0, 0, 0.6), /* 上光 */ 2px 2px 4px rgba(0, 0, 0, 0.4); /* ふんわりとした立体感 */
}
/* ✅ 使用中 → 青グラデ */
.card-title.linked {
background: linear-gradient(140deg, #001f33, #003366, #004080, #0059b3, #0066cc, #0059b3, #004080, #003366, #001f33);
}
/* ✅ 未使用 → 赤グラデ */
.card-title.unlinked {
background: linear-gradient(140deg, #5c0f0f, #6a1414, #7c1a1a, #9a2727, #b32f2f, #9a2727, #7c1a1a, #6a1414, #5c0f0f);
}
/* 中のテキストにellipsisを適用する */
.card-name {
display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.card-name {
display: block;
text-align: center;
padding: 4px 8px;
font-weight: bold;
color: #fff;
border-radius: 4px;
font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 5px 2px 4px rgba(0, 0, 0, 0.6), /* 上光 */ 2px 2px 4px rgba(0, 0, 0, 0.4); /* ふんわりとした立体感 */
}
/* 使用中（linked）→ 青系 */
.card-name.linked {
background: linear-gradient(140deg, #001f33, #003366, #004080, #0059b3, #0066cc, #0059b3, #004080, #003366, #001f33);
}
/* 未使用（unlinked）→ 赤系 */
.card-name.unlinked {
background: linear-gradient(140deg, #5c0f0f, #6a1414, #7c1a1a, #9a2727, #b32f2f, #9a2727, #7c1a1a, #6a1414, #5c0f0f);
}
.card-stars-top {
position: absolute;
top: 4px;
right: 8px;
font-size: 1.1rem;
background-image: linear-gradient(45deg, #ffd700, #ffcc00, #ffdb58, #b88a00);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7),
-1px -1px 4px rgba(255, 255, 255, 0.4),
0 0 25px rgba(255, 255, 255, 0.4);
}
.card-image-area {
flex: 0 0 150px;
background-size: cover;
background-position: center;
border: 2px solid rgba(255, 215, 0, 0.8); /* 金の縁取り */
border-radius: 6px;
box-shadow: 0 0 6px rgba(255, 215, 0, 0.4), /* 外側に金色の光彩 */ inset 0 0 8px rgba(0, 0, 0, 0.2); /* 内側に暗い陰影で深み */
position: relative;
overflow: hidden;
margin-left: 1em;
margin-right: 1em;
}
.card_border {
position: relative;
border: 3px ridge #d4af37;
border-radius: 6px;
padding: 6px;
background: linear-gradient(#fdf5e6, #f9f3e7);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.1);
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin: 4px;
background: dimgrey;
}
.asset-icon {
font-size: 3rem;
}
.card-description {
flex: 1; /* ← 残りのスペースを全部取る */
position: relative;
font-size: 0.85rem;
background: #fffdf5;
color: #333;
overflow: hidden;
border-top: 1px solid #ccc;
font-family: 'Georgia', serif;
cursor: help;
display: flex;
align-items: flex-start; /* 中のテキストは上詰め */
margin: 5px;
}
.card-description-text {
display: block;
height: 100%;
padding: 8px;
border: 2px solid #6b4f1d; /* 濃い金縁（焦げ茶寄り） */
border-radius: 6px;
background: linear-gradient(#fffdf5, #f9f3e7); /* 紙風背景 */
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.1);
font-size: 0.85rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
position: relative;
cursor: help;
line-height: 1.4;
width: 100%;
}
/* 内側にテキストを持たせ、そこにafter適用 */
.card-description-text:hover::after {
content: attr(data-fulltext);
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 6px;
background: #333;
color: #fff;
padding: 6px 10px;
white-space: pre-wrap;
max-width: 240px;
border-radius: 6px;
font-size: 0.8rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
z-index: 999999; /* 強めに */
display: block; /* ⭐️追加 */
}
.card-stars {
text-align: left;
padding: 4px 8px;
font-size: 1.2rem;
background: #f4e2d8;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(45deg, #ffd700, #ffcc00, #ffdb58, #b88a00);
text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7),
-1px -1px 4px rgba(255, 255, 255, 0.4),
0 0 25px rgba(255, 255, 255, 0.4);
}
.card-stars-under {
text-align: right;
padding-right: 10px;
font-size: 1.2rem;
background-image: linear-gradient(45deg, #ffd700, #ffcc00, #ffdb58, #b88a00);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* ⭐️ シンプルに */
white-space: nowrap;
}
.inner-frame {
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
border: 3px ridge #d4af37;
border-radius: 6px;
padding: 4px;
box-sizing: border-box;
background: #fdf8e4;
display: flex;
flex-direction: column;
}
.tooltip {
position: fixed;
background: #222;
color: #fff;
padding: 4px 8px;
font-size: 0.85rem;
border-radius: 4px;
pointer-events: none;
z-index: 10005;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#custom-tooltip.tooltip {
max-width: 240px;
background: #222;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
font-size: 0.85rem;
pointer-events: none;
white-space: normal; /* ← ここ重要！折返しOKに */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
z-index: 10000;
line-height: 1.4;
}