@font-face {
font-family: "ShinGoPro-Heav";
src: url("fonts/A-OTF-ShinGoPro-Heavy.eot?") format('eot'), url("fonts/A-OTF-ShinGoPro-Heavy.woff") format('woff'), url("fonts/A-OTF-ShinGoPro-Heavy_0.otf") format('opentype');
}
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
a {
color: #00e;
}
a:visited {
color: #551a8b;
}
a:hover {
color: #06e;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
a,
fieldset,
img,
ol,
ul,
table,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var,
span {
padding: 0;
margin: 0;
list-style: none;
font-style: normal;
background: none;
font-weight: normal;
text-decoration: none;
border: 0;
border-spacing: 0;
font-family: 'Hiragino Kaku Gothic Pro', 'ﾃδ｣ﾃ�凖｢竄ｬ邃｢ﾃδ｣ﾃ�凖つｩﾃδ｣ﾃ｢竄ｬﾅ｡ﾃつｮﾃδ｣ﾃ�凖�ｽﾃδｨﾃつｧﾃ｢竄ｬ邃｢ﾃδ｣ﾃ｢竄ｬﾅ｡ﾃつｴ Pro W3', 'Meiryo', 'ﾃδ｣ﾃ�凖つ｡ﾃδ｣ﾃ｢竄ｬﾅ｡ﾃつ､ﾃδ｣ﾃ�凖つｪﾃδ｣ﾃ｢竄ｬﾅ｡ﾃつｪ', 'ﾃδｯﾃつｼﾃつｭﾃδｯﾃつｼﾃつｳ ﾃδｯﾃつｼﾃつｰﾃδ｣ﾃ｢竄ｬﾅ｡ﾃつｴﾃδ｣ﾃ｢竄ｬﾅ｡ﾃつｷﾃδ｣ﾃ�凖�凖δ｣ﾃ｢竄ｬﾅ｡ﾃつｯ', 'ﾃδｯﾃつｼﾃつｭﾃδｯﾃつｼﾃつｳ ﾃδ｣ﾃ｢竄ｬﾅ｡ﾃつｴﾃδ｣ﾃ｢竄ｬﾅ｡ﾃつｷﾃδ｣ﾃ�凖�凖δ｣ﾃ｢竄ｬﾅ｡ﾃつｯ', Osaka, Osaka-ﾃδｧﾃつｭﾃ｢竄ｬﾂｰﾃδ･ﾃつｹﾃ｢竄ｬﾂｦ, sans-serif;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
#main {
background: #fff;
box-sizing: border-box;
padding: 5%;
}
#main h2 {
margin: 5% 0;
font-size: 150%;
text-align: center;
}
#main h2 img {
max-width: 100%;
}
#main .top_txt {
text-align: center;
}
#main .red {
color: red;
font-weight: bold;
}
#main .blue {
color: blue;
text-decoration: underline;
/*font-weight: bold;*/
}
#main .l {
font-size: 120%;
}
#main .lll {
font-size: 135%;
font-family: "ShinGoPro-Heav";
}
.thanks {
text-align: center;
margin: 20px 0 0 0;
color: red;
}
.thanks p {
margin: 10px 0 0 0;
}
.thanks .backtop {
background-color: #ad7000;
border-radius: 20px;
padding: 10px;
}
.thanks .backtop a {
padding: 10px;
color: #ffffff;
text-decoration: none;
}
.hisho_wrp {
display: table;
margin: 1em 0;
}
.hisho_wrp p {
vertical-align: top;
display: table-cell;
}
.hisho_wrp .hisho {
vertical-align: b
}
.hisho_wrp .hisho img {
max-width: 100%;
}
.chousa_form {
margin: 10% 0;
}
.person {
/* margin: 10% 0;*/
background: #ddd;
border-radius: 4px;
padding: 5%;
}
.quest dl {
/*display: table;*/
width: 90%;
margin: 3% auto;
}
.quest dl dt:first-letter {
/*font-size: 135%;*/
}
.quest dl dt {
/*display: table-cell;*/
vertical-align: middle;
text-align: center;
margin: 1em 0;
}
.quest dl dt em {
display: inline-block;
background: #ad7000;
font-family: "ShinGoPro-Heav";
color: #fff;
}
.quest dl dd {
/*display: table-cell;*/
margin: 1em 0;
padding-left: 15px;
font-family: "ShinGoPro-Heav";
vertical-align: middle;
text-align: center;
font-size: 135%;
}
.question {
width: 90%;
margin: 5% 5%;
display: table;
table-layout: fixed;
}
.question p {
text-align: center;
display: block;
margin: 3% 0;
}
.question input[type=radio] {
display: none;
}
.question input[type=radio] + label {
position: relative;
height: 100%;
margin: 0;
box-sizing: border-box;
display: block;
height: 100%;
/*height: 100vh; */
padding: 2% 5% 2% 7%;
width: 100%;
/*display: block;*/
text-align: center;
border-radius: 5px;
font-family: "ShinGoPro-Heav";
color: #fff;
cursor: pointer;
box-shadow: rgba(80, 80, 80, 0.4) 0 2px 2px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
background: #bdaf9c;
background-image: linear-gradient(#bdaf9c, rgba(200, 200, 200, 0.2), rgba(0, 0, 0, 0.2));
}
.question input[type=radio] + label:after {
position: absolute;
width: 6px;
height: 6px;
content: "";
display: block;
margin: auto;
top: 0;
bottom: 0;
left: 3%;
background: #fff;
border-radius: 3px;
box-shadow: rgba(80, 80, 80, 0.4) 0 2px 2px;
}
.question input[type=radio] + label em {}
.caption {
color: #ff0202;
font-weight: bold;
}
.question input[type=radio]:checked {
/*display: block;*/
}
.question input[type=radio]:checked + label {
background: #dd5442;
background-image: linear-gradient(#dd5442, rgba(200, 200, 200, 0.2), rgba(0, 0, 0, 0.2));
}
.question p.left{
text-align: left;
}
.question p.error::before,
.question textarea.error::before,
.radioname input.error::before,
.sex dd.error::before,
.number input[type=text].error::before,
.radioname select.error::before,
.message textarea.error::before
{
display: inline-block;
content: "縺吶∋縺ｦ縺ｮ雉ｪ蝠上→鬆�岼縺ｯ蠢��磯��岼縺ｧ縺吶ょ�蜉帙♀鬘倥＞縺励∪縺吶�";
color: #af191a;
}
.question p.error,
.question textarea.error,
.radioname input.error,
.sex dd.error,
.number input[type=text].error,
.radioname select.error,
.message textarea.error{
padding: 12px;
font-weight: 850;
color: #262626;
background: #FFEBE8;
border: 2px solid #990000;
}
.apply_btn {
text-align: center;
padding: 0 0 5% 0;
background: #ddd;
}
.apply_btn input {
padding: 1.5% 3%;
display: inline-block;
border-radius: 5px;
font-family: "ShinGoPro-Heav";
color: #fff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
cursor: default;
background: #bdaf9c;
background-image: linear-gradient(#bdaf9c, rgba(200, 200, 200, 0.2), rgba(0, 0, 0, 0.2));
}
.apply_btn input.enable {
cursor: pointer;
box-shadow: rgba(80, 80, 80, 0.4) 0 2px 2px;
background: #dd5442;
background-image: linear-gradient(#dd5442, rgba(200, 200, 200, 0.2), rgba(0, 0, 0, 0.2));
}
.message dl {
margin: 3%;
}
.message textarea {
width: 100%;
height: 300px;
background: #fff;
border: 1px solid #ccc;
}
.radioname input {
background: #fff;
border: 1px solid #ccc;
width: 100%;
height: 35px;
}
.question textarea {
background: #fff;
border: 1px solid #ccc;
width: 100%;
}
.number input[type=text] {
background: #fff;
border: 1px solid #ccc;
width: 20%;
height: 35px;
}
.sex input[type=radio] + label {
margin-right: 5%
}
/*
.question input[type=radio] + label:hover{
opacity: 0.7;
}*/
.cation {
background: #f4f2eb;
padding: 5%;
}
.cation h3 {
font-size: 110%;
font-weight: bold;
margin: 2% 0;
}
.cation ul li {
margin: 1% 0;
}
.person dl {
margin: 3%;
}
.mess_wrp {
margin: 5% 0;
display: table;
width: 100%;
table-layout: fixed
}
.mess_wrp .mess_col {
display: table-cell;
padding: 1%;
}
.mess_wrp .mess_col .ttl {
font-weight: bold;
text-align: center;
padding: 2% 0;
border-bottom: 1px solid #000;
}
.mess_wrp .mess_col ul li {
/*font-size: 85%;*/
margin: 1% 0;
}
.mess_wrp .mess_col ul li p {
font-size: 75%;
text-align: left;
}
.mess_wrp .mess_col ul li dl {
text-align: right;
}
.mess_wrp .mess_col ul li dl .name {
font-size: 65%;
text-align: right;
line-height: 0.7em;
}
.mess_wrp .mess_col ul li dl dd {
font-size: 65%;
text-align: right;
display: inline;
line-height: 0.7em;
}
.archive {
color: #fff;
}
.archive .ttl {
background: #888;
text-align: center;
font-weight: bold;
font-size: 40px;
border-bottom: 1px solid #ddd;
padding: 1% 0;
}
.archive ul li a {
background: #888;
display: block;
text-decoration: none;
color: inherit;
padding: 2% 1%;
border-bottom: 1px solid #ddd;
background-image: linear-gradient(#888, rgba(200, 200, 200, 0.2), rgba(0, 0, 0, 0.2));
}
.archive ul li a:hover {
opacity: 0.7;
}
.archive ul li a dl {
display: table;
width: 100%;
}
.archive ul li a dl dt,
.archive ul li a dl dd {
display: table-cell;
}
.archive ul li a dl dt {
width: 15%;
vertical-align: middle;
text-align: center;
}
.archive ul li a dl dd {
text-align: left;
vertical-align: top;
padding: 1.5%;
}
#chart_div em {
display: block;
box-sizing: border-box;
width: 100%;
text-align: center;
vertical-align: middle;
}
.result_input {
display: table;
width: 80%;
margin: 5% 10%;
}
.result_input em {
display: table-cell;
text-align: left;
}
.result_input em.label {
text-align: right;
padding: 0 1%;
}
.result_input em select option {
text-align: center;
}
#chart_div em img {
box-sizing: border-box;
display: inline-block;
}
.check_btn {
text-align: center;
margin-bottom: 10%;
}
/* ==========================================================================
Helper classes
========================================================================== */
/* Prevent callout */
.nocallout {
-webkit-touch-callout: none;
}
.pressed {
background-color: rgba(0, 0, 0, 0.7);
}
/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] {
-webkit-appearance: none;
}
/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
they have been set as display: none */
.gifhidden {
position: absolute;
left: -100%;
}
/*
* Image replacement
*/
.ir {
background-color: transparent;
background-repeat: no-repeat;
border: 0;
direction: ltr;
display: block;
overflow: hidden;
text-align: left;
text-indent: -999em;
}
.ir br {
display: none;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/**
* Clearfix helper
* Used to contain floats: h5bp.com/q
*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.charts {
position: relative;
}
.charts li {
z-index: 1;
position: absolute;
opacity: 0;
left: 0;
top: 0;
width: 100%;
transition: all 0.5s linear 0.1s;
}
.charts li.on {
z-index: 100;
opacity: 1;
}
.charts li em,
.charts li span {
box-sizing: border-box;
width: 100%;
text-align: center;
/*padding: 10% 0;*/
display: block;
margin: 0.auto
}
.chart_form {
margin: 5% 0 8%;
}
.chart_form ul li input[type=radio] {
display: none;
}
.chart_form ul li input[type=radio] + label {
position: relative;
margin: 0;
box-sizing: border-box;
display: block;
/*height: 100%;*/
/*height: 100vh; */
/* height: 50px;
padding:2% 5% 2% 7%;*/
width: 100%;
/*display: block;*/
width: 100%;
text-align: center;
border-radius: 5px;
font-family: "ShinGoPro-Heav";
color: #fff;
cursor: pointer;
box-shadow: rgba(80, 80, 80, 0.4) 0 2px 2px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
background: #bdaf9c;
background-image: linear-gradient(#bdaf9c, rgba(200, 200, 200, 0.2), rgba(0, 0, 0, 0.2));
}
.chart_form ul li input[type=radio] + label:after {
position: absolute;
width: 6px;
height: 6px;
content: "";
display: block;
margin: auto;
top: 0;
bottom: 0;
left: 10px;
background: #fff;
border-radius: 3px;
box-shadow: rgba(80, 80, 80, 0.4) 0 2px 2px;
}
.chart_form ul li input[type=radio]:checked + label {
background: #dd5442;
background-image: linear-gradient(#dd5442, rgba(200, 200, 200, 0.2), rgba(0, 0, 0, 0.2));
}
.chart_form .sex_inp {
display: table;
width: 88%;
margin: 0 auto 5%;
/*padding: 0 5%;*/
/*border-bottom: 1px #ccc dotted;*/
}
.chart_form .sex_inp {
margin: 0 auto;
}
.chart_form .sex_inp li {
display: table-cell;
padding: 0 1%;
height: 100%;
}
.chart_form .age_inp {
/*padding-top: 3%;*/
margin: 3% auto 3%;
width: 86.5%;
border-top: 1px #ccc dotted;
}
.chart_form .age_inp li {
margin: 3% 0;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 800px) {
/* Style adjustments for viewports that meet the condition */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/* Style adjustments for viewports that meet the condition */
}