円バルーン/div>--*/
.enballoon-right {
position: relative;
display: inline-block;
margin: 1.5em 15px 1.5em 0;
padding: 0 5px;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #FFF;
font-size: 20px;
font-weight: bold;
background: #ff8e9d;
border-radius: 50%;
box-sizing: border-box;
}
.enballoon-right:before {
content: "";
position: absolute;
top: 50%;
right: -25px;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #ff8e9d;
z-index: 0;
}
.enballoon-right p {
margin: 0;
padding: 0;
}
/*--
吹き出し左
--*/
.balloon-right {
position: relative;
display: inline-block;
margin: 0.8em 15px 0.8em 0;
padding: 14px 10px;
min-width: 80px;
max-width: 100%;
text-align: center;
color: #fff;
font-size: 16px;
background: #726250;
}
.balloon-right:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -10px;
border: 10px solid transparent;
border-left: 10px solid #726250;
}
.balloon-right p {
margin: 0;
padding: 0;
}
hr.redline {
clear: both;
border-bottom: 0;
border-top: 5px solid #dc143c;
border-right: 0;
border-left: 0;
margin: 1.2em 0 2em;
min-height: 0px;
height: 1px;
}
/*--
Welcome to My Blog!
サルワカへようこそ！
--*/
.ribbon-wrap {
display: block;
position: relative;
margin: 0 auto;
padding: 10px 0;
width: 300px;
background: #f1f1f1;
}
.ribbon11 {
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 8px 32px;
margin: 0 0 0 -20px;
width: calc(100% + 20px);
font-size: 18px;
color: white;
background: #4169e1;
}
.ribbon11:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px #191970;
}
/* ---- Max Image Size ---- */
.row img {
max-width: 100%;
height: auto;
}
/* ---- Block 1/2 3/1 4/1 ---- */
ul.block2, ul.block3, ul.block4, ul.block5, .block2 li, .block3 li, .block4 li, .block5 li {
margin: 0;
padding: 0;
}
.block2 li {
width: 48%;
margin-right: 4%;
display: inline-block; /* インラインブロック化 */
vertical-align: top;
}
.block2 li:nth-child(2n) {
margin-right: 0%;
}
.block3 li {
width: 31.1%;
margin-left: 1.1%;
margin-right: 1.1%;
display: inline-block; /* インラインブロック化 */
vertical-align: top;
}
.block3 li:nth-child(3n) {
margin-right: 0%;
}
.block4 li {
width: 23%;
margin-right: 1%;
display: inline-block; /* インラインブロック化 */
vertical-align: top;
}
.block4 li:nth-child(4n) {
margin-right: 0%;
}
.block5 li {
width: 19.5%;
margin: 1% 0;
display: inline-block; /* インラインブロック化 */
vertical-align: top;
text-align: left;
}
.block2 li, .block3 li, .block4 li, .block5 li {
margin-bottom: 0.5em;
}
.block2 li img, .block3 li img, .block4 li img, .block5 li img, .left3 img, .right7 img {
max-width: 100% !important;
margin: 0;
}
ul.block2:after, ul.block3:after, ul.block4:after, ul.block5:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
/* ---- Mobile switch ---- */
.show-mobile, .mobile-only {
display: none;
}
.show-pc, .pc-only, .hide-mobile, .mobile-off {
display: block;
}
.centered {
float: none;
margin: auto;
}
/* Mobile Setting under 640px
-------------------------------------------------------- */
@media all and (max-width: 640px) {
body {
font-size: 90%;
}
.container {
width: 100%;
}
.row {
width: 100%;
margin-bottom: 1em;
padding: 0 10px;
}
.block2 li, .block3 li, .block4 li, .block5 li {
display: block;
width: 100%;
margin: 0 !important;
padding: 1em 0 !important;
clear: both;
float: none;
}
.block2 li img, .block3 li img, .block4 li img, .block5 li img {
max-width: 100%;
}
/* Mobile switch */
.show-pc, .pc-only, .hide-mobile, .mobile-off {
display: none;
}
.show-mobile, .mobile-only {
display: block;
}
/* Heading */
h1 {
font-size: 0.9em;
}
h2 {
font-size: 1.12em;
}
h3 {
font-size: 1.12em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
h4 {
font-size: 1.12em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
h5 {
font-size: 1em;
margin-top: 0.3em;
margin-bottom: 0.3em;
}
h6 {
font-size: 0.9em;
}
p {
font-size: 0.9em;
margin-bottom: 0.8em;
}
/* Mobile switch */
.show-pc, .pc-only, .hide-mobile, .mobile-off {
display: none;
}
.show-mobile, .mobile-only {
display: block;
}
}
/* Display
-------------------------------------------------------- */
.hide, .hidden {
display: none;
}
.show {
display: block;
}
/*----------------------------------------
Clearfix: contain floats
----------------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/*----------------------------------------
Horizontal Rule
----------------------------------------*/
hr.line {
clear: both;
border-bottom: 0;
border-top: 1px solid #ccc;
border-right: 0;
border-left: 0;
margin: 14px 0;
min-height: 0px;
height: 1px;
}
hr.dott {
clear: both;
border-bottom: 0;
border-top: 1px dotted #ccc;
border-right: 0;
border-left: 0;
margin: 21px 0;
min-height: 0px;
height: 1px;
}
hr.clears {
clear: both;
border-bottom: 0;
border-top: 1px solid #fff;
filter: alpha(opacity=0); /*ie100*/
-moz-opacity: 0.0; /*fx1.0*/
opacity: 0.0; /*wk1.0*/
border-right: 0;
border-left: 0;
margin: 1px 0;
min-height: 0px;
height: 1px;
}
hr.spacer {
clear: both;
border-bottom: 0;
border-top: 0;
filter: alpha(opacity=0); /*ie100*/
-moz-opacity: 0.0; /*fx1.0*/
border-top: 1px solid #fff;
opacity: 0.0; /*wk1.0*/
border-right: 0;
border-left: 0;
margin: 24px 0;
min-height: 0px;
height: 1px;
}
div.spacer {
clear: both;
min-height: 0px;
height: 1em;
}
/*----------------------------------------
Text Align
----------------------------------------*/
.right, .t-right, .text-right {
text-align: right;
}
.left, .t-left, .text-left {
text-align: left;
}
.center, .t-center, .text-center {
text-align: center;
}
/*----------------------------------------
Float
----------------------------------------*/
img {
margin: 0;
padding: 0;
display: inline-block;
position: relative;
}
.alignleft {
float: left;
margin-right: 1.5em;
}
.alignright {
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
a img.alignright {
float: right;
margin: 0.313rem 0 1.25rem 1.25rem;
}
a img.alignnone {
margin: 0.313rem 1.25rem 1.25rem 0;
}
a img.alignleft {
float: left;
margin: 0.313rem 1.25rem 1.25rem 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
@media all and (max-width: 480px) {
img.img-left, img.alignleft, img.img-right, img.alignright {
float: none;
width: 80%;
margin: 0.5rem 10%;
border: none; /*clear: both;*/
}
}
/*---------------------------------
Table
-----------------------------------*/
table {
width: 100%;
margin: 0;
text-align: left;
border-collapse: collapse;
background: #fff;
}
thead, tbody {
margin: 0;
padding: 0;
}
table.line tbody {
border-bottom: 1px solid #dcdcdc;
}
table.line th, table.line td {
padding: 5px 10px;
font-size: 1em;
font-weight: normal;
border-top: 1px solid #dcdcdc;
text-align: left;
}
table.box {
width: 100%;
margin: 0;
text-align: left;
vertical-align: top;
box-sizing: border-box;
border-bottom: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
}
table.box thead, table.box tbody {
margin: 0;
padding: 0;
}
table.box th, table.box td {
padding: 5px 10px;
vertical-align: top;
font-size: 1em;
font-weight: normal;
border-top: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
text-align: left;
}
table.box th {
text-align: center;
font-weight: bold;
background: #f8f4e6;
}
table.box th.middle {
vertical-align: middle;
}
table.box td.center {
text-align: center;
vertical-align: middle;
}
table.center-box {
width: 100%;
margin: 0.5em auto;
text-align: left;
box-sizing: border-box;
border-bottom: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
}
table.center-box thead, table.center-box tbody {
margin: 0;
padding: 0;
}
table.center-box th, table.center-box td {
padding: 7px 4px 5px 4px;
line-height: 1.32;
font-size: 1em;
border-top: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
}
table.center-box th {
background: #f8f4e6;
}
table.center-box th {
white-space: nowrap;
}
table.w90 {
width: 90%;
margin: 0 auto;
}
table.w80 {
width: 82%;
margin: 0 auto;
}
@media all and (max-width: 640px) {
table.center-box th, table.center-box td {
font-size: 0.9em;
}
table.center-box {
width: 100%;
}
table.w90 {
width: 100%;
}
table.w80 {
width: 100%;
}
}
@media all and (max-width: 640px) {
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}
table.boder-x {
padding: 0;
margin: 0;
}
table.boder-x th, table.boder-x td {
padding: 2px 7px;
vertical-align: middle;
text-align: left;
border-bottom: none !important;
border-right: none !important;
}
table.boder-x th {
width: 100px;
height: 50px;
font-weight: bold;
background: none !important;
}
table.boder-x td {
font-size: 1em;
font-weight: normal;
}
/*-----------------------------------
Definition List
-----------------------------------*/
dl.style1, dl.style2, dl.style3, dl.style4, dl.style5, dl.left7 {
width: 100%;
margin: auto;
/*border-top: 1px solid #b1b1b1;*/
border-bottom: 1px solid #b1b1b1;
margin-bottom: 1em;
overflow: hidden;
}
dl.style3 {
margin-top: 1.2em;
margin-bottom: 0 !important;
}
dl.style1 dt, dl.style2 dt, dl.style3 dt, dl.style4 dt, dl.style5 dt {
margin: 0;
padding: 8px 5px;
/*min-height: 3em;
line-height: 1.72em;*/
overflow: hidden;
display: block;
font-weight: bold;
border-top: 1px solid #b1b1b1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
clear: left;
}
dl.style1 dd, dl.style2 dd, dl.style3 dd, dl.style4 dd, dl.style5 dd {
margin: 0;
padding: 8px 5px;
/*min-height: 3em;
line-height: 1.72em;*/
overflow: hidden;
display: block;
border-top: 1px solid #b1b1b1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
dl.style1 dt:first-child, dl.style2 dt:first-child, dl.style3 dt:first-child, dl.style4 dt:first-child, dl.style5 dt:first-child {
/*border-top: none;*/
}
dl.style1 dd:first-child, dl.style2 dd:first-child, dl.style3 dd:first-child, dl.style4 dd:first-child, dl.style5 dd:first-child {
border-top: none;
}
dl.style1 dt p, dl.style2 dt p, dl.style3 dt p, dl.style4 dt p, dl.style5 dt p {
margin: 0 0 0.1em 0;
}
dl.style1 dd p, dl.style2 dd p, dl.style3 dd p, dl.style4 dd p, dl.style5 p {
margin: 0 0 0.1em 0;
}
dl.style1 dt {
width: 12em;
}
dl.style1 dd {
margin-left: 12em;
}
dl.style2 dt {
width: 9em;
}
dl.style2 dd {
margin-left: 9em;
}
dl.style3 dt {
width: 5em;
}
dl.style3 dd {
margin-left: 5em;
}
dl.style4 dt {
width: 20%;
}
dl.style4 dd {
margin-left: 20%;
}
dl.style5 dt {
width: 50%;
}
dl.style5 dd {
margin: 0;
margin-left: 50%;
}
@media all and (max-width: 768px) {
dl.style1 dt, dl.style2 dt, dl.style3 dt, dl.style4 dt, dl.style5 dt {
margin: 7px 0px !important;
padding: 0 !important;
line-height: 1.5;
border: none;
width: 100% !important;
float: none !important;
font-weight: bold;
font-size: 1em;
}
dl.style1 dd, dl.style2 dd, dl.style3 dd, dl.style4 dd, dl.style5 dd {
margin-bottom: 16px !important;
margin-left: 1em;
padding: 0 !important;
border: none;
width: 100% !important;
float: none !important;
font-size: 0.9em;
}
dl.box {
border: none;
}
}
/* FAQ
-----------------------------------*/
dl.basic, dl.faq {
margin: 1em 0 2em 0;
}
dl.basic dt, dl.faq dt {
font-size: 1.08em;
font-weight: bold;
color: #1c305c;
margin-bottom: 0.5em;
position: relative;
counter-increment: titleNum;
padding-top: 12px;
padding-left: 3.5em;
}
dl.basic dt::before, dl.faq dt::before {
position: absolute;
top: 0;
left: 0;
content: "Q."counter(titleNum);
width: 44px; /*丸の大きさ（幅）*/
height: 44px; /*丸の大きさ（高さ）*/
line-height: 44px; /*高さと同じ数値*/
background-color: #c70067; /*丸の背景色*/
border-radius: 22px;
color: #ffffff !important;
font-size: 1em;
text-align: center;
}
dl.basic dd, dl.faq dd {
font-size: 1em;
margin-bottom: 1.2em;
margin-top: 1.3em;
min-height: 56px;
position: relative;
padding: 0 0.5em 0.8em 3.8em;
border-bottom: 1px solid#ccc;
}
dl.basic dd::before, dl.faq dd::before {
position: absolute;
top: 0;
left: 0;
content: "Ans";
width: 44px; /*丸の大きさ（幅）*/
height: 44px; /*丸の大きさ（高さ）*/
line-height: 44px; /*高さと同じ数値*/
background-color: #eeeeee; /*丸の背景色*/
border-radius: 22px;
color: #333333 !important;
font-size: 1em;
text-align: center;
}
/*----------------------------------------
Breadcrumbs
----------------------------------------*/
.breadcrumbs {
margin-bottom: 1.65em;
}
.breadcrumbs:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs ul {
font-size: .9em;
color: rgba(0, 0, 0, 0.4);
list-style: none;
margin: 0;
}
.breadcrumbs ul:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs ul:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs li {
float: left;
margin-right: 5px;
}
.breadcrumbs li + li:before {
content: " > ";
color: #aaa;
font-size: 12px;
margin: 0 7px 0 5px;
position: relative;
top: -1px;
}
.breadcrumbs.breadcrumbs-path li + li:before {
content: " / ";
top: 0;
}
.breadcrumbs a {
color: #0f0f0f;
text-decoration: none;
}
.breadcrumbs a:hover {
color: #0f0f0f;
text-decoration: underline;
}
.breadcrumbs li.active a, .breadcrumbs span, .breadcrumbs li.active a:hover {
text-decoration: none;
cursor: text;
color: rgba(0, 0, 0, 0.4);
}
/*----------------------------------------
Pagination
----------------------------------------*/
.pagination {
position: relative;
left: -9px;
margin-left: 0;
list-style: none;
}
.pagination:after {
content: "";
display: table;
clear: both;
}
.pagination:after {
content: "";
display: table;
clear: both;
}
.pagination li {
float: left;
margin-right: 2px;
}
.pagination a, .pagination span {
display: block;
padding: 7px 9px;
line-height: 1;
border-radius: 2px;
color: #0f0f0f;
text-decoration: none;
}
.pagination span, .pagination li.active a, .pagination li.active a:hover {
color: #ffffff;
background-color: #0f0f0f;
cursor: text;
}
.pagination a:focus, .pagination a:hover {
text-decoration: none;
background-color: #0f0f0f;
color: #fff;
}
/*----------------------------------------
Labels
----------------------------------------*/
.label, .badge {
background: #e0e3e5;
font-size: 12.75px;
display: inline-block;
line-height: 1;
padding: 4px 7px 3px 7px;
color: #0f0f0f;
text-align: center;
font-weight: normal;
text-transform: uppercase;
}
.label-outline {
background: none;
border: 1px solid #0f0f0f;
padding: 3px 6px 2px 6px;
}
.badge {
border-radius: 15px;
}
/*----------------------------------------
Form
----------------------------------------*/
form {
padding: 0;
margin: 0;
}
fieldset {}
legend {}
label {}
input {
display: inline-block;
*display: inline;
vertical-align: middle;
width: auto;
zoom: 1;
margin: 0;
border: 1px solid #ccc;
font-size: 0.9em;
padding: 6px 0;
text-indent: 5px;
background: #fafafa;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 5px auto;
}
input::-webkit-input-placeholder, input:-moz-placeholder, .placeholder {
color: #bbb;
}
input::-moz-focus-inner {
border: 0;
}
input[disabled="disabled"], input.disabled {
color: #999;
background: #f5f5f5;
}
/* Foucus */
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, button:focus, a.button:focus, select:focus {
border: 1px solid #50B1FE;
outline: none;
}
/* Mobile setting */
input[type="number"] {
width: 5em;
padding: 6px 0;
}
input[type="date"] {
width: 11em;
padding: 6px 0;
}
input[type="tel"] {
width: 13em;
}
input[type="text"], input[type="email"], input[type="password"] {
max-width: 280px;
}
textarea {
width: 360px;
height: 120px;
margin: 0;
border: 1px solid #ccc;
padding: 5px;
vertical-align: middle;
font-family: inherit;
font-size: 0.9em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="radio"], input[type="checkbox"] {
position: relative;
width: 24px;
height: 24px;
margin: 0 5px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
vertical-align: middle;
}
input[type="radio"] {
border-radius: 12px;
}
input[type="radio"]:checked, input[type="checkbox"]:checked {
background-color: #F4F8FB;
}
input[type="radio"]:checked:before, input[type="checkbox"]:checked:before {
position: absolute;
left: 50%;
top: 50%;
display: block;
margin: -5px 0 0 -5px;
content: "";
width: 10px;
height: 10px;
background-color: #007bbb; /*#778EA2;*/
}
input[type="radio"]:checked:before {
border-radius: 5px;
}
select {
min-width: 2em;
height: 36px;
font-size: 0.9rem;
padding: 0 10px;
-moz-appearance: button;
-webkit-appearance: button;
appearance: button;
text-overflow: clip;
background: #a2d7dd;
border: 1px solid #dcdcdc;
-moz-border-radius: 2px;
border-radius: 2px;
}
@media all and (max-width: 768px) {
textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"] {
max-width: 280px;
}
input[type="date"] {
height: 32px;
line-height: 21px;
}
}
/*----------------------------------------
Buttons
----------------------------------------*/
a.btn, .btn a, input[type="submit"], input[type="button"] {
display: block;
font-size: 14px;
line-height: 1.5;
width: 220px;
margin: 0.5em auto;
padding: 0.52em 0;
text-align: center;
text-decoration: none;
color: #ffffff;
-webkit-appearance: none;
border: none;
border-radius: 2px;
box-shadow: none;
cursor: pointer;
background: #e60033;
}
a.btn.w24, .btn.w24 a {
width: 240px;
}
a.btn.w18, .btn.w18 a {
width: 180px;
}
.btn a:hover, a.btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
color: #ffffff;
background: #a22041;
}
.btn-big, input[type="submit"].btn-big {
font-size: 16px;
}
.btn-small, input[type="submit"].btn-small {
font-size: 12px;
}
.btn-orange a, a.btn-orange {
background: #f08300;
}
a.btn, .btn a {
color: #ffffff !important;
}
.btn-orange a:hover, a.btn-orange:hover {
background: #ea5506 !important;
}
a.b-btn, .b-btn a {
display: block;
font-size: 14px;
line-height: 60px;
width: 100%;
height: 60px;
margin: 0;
padding-top: 0;
text-align: center;
text-decoration: none;
color: #ffffff;
-webkit-appearance: none;
border: none;
box-shadow: none;
cursor: pointer;
background: #007bbb;
}
.b-btn a:hover, a.b-btn:hover {
color: #ffffff;
background: #2792c3;
}
a.m-btn, .m-btn a {
position: relative;
display: inline-block;
overflow: visible;
margin: 7px 0;
padding: 11px 21px;
cursor: pointer;
z-index: 1;
font-size: 1em;
min-width: 200px;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: inherit;
color: #ffffff;
background: #f3981d;
}
a.m-btn:hover, .m-btn a:hover {
background: #f6ae54;
text-decoration: none;
z-index: 100;
}
.m-btn:focus {
border-color: #666;
}
a.m-btn, .m-btn a {
color: #ffffff !important;
}
/*-----------------------------------
Arrow
-----------------------------------*/
.arrow {
position: relative;
overflow: hidden;
width: 100%;
}
.arrow:after {
position: absolute;
top: 50%;
right: 16px;
display: block;
z-index: 111;
content: '';
width: 16px; /*arrow size*/
height: 16px; /*arrow size*/
margin-top: -8px;
border-top: 3px solid #a3a3a3; /*arrow color*/
border-right: 3px solid #a3a3a3; /*arrow color*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/*-----------------------------------
Block After
-----------------------------------*/
block:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
/*-----------------------------------
Background
-----------------------------------*/
/*-----------------------------------
Photo Link Arrow
-----------------------------------*/
/*---------------------------------
Scale up Important
-----------------------------------*/
/*-----------------------------------
Colors Design
-----------------------------------*/
/* リストデザイン
-------------------------------------------------------- */
ul.none {
list-style: none;
margin: 0;
padding: 0;
}
ol.decimal {
list-style-type: decimal;
} /*1.2.3*/
/*数字をナンバリング*/
ol.numbers {
counter-reset: number;
list-style-type: none !important;
padding: 0.5em;
}
.content ol.numbers > li:before {
border: none;
}
ol.numbers li {
position: relative;
padding-left: 30px;
line-height: 1.5em;
padding: 0.6em 0.5em 0.5em 30px;
}
/*モバイル用*/
@media all and (max-width: 768px) {
ol.numbers li {
padding-left: 2.3em;
}
}
ol.numbers li::before {
position: absolute;
counter-increment: number;
content: counter(number);
display: inline-block;
background: #5c9ee7;
color: white;
font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
font-weight: bold;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
ol.numbers.reds li::before {
background: #fb8080;
color: #ffffff !important;
}
ol.numbers.orange li::before {
background: #ff6600;
color: #ffffff !important;
}
/*横並び*/
ul.flex {
display: flex;
list-style: none;
}
ul.flex li {
list-style: none;
margin-right: 2em;
}
ul.check {
list-style: none !important;
}
ul.check li {
position: relative;
}
ul.check li::after {
content: '';
display: block;
position: absolute;
top: 0.5em;
left: -1em;
width: 10px;
height: 5px;
border-left: 2px solid #e8437b;
border-bottom: 2px solid #e8437b;
transform: rotate(-45deg);
}
/*黒丸リスト*/
ul.dot {
list-style: none !important;
list-style-image: none;
padding: 0;
margin: 0.5em 0 0.5em 0;
}
ul.dot li {
font-size: 1.04em;
list-style: none;
line-height: 1.37;
margin: 0;
position: relative;
padding: 0 0 0.4em 1.3em;
}
ul.dot li:before {
display: block;
position: absolute;
top: 0.3em;
left: 0.3em;
content: " ";
width: 10px;
height: 10px;
/*line-height: 18px; 高さと同じ数値*/
background-color: #c70067;
border-radius: 100%;
font-size: 0.9em;
}
ul.dot.reds li:before {
background-color: #fdeff2;
color: #fdeff2;
}
ul.dot.orange li::before {
background-color: #ff6600;
color: #ff6600;
}
/* ボックスデザイン
-------------------------------------------------------- */
/*共通の設定*/
.line-box, .info-box, .in-box, .box100, .warning-box, .success-box {
margin: 1em 0 1.5em 0;
padding: 0.8em 1.2em 0.8em 1.2em;
background: #f1f1f1;
color: #1a1a1a;
line-height: 1.42;
}
.warning-box, .success-box {
font-size: 0.9em;
}
.box100 {
width: 100%;
}
.mato-zero {
margin-top: 0 !important;
}
.w8-box, .w80box {
width: 84%;
margin: 0.7em auto;
padding: 0.6em 1em;
background: #ffffff;
color: #1a1a1a;
}
.w9-box, .w90box {
width: 92%;
margin: 0.7em auto;
padding: 0.6em 1em;
background: #ffffff;
color: #1a1a1a;
}
.in-blue-box, .in-red-box, .in-yellow-box, .in-green-box, .in-orange-box {
width: 90%;
margin: 0.7em auto;
padding: 0.8em 1.5em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fafafa !important;
}
/*ライン系*/
.line-box {
background: #ffffff;
border: 1px solid #c1c1c1;
padding: 1em 1.2em;
}
.enline-box {
background: #ffffff;
border: 3px solid #dcdcdc;
padding: 1em 1.2em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/*ブルー系*/
.blue-box5, .success-box {
background: #c1e4e9; /*白藍*/
}
.blue-box1, .babyblue-box {
background: #bbe2f1; /*ベイビーブルー*/
}
.blue-box2, .skyblue-box, .sky-box {
background: #a0d8ef; /*スカイブルー*/
}
.blue-box3, .lightblue-box {
background: #b2cbe4; /*ライトブルー*/
}
.blue-box4, .horizonblue-box {
background: #82cddd; /*ホリゾンブルー*/
}
.in-blue-box {
background: #26499d; /*オリエンタルブルー*/
color: #fafafa !important;
}
/*グリーン系*/
.green-box1, .icegreen-box {
background: #a3d6cc; /*アイスグリーン*/
}
.green-box2, .opalgreen-box {
background: #bee0ce; /*オパールグリーン*/
}
.green-box3, .whitelily-box {
background: #f0f6da; /*ホワイトリリー*/
}
.green-box4, .spraygreen-box {
background: #a4d5bd; /*スプレイグリーン*/
}
.green-box5, .asparagusgreen-box {
background: #dbebc4; /*アスパラガスグリーン*/
}
.in-green-box {
background: #00885a; /*ビリジアン*/
color: #fafafa !important;
}
/*レッド系*/
.pink-box2, .mistyrose-box, .rose-box, .warning-box {
background: #ffe4e1; /*ミスティローズ*/
}
.pink-box3, .sakura-box {
background: #fdeff2; /*薄桜色*/
}
.pink-box1 {
background: #ffc0cb; /*ピンク*/
}
.pink-box4, .powderpink-box {
background: #f5ecf4; /*パウダーピンク*/
}
.in-red-box {
background: #e73562; /*ルビーレッド*/
color: #fafafa !important;
}
/*イエローオレンジ系*/
.orange-box1, .peach-box {
background: #fbd8b5; /*ピーチ*/
}
.in-orange-box {
background: #ee7800; /*オレンジ*/
color: #fafafa !important;
}
.yellow-box1, .sunshineyellow-box {
background: #fff3b8; /*サンシャイン*/
}
.yellow-box2, .limelight-box {
background: #fff799; /*ライムライト*/
}
.yellow-box3, .lightyellow-box {
background: #ffffe0; /*ライトイエロー*/
}
.yellow-box4, .naplesyellow-box {
background: #fdd35c; /*ネープルスイエロー*/
}
.orange-box2, .flesh-box {
background: #f8b862; /*萱草色*/
}
/*バイオレット系*/
.lavender-box2, .lavenderice-box {
background: #f7f6fb; /*ラベンダーアイス*/
}
.lavender-box1 {
background: #e6e6fa; /*ラベンダー*/
}
.lavender-box3, .lavenderblush-box {
background: #fff0f5; /*ラベンダープラッシュ*/
}
.lavender-box4, .shirafuji-box {
background: #dbd0e6; /*白藤色*/
}
/*アイボリー系*/
.ivory-box {
background: #f8f4e6; /*アイボリー*/
}
.pearlwhite-box {
background: #f7f6f5; /*パールホワイト*/
}
.beige-box {
background: #f6e5cc; /*エクルベージュ*/
}
.champagne-box {
background: #e9dacb; /*シャンパン*/
}
.gray-box {
background: #d4d9dc; /*ムーングレイ*/
}
.sandbeige-box {
background: #dcd6d2; /*サンドベージュ*/
}
/*ボックスのpタグのマージン調整*/
.inbox p, .w8-box p, .w9-box p, .in-box p, .line-box p, .info-box p, .warning-box p, .success-box p, .box100 p {
/*width:100%;*/
margin: 0.1em 0;
}
.in-box ul, .in-box ol, .w8-box ul, .w9-box ul, .w8-box ol, .w9-box ol, .info-box ul, .warning-box ul, .success-box ul, .in-box ul, .line-box ul, .info-box ol, .warning-box ol, .success-box ol, .in-box ol, .line-box ol, .box100 ul, .box100 ol {
/*width:100%;*/
margin: 0.1em 0 !important;
}
.inbox h3, .in-box h4, .w8-box h3, .w9-box h3, .box100 h3, .box100 h4, .w90box h4, .w80box h4 {
/*width:100%;*/
margin-top: 0.3em;
margin-bottom: 0.3em;
}
.round {
-webkit-border-radius: 4px; /*四方の丸み*/
-moz-border-radius: 4px; /*四方の丸み*/
border-radius: 4px; /*四方の丸み*/
}
.pad-reset {
padding: 0.3em 1em; /*囲みの中のスペース天・右・地・左*/
}
.box90 {
width: 90%;
margin: 1em auto;
}
.box80 {
width: 80%;
margin: 1em auto;
}
.box70 {
width: 70%;
margin: 1em auto;
}
.snow-box {
padding: 0.3em 0.5em;
margin-bottom: 1em;
}
.in-snow-box {
padding: 0.3em 0.5em 0 0.5em;
}
@media screen and (max-width: 640px) {
.box90, .box80, .box70 {
width: 98%;
margin: 1em auto;
}
.w8-box, .w9-box {
width: 98%;
}
}
.font-s {
font-size: 0.9em !important;
}
.font-ss {
font-size: 0.8em !important;
}
/*フォントを明朝系に*/
.minchou {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
}
/*フォントの大きさを変更（相対的に）*/
.size1 {
font-size: 1.2em;
}
.size2 {
font-size: 1.35em;
}
.size3 {
font-size: 1.5em;
}
.size4 {
font-size: 1.8em;
}
.size-1 {
font-size: 0.9em;
}
.size-2 {
font-size: 0.8em;
}
/*フォントカラー設定*/
.color-black {
color: #2b2b2b;
}
.color-gray {
color: #7d7d7d;
}
.color-silvergray {
color: #afafb0;
}
.color-silver {
color: #c9caca;
}
.color-blue {
color: #003f8e;
}
.color-green {
color: #00885a;
}
.color-yellow {
color: #ffdc00;
}
.color-orange {
color: #ee7800;
}
.color-red {
color: #c82c55;
}
/*テーマカラーを使用*/
.theme-green {
color: #59b9c5;
}
.theme-red {
color: #c82c55;
}
/* アコーディオン
-------------------------------------------------------- */
/* マーカー色の変更
-------------------------------------------------------- */
/*太マーカー*/
.marker-Gray {
background: linear-gradient(transparent 35%, #ff6600 35%);
}
.marker-Green {
background: linear-gradient(transparent 35%, #59b9c6 35%);
}
/*中マーカー*/
.marker-halfGray {
background: linear-gradient(transparent 60%, #ff6600 60%);
}
.marker-halfGreen {
background: linear-gradient(transparent 60%, #59b9c6 60%);
}
/*細マーカー*/
.marker-thinGray {
background: linear-gradient(transparent 85%, #ff6600 85%);
}
.marker-thinGreen {
background: linear-gradient(transparent 85%, #59b9c6 85%);
}
/*-----------------------------------
Table Layout
-----------------------------------*/
/*Center*/
table.all-center th, table.all-center td {
text-align: center !important;
vertical-align: middle !important;
border-left: 1px solid #dcdcdc !important;
}
table.all-center tbody {
border-top: 1px solid #dcdcdc !important;
border-bottom: 1px solid #dcdcdc !important;
border-right: 1px solid #dcdcdc !important;
}