@charset "utf-8";

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
font-weight: 400;
vertical-align: baseline;
white-space: normal;
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.6;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif;
font-weight: 400
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block
}
img {
max-width: 100%;
height: auto;
}
a {
color: #000;
text-decoration: none
}
a:hover {
text-decoration: none
}
li {
list-style: none
}
input[type=password],
input[type=text],
select,
textarea {
outline: 0
}
* {
font-display: swap
}
body {
letter-spacing: .01em;
line-height: 1.6;
font-size: 62.5%;
font-weight: 400;
margin: 0;
padding: 0;
position: relative;
box-sizing: border-box
}
.clearfix {
zoom: 1
}
.clearfix:after {
content: "";
display: block;
clear: both
}
@media print {
.clearfix {
overflow: hidden
}
}
.Tcenter {
text-align: center
}
html {
height: 100%;
margin: 0 !important;
font-size: 62.5%;
line-height: 1.15
}
.inner {
max-width: 1120px;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box
}
.wrap-box {
-ms-flex-pack: justify;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -ms-flexbox;
display: flex
}
.anchor-link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2
}
footer {
bottom: 0;
width: 100%;
border-top: 1px solid #e6e6e6;
background: #fff;
padding: 0 0 30px
}
#footer-nav {
margin-bottom: 30px;
padding-top: 10px
}
#footer-nav li {
display: inline-block;
border-right: 1px solid #fff;
box-sizing: border-box;
margin: 0 0 12px
}
#footer-nav li:last-child {
border-right: none
}
#footer-nav li a {
color: #333;
display: block;
padding: 0 14px;
font-size: 12px
}
address {
text-align: center;
font-size: 14px;
font-style: normal;
line-height: 1.6
}
.pagetop {
position: fixed;
right: 1rem;
bottom: 50px;
line-height: 1;
text-align: center;
font-weight: 900
}
.pagetop a {
font-weight: 900;
display: block;
width: 80px;
height: 80px;
padding-top: 25px;
background: #dedede;
border-radius: 50%;
color: #fff;
box-sizing: border-box
}
nav .inner1 {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch
}
.mobile{
display: none;
}
@keyframes slideInDown {
0% {
visibility: visible;
transform: translate3d(0, -100%, 0)
}
to {
transform: translateZ(0)
}
}
@keyframes slideInUp {
0% {
visibility: visible;
transform: translateZ(0)
}
to {
transform: translate3d(0, -100%, 0)
}
}
@media screen and (min-width:768px) {
#footer-nav {
padding-top: 0;
margin-bottom: 1rem;
line-height: 1.6
}
#footer-nav ul {
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
line-height: 1.6
}
#footer-nav li {
margin-bottom: 0;
border-right: none
}
#footer-nav li a {
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
padding: 1.4rem 2rem;
letter-spacing: .1px;
line-height: 1.6
}
address:last-child {
margin-bottom: 14px
}
}
#top-banner {
width: 100%;
height: 577px;
background: url(//kaitori-toolup.com/blog/wp-content/themes/kaitori/images/top/first_view.jpg) no-repeat center;
background-size: cover
}
#top-banner .inner {
height: 577px;
position: relative
}
#top-banner .inner .text {
position: absolute;
top: 20%;
left: 0
}
#top-banner .inner .search-top {
position: absolute;
top: 50%;
left: 0
}
#top-banner .inner .button {
position: absolute;
top: 70%;
bottom: 20%;
padding-left: 80px;
left: 0
}
#top-banner .inner .button li {
display: inline-block;
margin-right: 15px
}
#top-banner .inner .button li img {
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, .15);
-o-box-shadow: 0 0 15px rgba(0, 0, 0, .15);
-ms-box-shadow: 0 0 15px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .15);
box-shadow: 0 0 15px rgba(0, 0, 0, .15)
}
#top-banner .inner .img {
position: absolute;
bottom: 0;
right: -100px
}
.service-box {
max-width: 940px;
padding: 70px 0 80px
}
.service-box ul {
justify-content: space-between
}
.service-box li {
text-align: center
}
.service-box .cap {
display: block;
margin: 0 auto 50px
}
.detail-box {
background: #f2f2f2;
padding: 80px 0 90px
}
.detail-box h3 {
margin-bottom: 30px
}
.detail-box h3 span {
display: block;
text-align: center
}
.detail-box h3 .icon {
margin-bottom: 10px
}
.detail-box h3 .title {
font-size: 1.6em;
font-weight: 700;
margin-bottom: 10px;
color: #353535
}
.detail-box.pd {
padding: 40px 0 80px
}
.detail-box h3.center {
text-align: center;
margin-bottom: 18px
}
.detail-box h3 .title.under {
display: inline-block;
padding: 0 0 12px;
border-bottom: 3px solid #000
}
.detail-box h3 .min-title {
position: relative;
width: 100px;
margin: auto
}
.detail-box h3 .min-title:after,
.detail-box h3 .min-title:before {
content: "";
display: block;
width: 15px;
height: 2px;
position: absolute;
top: 50%;
background: #353535
}
.detail-box h3 .min-title:before {
left: 0
}
.detail-box h3 .min-title:after {
right: 0
}
.detail-box h4 {
color: #fff;
cursor: pointer;
padding: 20px 15px;
border: 1px solid #1e8549;
box-sizing: border-box;
background: #26a65b;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
.detail-box h4:hover,
.detail-box li:nth-child(even) h4:hover {
background: #fff;
color: #1e8549
}
.detail-box ul li {
position: relative;
border: 1px solid #d3d3d3;
box-sizing: border-box;
border-top: none;
border-left: none;
text-align: center;
padding: 25px 0;
width: 20%
}
.detail-box ul li .cap {
display: block;
margin: 0 auto 10px
}
.detail-box .inbox {
display: none
}
.detail-box li:nth-child(even) h4 {
background: #26a65b
}
.detail-box.no-top {
padding-top: 0
}
.detail-box .slider li {
width: 300px;
margin: 0 16px;
padding: 15px;
background: #fff
}
.detail-box .slider li figure {
display: block;
width: 100%;
text-align: center
}
.detail-box .slider li figure img {
max-width: 152px;
height: auto;
margin: 0 auto
}
.detail-box .slider li figcaption {
text-align: center;
display: block;
padding: 12px 0 0
}
.detail-box .slick-dots {
display: block;
margin: 24px 0 0;
background: 0 0
}
.detail-box .slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
background: 0 0;
border: none
}
.slick-dots li button:before {
font-size: 14px
}
@media screen and (max-width:768px) {
.detail-box .slick-dots {
position: static;
margin: 5px 0 0
}
.related_article_columns_wrap{
margin: 50px 0 0;
}
}
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 50px;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin: 0 auto
}
.btntoggle {
position: absolute;
right: 5px;
top: 5px
}
#nav_toggle {
display: block;
width: 40px;
height: 40px;
position: relative;
top: 4px;
z-index: 100
}
#nav_toggle div {
position: relative
}
#nav_toggle span {
display: block;
height: 3px;
background: #26a65b;
position: absolute;
width: 100%;
left: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out
}
#nav_toggle span:nth-child(1) {
top: 0
}
#nav_toggle span:nth-child(2) {
top: 12px
}
#nav_toggle span:nth-child(3) {
top: 24px
}
.open #nav_toggle span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg)
}
.open #nav_toggle span:nth-child(2) {
width: 0;
left: 50%
}
.open #nav_toggle span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg)
}
header .nav-right .icon {
height: 20px
}
.nav a {
font-family: "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif
}
.nav .nav-right a {
display: block;
text-align: center;
border-radius: 8px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
box-sizing: border-box
}
.nav .icon {
display: block;
margin: 0 auto;
height: 24px
}
.login,
.logout {
background: #f3f3f3;
padding: .5rem
}
header .nav-right a {
position: relative
}
header .nav-sub a.icon_list:before {
display: block;
position: absolute;
right: 0;
top: 0;
content: "";
width: 0;
height: 0;
border-top: 10px solid #fff;
border-left: 10px solid transparent
}
.nav .regist {
background: #b5c71f
}
header .nav-sub {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: auto;
position: relative
}
header .nav-sub .icon_list {
background-color: #26a65b;
width: 100%;
position: relative
}
header .nav-sub .icon_list .icon {
height: 30px
}
header .nav-sub .other {
color: #333;
font-size: 1.4rem
}
.nav .other {
display: inline-flex
}
.nav .other img {
max-width: 12px;
height: auto;
margin-right: 3px;
display: inline-block
}
.nav>.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.nav-center,
.nav-left,
.nav-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
.nav-left {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
.nav-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.nav-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.nav .nav-center .button {
background: #fff;
position: relative;
margin: 0 30px 0 1px;
padding: 0;
color: #003315;
font-size: 1.4rem;
font-weight: 900;
line-height: 1.3;
width: auto
}
.menu_sub {
display: none;
position: absolute;
top: 54px;
right: 0;
background-color: rgba(243, 243, 246, .95);
width: 200px;
padding: 1.6rem 1.6rem;
z-index: 9;
animation-name: SlideFromTop;
animation-duration: .3s
}
header .nav .nav-right {
width: 400px;
position: relative
}
.nav-right ul {
list-style: none;
margin: 0;
padding: 0
}
.mob_hdr_btns {
width: 100px;
height: 50px;
margin-left: auto;
margin-right: 58px
}
.mob_hdr_btns ul {
display: flex;
flex-flow: row
}
.mob_hdr_btns li a {
display: block;
text-align: center;
color: #fff;
font-size: 7px;
font-weight: 700;
padding: 2px;
width: 52px;
height: 50px;
box-sizing: border-box
}
#mob_btn_web {
background: #b6370f;
margin-right: 3px
}
#mob_btn_web img {
max-width: 35px;
padding-top: 2px;
padding-bottom: 6px
}
#mob_btn_line {
background: #00b900
}
#mob_btn_line img {
margin-top: -3px;
max-width: 36px
}
#btn-web {
border: 1px solid #b6370f;
border-radius: 10px;
background: #fff;
width: 190px
}
#btn-web a {
color: #b6370f;
width: 100%;
line-height: 22px
}
#btn-web a:hover {
color: #fff;
background: #b6370f
}
#btn-line {
border-radius: 10px;
width: 190px
}
#btn-line img {
margin-right: 25px;
max-width: 43px;
height: auto
}
#btn-line a {
background: #13bf00;
color: #fff;
padding: 0 15px 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
width: 190px
}
#btn-line a:hover {
color: #fff;
background: #13bf00
}
.nav .brand,
.nav a {
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
color: #000;
box-sizing: border-box
}
header .nav .brand {
padding: 0 20px 0 0;
width: auto
}
.nav .brand {
font-size: 1.75em;
padding-top: 0;
padding-bottom: 0
}
@media screen and (max-width:480px) {
.nav,
.nav>.container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.nav-center,
.nav-left,
.nav-right {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.category_part_heading{
font-size: 16px;
}
}
@media screen and (max-width:767px) {
.pagetop {
bottom: 70px;
margin: auto;
width: 42px
}
.pagetop a {
width: 42px;
height: 42px;
padding-top: 10px
}
@media screen and (max-width:330px) {
header .nav .brand {
width: 45%
}
}
}
@media screen and (min-width:768px) {
}
.blog-box {
padding: 80px 0 90px;
justify-content: space-between
}
.blog-box h3 {
font-size: 1.6em;
border-right: 1px solid #ddd;
padding-right: 36px
}
.blog-box ul {
width: 850px;
height: 168px;
overflow-y: scroll
}
.blog-box li {
position: relative;
padding-bottom: 19px;
border-bottom: 1px solid #ddd;
margin-bottom: 20px
}
.blog-box li:last-child {
margin-bottom: 0
}
.blog-box time {
background: #26a65b;
color: #fff;
font-size: .7em;
padding: 0 20px;
letter-spacing: .2em;
margin-right: 20px
}
.blog-box .txt,
.blog-box time {
display: inline-block;
line-height: 30px;
vertical-align: middle
}
.blog-box .btn {
width: 85px;
display: block;
text-align: center;
line-height: 168px;
height: 168px;
background: #26a65b;
color: #fff
}
.pagevisual {
width: 100%;
background-position: center center;
background-size: cover;
height: 260px;
min-height: 260px;
padding-left: 0;
padding-right: 0;
position: relative;
display: table
}
.pagevisual:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(000, 000, 000, .3);
z-index: 2
}
.pagevisual h2 {
position: relative;
z-index: 3;
text-align: center;
display: table-cell;
vertical-align: middle;
border-left: none;
border-bottom: none
}
.pagevisual .title,
.pagevisual .txt {
display: block;
color: #fff;
font-family: "Noto Sans JP", 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: .05em
}
.pagevisual .title {
font-size: 2.4em;
margin-bottom: 10px
}
#topicpath {
font-size: 1.2rem;
max-width: 1118px;
width: 98%;
margin: 50px auto 2rem
}
@media screen and (min-width:640px) {
#topicpath {
margin-top: 0;
}
}
#topicpath ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1rem 0;
max-width: 1118px;
width: 100%;
margin: 0 auto;
font-size: 1rem
}
#topicpath a,
#topicpath li {
color: #333;
font-size: 1.4rem
}
#topicpath a {
position: relative;
padding: .5rem 1.5rem .5rem .1rem
}
#topicpath li:last-child {
font-weight: 700
}
#topicpath a:after {
content: "";
background: url(https://kaitori-toolup.com/img/icons/icon_arrow.svg) no-repeat center center;
background-size: 14px;
width: 14px;
height: 14px;
transform: rotate(90deg);
position: absolute;
right: 0;
top: 8px
}
main .page-title {
text-align: center;
margin-bottom: 30px
}
main .page-title .icon,
main .page-title .title,
main .page-title .txt {
display: block;
margin: auto
}
main .page-title .icon {
margin-bottom: 20px;
width: 30px
}
main .page-title .txt {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 20px
}
main .page-title .title {
width: 170px;
position: relative;
font-weight: 700;
font-family: "Noto Sans JP", 'Open Sans', sans-serif
}
main .page-title .title:after,
main .page-title .title:before {
content: "";
display: block;
width: 15px;
height: 2px;
position: absolute;
top: 50%;
background: #353535
}
main .page-title .title:before {
left: 0
}
main .page-title .title:after {
right: 0
}
main.no-bottom {
margin-bottom: 0
}
.color-text {
color: #26a65b;
font-weight: 700
}
.tabs-box {
max-width: 896px;
width: 100%;
margin: 0 auto 50px;
overflow: hidden
}
.tabs-box li {
border: 1px solid #26a65b;
list-style: none;
width: 23.5%;
float: left;
margin: 0 2% 2% 0;
box-sizing: border-box
}
.tabs-box li:nth-child(4n+1) {
clear: both
}
.tabs-box li:nth-child(4n+4) {
margin-right: 0
}
.tabs-box li:nth-last-child(-n+4) {
margin-bottom: 0
}
.tabs-box li a {
display: block;
cursor: pointer;
background: #26a65b;
text-align: center;
height: 64px;
line-height: 64px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
color: #fff;
margin-bottom: 0 !important
}
.tabs-box .box {
margin-bottom: 0 !important;
background: #26a65b !important
}
#rate .tabs-box li:hover,
.tabs-box li:hover a {
color: #000;
background: #fff
}
.pagination {
display: flex;
justify-content: center;
width: 100%;
text-align: right;
margin: 20px 0 0
}
.pagination .page-numbers {
border: 1px solid #eee;
padding: 5px 10px
}
.pagination .page-numbers.current {
border: none;
background: #26a65b;
color: #fff
}
.WEB h4 {
margin: 62px 0;
color: #26a65b;
font-size: 24px;
font-weight: 700;
text-align: center
}
.WEB .formStyle {
border-collapse: collapse;
width: 100%
}
.WEB .formStyle td,
.WEB .formStyle th {
padding: 25px 0;
font-size: 15px;
vertical-align: middle;
border-bottom: 1px solid #eee;
text-align: left
}
.WEB .formStyle th {
width: 25%;
font-size: 16px;
font-weight: 700;
position: relative
}
.WEB .formStyle th.hiss:after {
content: "必須項目";
display: inline-block;
color: #fff;
background-color: #ff4e4e;
padding: 5px 10px;
position: absolute;
top: 50%;
right: 0;
-moz-transform: translateX(0) translateY(-50%);
-webkit-transform: translateX(0) translateY(-50%);
-o-transform: translateX(0) translateY(-50%);
-ms-transform: translateX(0) translateY(-50%);
transform: translateX(0) translateY(-50%)
}
.WEB .formStyle td {
padding-left: 25px
}
.WEB .formStyle td .text {
display: inline-block;
margin-left: 20px
}
.WEB .formStyle label {
margin-right: 35px
}
.WEB .formStyle i {
padding: 0 0 5px;
display: inline-block;
font-style: normal;
font-weight: 700
}
.WEB .formStyle small {
display: block;
font-size: 14px;
font-weight: 700;
margin: 10px 0 0
}
.WEB .btnArea {
margin: 42px 0;
text-align: center
}
.WEB .btnArea .send {
border: none;
width: 240px;
height: 48px;
color: #fff;
font-size: 16px;
font-weight: 700;
background: #26a65b;
cursor: pointer;
-webkit-appearance: none
}
.WEB .txtC {
text-align: center;
margin: 0 0 20px
}
input[type=email],
input[type=tel],
input[type=text],
textarea {
display: block;
background: #f2f2f2;
border: none;
border-radius: 4px;
font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'Open Sans', "メイリオ", sans-serif;
font-size: 15px;
width: 100%;
padding: 8px;
-webkit-transition: all 160ms ease-in-out;
-moz-transition: all 160ms ease-in-out;
-ms-transition: all 160ms ease-in-out;
-o-transition: all 160ms ease-in-out;
transition: all 160ms ease-in-out;
box-sizing: border-box
}
input[type=email]:focus,
input[type=tel]:focus,
input[type=text]:focus,
textarea:focus {
-moz-transform: scale(1.01);
-webkit-transform: scale(1.01);
-o-transform: scale(1.01);
-ms-transform: scale(1.01);
transform: scale(1.01);
background: #fff;
box-shadow: 0 0 12px rgba(0, 0, 0, .16)
}
input[type=text].m {
display: inline-block;
width: 42%
}
.BLOG h3.border {
padding: 0 0 15px 0;
margin: 0 0 8px;
font-size: 20px;
font-weight: 700;
position: relative;
}
.BLOG h4 {
margin-top: 20px;
padding: 0 0 20px;
border: none
} .BLOG h2.tblog{
margin: 0;
padding: 0;
font-size: 20px;
line-height: 1.5em;
color: #0a0a0a;
border: 0;
}
.BLOG h2.tblog span{
display: block;
padding: 15px 10px;
font-weight: 600;
background: #F3F3F3;
}
.BLOG h3.tblog{
font-size: 18px;
color: #010101;
padding:0;
line-height: 1.5em;
border-bottom: 1px solid #B8B8B8;
font-weight: 600;
background: none;
}
.BLOG h3.tblog span{
font-weight: 600;
}
.BLOG h4,
.single .BLOG h4{
padding:0 0 0 10px;
border-left: 5px solid #B8B8B8;
font-size: 18px;
line-height: 1.5em;
color: #010101;
font-weight: 600;
}
.BLOG h5:not([class]),
.single .BLOG h5:not([class]){
margin:0 0 0 15px;
font-size: 16px;
line-height: 1.5em;
color: #010101 !important;
display: inline-block;
position: relative;
font-weight: 600;
}
.BLOG h5 span,
.single .BLOG h5 span{
color: #010101 !important;
font-weight: 600;
}
.BLOG h5::before,
.single .BLOG h5::before{
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
background-color: #B8B8B8;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
margin-left: -15px;
}
.single .inner {
max-width: 1120px;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box
}
.single .BLOG time {
display: block;
width: auto;
margin: 32px 0 0
}
.BLOG time {
color: #a0a0a0;
margin-bottom: 1.5rem;
font-weight: 700;
font-family: Arial;
text-align: left
}
.BLOG .list .date {
color: #a0a0a0;
font-size: 12px;
font-weight: 700;
font-family: Arial;
text-align: left
}
.BLOG .list li:hover {
border-color: #26a65b
}
.BLOG .list span a {
border: 1px solid #26a65b;
margin: 0 5px;
padding: 0 10px
}
.BLOG .list span a:nth-child(5) {
line-height: 3
}
.BLOG .list li {
border: 5px solid #f0f0f0;
margin: 3px;
background: #fff;
transition: all .3s;
border-radius: unset;
box-shadow: none;
box-sizing: border-box;
position: relative;
}
.BLOG .list li>div {
color: #333
}
.BLOG .list li figure img {
width: 100%;
height: 100%;
overflow-y: hidden;    
object-fit: contain;
}
.BLOG .list .blog_li figure img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.BLOG .list_normal li figure img {
width: 100%;
}
.BLOG .list li dl {
float: right;
width: 60%
}
.BLOG .list li dl dt {
margin: 12px 0 32px;
font-size: 18px;
font-weight: 700
}
.BLOG .list li dl dt a {
font-size: 18px;
font-weight: 700
}
.BLOG .list li dl .date time {
display: inline-block;
background: #26a65b;
font-size: 14px;
color: #fff;
padding: 5px 15px;
margin-top: 0
}
.BLOG .list li dl .date span {
display: inline-block;
font-size: 14px;
padding: 5px 0
}
.BLOG .list li dl .description,
.BLOG .list li dl .description p {
line-height: 1.8
}
.BLOG .list li dl .description img {
display: none
}
.BLOG .btnArea {
margin-bottom: 100px;
text-align: center;
display: block;
padding: 32px 0 0
}
.BLOG .btnArea .link {
color: #26a65b;
padding: 25px 80px;
display: inline-block;
border: 1px solid rgba(38, 166, 91)
}
.BLOG .btnArea .link:hover {
background: #26a65b;
color: #fff;
-webkit-transition: all .4s 0s cubic-bezier(.77, 0, .175, 1);
-moz-transition: all .4s 0s cubic-bezier(.77, 0, .175, 1);
-ms-transition: all .4s 0s cubic-bezier(.77, 0, .175, 1);
-o-transition: all .4s 0s cubic-bezier(.77, 0, .175, 1);
transition: all .4s 0s cubic-bezier(.77, 0, .175, 1)
}
.BLOG table td,
.BLOG table th {
padding: 12px
}
.BLOG .pagenavi {
margin: 32px 0 80px;
text-align: center;
font-size: 10px
}
.BLOG .pagenavi .wp-pagenavi {
display: flex;
flex-flow: wrap;
justify-content: center
}
.BLOG .pagenavi .wp-pagenavi a,
.BLOG .pagenavi .wp-pagenavi span {
min-width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center
}
.BLOG .pagenavi .wp-pagenavi span.pages {
width: 100%;
border: none
}
#blog {
display: flex;
flex-flow: row-reverse;
justify-content: left;
max-width: 1118px;
width: 98%;
}
#blog .container {
margin-left: 0;
}
#blog .sidebar {
display: block;
padding: 0;
width: 250px;
max-width: 280px
}
#blog .sidebar h2 {
padding: 0;
font-size: 14px;
color: #525263;
position: relative
}
.all_column a {
font-size: 16px;
font-weight: 700;
color: #525263 !important;
margin-bottom: 10px;
padding: 1rem;
display: block
}
.tagarea {
margin: 2rem 0 5rem;
background: #fff;
}
.tagarea h2 {
font-size: 14px;
font-weight: 900;
position: relative;
color: #525263;
margin: 0
}
.tag_list a {
margin:5px 2px;
background-color: #fff;
border: 1px solid #ff5630;
color: #ff5630 !important;
font-size: 12px !important;
display: inline-block;
border-radius: 3px;
padding: 3px 4px
}
.tag_list a::before{
content: '#';
}
.BLOG .archive {
padding: 0
}
.BLOG .archive li {
list-style: none;
margin: 0
}
.BLOG .archive li a {
display: block;
padding: 14px 0;
font-size: 14px;
color: #525263;
background: #fff;
font-weight: 400;
border-top: 1px solid #ccc;
line-height: 1;
}
.BLOG .archive li:nth-child(1) a{
border: none;
}
.BLOG .archive li a:hover {
background-position: left 3px center
}
.BLOG .list {
margin:0 auto;
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 0;
margin-left: 2%;
}
.list .blogbox {
width: 100%;
display: block;
border: 5px solid #f0f0f0;
margin: 0 auto 3rem;
display: block;
background: #fff;
transition: all .3s;
border-radius: unset;
box-shadow: none
}
.list .blogbox a {
display: block;
position: relative;
height: 100%
}
.list .blogbox .prmlink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.archive_cate_text{
margin-bottom: 1em;
font-size: 12px;
line-height: 1.5em;
}
#blog .sidebar h2.border {
font-size: 16px;
display: block;
border-bottom: 2px solid #ccc;
}
#blog .sidebar h2.border_none{
margin-bottom: 10px;
}
.archive_flex_even{
display: block;
}
.archive_flex_odd{
display: none;
}
@media screen and (max-width:1100px) {
.archive_flex_even{
display: none;
}
.archive_flex_odd{
display: block;
}
}
@media screen and (min-width:768px) {
.nav .brand img {
max-width: 100%;
width: auto;
height: 59px;
object-fit: contain;
max-height: unset;
padding: 0.5rem 0;
margin-top: 3px;
margin-bottom: 0;
margin-right: 5px;
}
.BLOG .list {
flex-direction: row;
display: flex;
flex-wrap: wrap
}
#blog .sidebar h2 {
padding: 5px 0;
font-weight: 700;
pointer-events: none;
}
#blog .sidebar h2.border {
font-size: 16px;
border-bottom: 2px solid #ccc;
}
#blog .sidebar h2.border_none{
margin-bottom: 10px;
border: none;
}
.menu_column .cover,
.tagarea .tag_list {
display: block
}
.all_column {
margin: 0 0 3rem
}
.all_column a {
font-size: 16px;
padding: 0 0 20px 0
}
.list .blogbox {
width: 32%;
flex-basis: auto
}
.list .blog_li {
width: 24%;
}
.BLOG .list li {
flex-basis: auto;
box-sizing: border-box;
}
.blog_title {
font-size: 16px
}
}
@media screen and (min-width:768px) {
header .nav {
width: calc(100% - 2rem);
height: 59px;
margin: 0 auto
}
header .nav .nav-center {
flex-flow: row
}
.nav .nav-center .button {
margin: 0;
width: auto;
font-size: 1.2vw;
padding: 0 1.5vw 0 0;
}
.service-box .inner {
max-width: 100%;
padding: 0 30px
}
.cate_item_name .brand {
font-size: 1.6rem;
font-weight: 400
}
#search_area #search_form_t1 input[type=text] {
padding-right: 10px
}
#rate #search_area #search_form_t1 input[type=text] {
min-width: 430px
}
footer .nav .nav-left {
width: 100%
}
.top_copy {
max-width: 500px;
max-width: 100%
}
.top_first .search_area {
max-width: 600px
}
.top_copy {
top: 8%
}
.top_copy figure {
margin-left: -20px
}
.top_page .topics_area {
max-width: 81rem;
max-width: 600px
}
.top_page .topics_area dl {
height: 10rem
}
.top_first .search_area {
top: 50%
}
.bread {
max-width: 120rem;
margin-top: 60px
}
.container {
width: 100%
}
.container .col-12 {
max-width: 120rem;
width: 100%;
flex: 0 0 100%
}
.container .top_first {
height: 450px;
padding: 0 30px
}
.top_first_inner {
height: 100%;
max-width: 1280px
}
.top_first #search_area .col-4 {
-ms-flex: 0 0 33%;
flex: 0 0 calc(100% / (12/4));
max-width: 33%
}
.top_first #search_area select {
padding-left: 10px;
font-size: 1.4rem
}
#top .search_area .col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 calc((100% / (12/6)) - 1rem);
max-width: 50%
}
#top .search_area .col-2 {
-ms-flex: 0 0 17%;
flex: 0 0 calc(100% / (12/2));
max-width: 17%
}
.topics_area .col-12 {
border-radius: 10px;
height: 120px
}
#top .container {
max-width: 100%;
margin-top: 60px;
overflow: hidden
}
.service-box {
margin: 0 auto;
padding: 8rem 0
}
.service-box .inner {
max-width: 100%;
margin: 0 auto;
padding: 0 30px
}
.tab_category_box li {
max-width: 400px;
width: 33%;
margin-right: 4rem
}
.tab_category_box li:last-child {
margin-right: 0
}
.tab_category_box figure {
width: 100%
}
#top .search_area .col-1 input[type=submit],
#top .search_area .col-2 input[type=submit] {
padding: 0
}
}
@media screen and (min-width:1600px) {
.BLOG .list_normal li {
width: 32%;
margin-bottom: 10px;
}
.BLOG .list li figure img {
width: 100%;
max-width: 100%;
}
}
.list_normal .conts_col_up {
}
.list .blogbox figure {
width: 100%;
height: auto;
overflow: hidden;
}
.list_normal .blogbox figure {
overflow: hidden;
}
.conts_col_inner {
box-sizing:border-box;
width: 100%;
padding: 0 10px 10px;
}
.list_normal .conts_col_inner {
width: 100%;
}
.blog_title {
font-size: 14px;
font-weight: 700;
padding: 0 1.5rem 1.5rem 0;
margin: 0
}
.list_normal .blog_title {
padding: 0;
}
.list_normal {
font-size: 14px;
font-weight: 700;
padding: 0 1.5rem 1.5rem 0;
margin: 0
}
.list .archive_cate_list {
margin: 10px 0;
font-size: 12px;
color: #26a65b;
}
.list_normal .archive_cate_list{
display: flex;
align-items: center;
}
.list .archive_cate_list p{
margin-bottom:5px;
}
.list .archive_cate_list p:nth-of-type(2){
margin: 10px 0;
font-size: 14px;
}
.list .archive_cate_list p:nth-of-type(4){
margin: 15px 0;
font-size: 16px;
color: #c40101;
font-weight: bold;
}
.list .archive_cate_list a {
padding:5px 10px;
height: auto;
display: inline-block;
font-size: 12px;
line-height: 1;
border-radius: 10.5px;
background: #64a12c;
border: 1px solid #64a12c;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 5px;
right: 5px;
}
.list_normal .archive_cate_list a {
padding: 2px 5px;
border: 1px solid #64a12c;
border-radius: 0;
color: #64a12c;
background: #fff;
display: inline-block;
margin-bottom: 5px;
margin-right: 5px;
font-size: 11px;
position: relative;
top: 0;
right: 0;
}
.conts_col_inner .date{
position: absolute;
bottom: 5px;
right: 5px;
}
.list_normal .conts_col_inner .date{
margin-bottom: 5px;
bottom: 0;
right: 0;
position: relative;
}
.list_normal .archive_cate_list a:nth-of-type(1){
display:inline-block;
}
.conts_col {
display: flex;
border-top: 1px solid #f0f0f0;
padding: 20px 10px 0
}
.card .blog_description {
font-size: 12px;
padding-bottom: 15px;
margin: 0;
line-height: 1.5;
text-align: justify
}
@media screen and (max-width:1014px) {
.BLOG .list span a {
margin: 4px 0;
padding: 4px 13px;
width: 98px;
text-align: center
}
.BLOG .list li dl .date span {
display: flex;
flex-direction: column
}
.BLOG .list span a:nth-child(5) {
line-height: 1
}
.BLOG .list_normal li {
width: 32%;
}
}
#line-assessment .page-title .title {
width: 210px
}
#line-assessment .top-box {
text-align: center;
margin-bottom: 50px
}
#line-assessment .top-box dt {
font-weight: 700;
font-size: 1.6em;
margin-bottom: 25px
}
#line-assessment .top-box .item {
color: #13bf00;
font-weight: 700
}
#line-assessment .top-box dd {
line-height: 1.8
}
#line-assessment .inbox {
border: 1px solid #26af61;
padding: 32px;
box-sizing: border-box
}
#line-assessment .box:not(:last-of-type) {
margin-bottom: 70px
}
#line-assessment .box:last-of-type {
margin-bottom: 40px
}
#line-assessment .box h3 {
background: #26af61;
color: #fff;
height: 70px;
line-height: 70px;
text-align: center;
color: #fff;
font-size: 1.6em
}
#line-assessment .box .item {
width: 70px;
border-radius: 50%;
height: 70px;
background: #209453;
color: #fff;
text-align: center;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
right: 18px;
top: -22px
}
#line-assessment .box dt {
font-size: .9em;
width: 50%
}
#line-assessment .box dd {
font-size: 1.8em;
font-weight: 700;
width: 50%
}
#line-assessment .box dd img,
#line-assessment .box dt img {
width: 100%
}
#line-assessment .box {
position: relative
}
#line-assessment .box .color-box {
background: #f2f2f2;
padding: 26px 28px;
border-radius: 6px;
align-items: center;
margin-bottom: 30px
}
#line-assessment .box .color-box .item-box {
margin-right: 30px
}
#line-assessment .box .color-box .item-box img {
height: 50px;
width: auto
}
#line-assessment .box .color-box p {
color: #353535
}
#line-assessment .box .img-box {
justify-content: space-between
}
#line-assessment .box ol {
margin-bottom: 20px;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: flex;
-moz-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
-o-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
-o-justify-content: space-between;
-ms-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between
}
#line-assessment .box ol li {
list-style: none;
width: 23%;
box-sizing: border-box
}
#line-assessment .box ol h4 {
background: #696969;
height: 32px;
line-height: 32px;
text-align: center;
color: #fff;
margin-bottom: 20px
}
#line-assessment .box ol p {
line-height: 1.5;
font-size: .7em;
margin-bottom: 20px
}
#line-assessment .box ol img+p {
margin-top: 20px;
margin-bottom: 0
}
#line-assessment .box .item-box .color-box {
border-radius: 0;
margin-bottom: 0;
padding: 12px
}
#line-assessment .box .item-box h5 {
font-weight: 700;
margin-bottom: 12px
}
#line-assessment .box .item-box li {
position: relative;
margin-left: 18px
}
#line-assessment .box .item-box li:not(:last-child) {
margin-bottom: 12px
}
#line-assessment .box .item-box li:before {
content: "";
position: absolute;
top: 2px;
left: -18px;
width: 12px;
height: 12px;
display: block;
background: #26af61
}
#line-assessment .box .item-box {
align-items: center
}
#line-assessment .box .item-box p {
font-size: 6.2em;
color: rgba(248, 248, 248, 1);
font-weight: 700;
margin-left: 40px
}
#line-assessment .box .min-box {
width: 507px
}
#line-assessment .box .min-box ul {
justify-content: space-between;
margin-bottom: 20px
}
#line-assessment .box .min-box h5 {
text-align: center;
line-height: 32px;
height: 32px;
color: #fff
}
#line-assessment .box .min-box:first-of-type li:nth-child(1) h5 {
background: #af2926
}
#line-assessment .box .min-box:first-of-type li:nth-child(2) h5 {
background: #26af61
}
#line-assessment .box .min-box:last-of-type li h5 {
background: #209453
}
#line-assessment .box .min-box .color-box {
text-align: center;
border-radius: 0;
padding: 0;
height: 63px;
line-height: 63px;
margin-bottom: 0
}
#line-assessment .box .photo-box {
justify-content: space-between
}
#genre .box h4 {
background: #31a963;
height: 64px;
line-height: 64px;
color: #fff;
border-bottom: 1px solid #076e23;
padding-left: 25px
}
#genre .box:not(:last-of-type) {
margin-bottom: 30px
}
#genre .box ul,
.detail-box ul {
border-left: 1px solid #d3d3d3;
background: #fff;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: flex;
-moz-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
-o-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: start;
-o-justify-content: start;
-ms-justify-content: start;
-moz-justify-content: start;
justify-content: start
}
#genre .box li {
position: relative;
border: 1px solid #d3d3d3;
box-sizing: border-box;
border-top: none;
border-left: none;
text-align: center;
padding: 25px 0;
width: 20%
}
#genre .box .cap {
display: block;
margin: 0 auto 10px
}
#serch-box {
background: #eee;
padding: 35px 0;
margin: 60px 0
}
#serch-box #searchform {
max-width: 900px;
width: 100%;
margin: auto;
justify-content: space-between;
box-sizing: border-box;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: flex;
-moz-flex-flow: row nowrap;
-webkit-flex-flow: row nowrap;
-o-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: space-between;
-o-justify-content: space-between;
-ms-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between
}
#serch-box #searchform select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 42px;
line-height: 42px;
padding: 0 30px 0 10px;
border-radius: 6px;
box-sizing: border-box;
background-color: #26a65b;
color: #fff;
border: 1px solid #20b050;
display: block
}
#serch-box #searchform .select {
position: relative
}
#serch-box #searchform .select::after {
display: block;
position: absolute;
top: 0;
right: 10px;
content: "▼";
color: #fff;
height: 42px;
line-height: 42px;
font-size: 10px;
pointer-events: none
}
#serch-box #searchform #s {
flex-grow: 1;
box-sizing: border-box;
padding: 5px 20px;
border: 1px solid #434343;
border-radius: 6px;
height: 42px;
line-height: 42px
}
#serch-box #searchsubmit {
background: #353535;
border-radius: 6px;
color: #fff;
height: 42px;
line-height: 42px;
width: 140px
}
.item-table-text {
margin-bottom: 20px;
position: relative
}
.item-table-text p {
font-size: 16px;
font-weight: 700
}
.screen-reader-text {
display: none
}
@media screen and (max-width:939px) {
#serch-box #searchform {
flex-flow: row wrap
}
#serch-box #searchform .select {
width: 100%;
margin-bottom: 2.5%
}
#serch-box #searchform select {
width: 100%
}
#serch-box #searchform #s {
width: 100%;
display: block;
margin-bottom: 2.5%
}
#serch-box #searchsubmit {
margin: auto
}
}
@media screen and (max-width:899px) {
#gnav {
display: none
}
}
@media screen and (max-width:1120px) {
.inner {
box-sizing: border-box
}
.blog-box {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box
}
#line-assessment .btn img {
width: 100%
}
}
@media screen and (max-width:1099px) {
#header-logo img {
width: 100%
}
.service-box ul {
padding-left: 10px;
padding-right: 10px
}
.blog-box {
display: block
}
.blog-box h3 {
text-align: center;
padding-right: 0;
margin-bottom: 25px
}
.blog-box ul {
width: 768px;
margin: auto;
text-align: center
}
.blog-box .btn {
margin: auto;
width: 150px;
height: 65px;
line-height: 65px
}
#line-assessment .box .min-box,
#line-assessment .box .min-box ul li {
width: 49%
}
#line-assessment .box .min-box ul img {
width: 100%
}
#line-assessment .box .min-box .color-box {
line-height: 1.8;
height: auto;
padding: 2.5% 5%;
text-align: left
}
.scroll {
overflow: auto;
white-space: nowrap
}
.scroll::-webkit-scrollbar {
height: 5px
}
.scroll::-webkit-scrollbar-track {
background: #f1f1f1
}
.scroll::-webkit-scrollbar-thumb {
background: #bcbcbc
}
.scroll:before {
content: "横にスクロールしてください";
display: inline-block;
margin: 0 0 3px;
padding: 3px;
color: #fff;
background: #26a65b
}
.list .blog_li {
width: 32%;
}
}
.sp-only {
display: none
}
@media screen and (max-width:851px) {
#line-assessment .box ol img {
width: 100%
}
#line-assessment .box .item-box .color-box {
width: 100%;
margin-bottom: 5%
}
}
@media screen and (max-width:767px) {
.sp-only {
display: block
}
body,
html {
font-size: 62.5%
}
#blog {
flex-flow: column-reverse;
}
.detail-box {
padding: 6% 0 4%
}
.blog-box {
padding-top: 6%;
padding-bottom: 4%
}
.blog-box h3 {
font-family: "Noto Sans JP", 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 700;
border: none
}
.detail-box h3 .icon {
width: 28px;
margin: 0 auto 10px
}
.service-box li {
width: 32%
}
.service-box .cap {
margin-bottom: 12px
}
.service-box p {
font-size: 11px;
line-height: 1.5
}
.service-box {
padding: 6% 0
}
#header-logo {
width: 80%
}
header {
margin: 0;
width: 100%;
height: 51px
}
#gnav,
#head-btn {
display: none
}
img {
width: 100%;
height: auto
}
.blog-box ul {
width: 100%;
height: 350px;
overflow-y: scroll;
margin-bottom: 8%
}
.BLOG h4 {
font-size: 16px;
font-weight: 700;
padding-bottom: 20px;
margin-bottom: 10px;
border: 5px solid #f0f0f0;
padding: 1rem;
color: #525263;
position: relative
}
.blog-box .btn {
width: auto;
height: auto;
line-height: 1.8;
padding: 15px 0
}
.blog-box li {
padding-bottom: 10px;
margin-bottom: 10px
}
.blog-box time {
display: block;
width: 20%;
margin: 0;
padding: 0 10px;
letter-spacing: inherit
}
.blog-box .txt {
display: block;
text-align: left
}
.all_column a {
padding: 1rem 0;
margin-bottom: 2rem
}
#blog .sidebar h2 {
font-weight: 700;        
font-size: 16px;
margin-bottom: 1rem;
}
#blog .sidebar .tagarea h2{
margin-top: 1rem;
position: relative;
}
#blog .sidebar .tagarea h2::after{
content: "";
background: url(https://kaitori-toolup.com/img/icons/icon_arrow.svg) no-repeat center center;
background-size: 15px;
width: 15px;
height: 15px;
transform: rotate(180deg);
position: absolute;
right: 0;
top: -12px;
padding: 2px;
border: 2px solid #b9c5b9;
border-radius: 50%;
}
#blog .sidebar .tagarea h2.active {
border: none;
}
#blog .sidebar .tagarea h2.active::after{
transform: rotate(0deg);
}
.BLOG .archive {
margin-top: 0;
border-bottom: 1px solid #ccc
}
footer {
padding: 0 0 12px
}
#footer-nav {
padding-top: 0
}
#footer-nav ul {
background: #eee;
border-radius: 4px;
box-sizing: border-box;
padding: 0;
border-top: 1px solid #c9c9c9
}
#footer-nav ul li {
display: block;
margin: 0
}
#footer-nav ul li a {
padding: 20px 12px;
color: #000;
border-bottom: 1px solid #c9c9c9;
font-size: 12px
}
address {
margin-bottom: 1rem
}
.detail-box h4 {
padding: 5% 2.5%
}
.detail-box h4 .text {
font-size: 1.2em
}
.pagevisual {
min-height: 100px;
background-size: cover;
background-position: center center
}
main .page-title .icon {
width: 27px;
margin: 0 auto 15px
}
#flow li {
display: block;
margin: 0 auto 15%;
padding-bottom: 15%
}
#flow li .data {
width: 100%;
padding: 0;
margin-bottom: 5%
}
#flow li h4 {
font-size: 2em;
margin-bottom: 5%
}
#flow li h4 .item {
background: #26a65b;
color: #fff;
padding: 5px 0;
display: block;
width: 90px;
text-align: center
}
#flow li h4 .text {
display: block;
margin: 10px 0 0;
font-weight: 700
}
#flow li dt {
font-size: 1.6em;
line-height: 1.8;
margin-bottom: 0
}
#flow li dt br {
display: none
}
#flow li dd p {
font-size: 1.4em
}
#flow li dd .inline-text {
display: inline-block
}
#flow li dd .color-text {
color: #26a65b
}
#flow li dd .color-text.bg {
background: #26a65b;
color: #fff;
display: inline-block;
margin-right: 3%;
font-size: 12px;
padding: 3px 10px
}
#flow li .cap {
margin: auto;
width: 80%
}
#flow li:nth-child(even) .cap {
width: 50%
}
#not-covered .color-box,
#not-covered .list-box {
padding: 8% 5%
}
#not-covered .color-box h3 {
font-size: 2em;
margin-bottom: 2.5%
}
#not-covered .color-box p {
text-align: left;
font-size: 1.4em
}
#not-covered .list-box li {
font-size: 1.4em;
height: auto;
line-height: 1.8;
padding: 5% 0 5% 8%
}
#not-covered .list-box li::before {
top: 1.4em
}
#not-covered .list-box li::after {
top: 1.7em
}
#not-covered .list-box p {
font-size: 1.2em
}
#faq .tabs-box li {
font-size: 1.4em;
width: 49%;
margin-bottom: 2% !important
}
#faq .box dt {
padding: 15px 12px;
height: auto;
line-height: 1.8
}
#faq .box dt .text {
font-size: 1.4em
}
#faq .box dt .item {
font-size: 1.6em
}
#faq .box dd {
padding: 4%
}
#faq .box dd p {
font-size: 1.4em
}
#genre .box ul li,
.detail-box ul li {
width: 50%
}
#genre .box h4 {
height: auto;
line-height: 1;
padding: 5%;
font-size: 1.6em
}
#genre .box .cap,
.detail-box .cap {
width: 70%;
margin: 0 auto 10%
}
#genre .box p,
.detail-box p {
font-size: 1.4em
}
#line-assessment .inbox {
padding: 4%
}
#line-assessment .box ol li {
width: 100%;
margin-bottom: 4%
}
#line-assessment .box .item-box p {
font-size: 3.8em;
margin-left: 0;
display: block;
width: 100%;
box-sizing: border-box;
text-align: center
}
#line-assessment .box .item-box h5 {
font-size: 1.8em;
margin-bottom: 4%
}
#line-assessment .box .item-box li {
font-size: 1.4em
}
#line-assessment .box .min-box {
width: 100%
}
#line-assessment .box .min-box:first-of-type {
margin-bottom: 5%
}
#line-assessment .box .min-box ul {
margin-bottom: 5%
}
#line-assessment .box h3 {
height: 40px;
line-height: 40px;
text-align: left;
padding-left: 5%
}
#line-assessment .box .item {
width: 55px;
height: 55px;
right: 5px
}
#line-assessment .box ol h4 {
font-size: 1.8em;
margin-bottom: 2.5%
}
#line-assessment .box ol p {
font-size: 1.4em;
margin-bottom: 2.5%
}
#line-assessment .box ol img+p {
margin-top: 2.5%
}
#line-assessment .box:not(:last-of-type) {
margin-bottom: 10%
}
#line-assessment .box .color-box {
padding: 4%
}
#line-assessment .box .color-box .item-box {
width: 75%;
margin: 0 auto 2.5%;
font-size: 1.6em;
letter-spacing: .2em
}
#line-assessment .box .color-box p {
text-align: center;
font-size: 1.4em;
line-height: 1.8
}
#line-assessment .box dd,
#line-assessment .box dt {
width: 100%
}
#line-assessment .box dt {
margin-bottom: 5%
}
#serch-box {
padding: 15px 0;
margin-bottom: 32px
}
#topicpath {
margin-bottom: 0;
}
#topicpath ul {
width: auto;
flex-flow: wrap
}
.drawer-hamburger {
position: inherit;
width: 3rem
}
.drawer-nav {
z-index: 100
}
.drawer--right .drawer-nav {
width: 25rem
}
.drawer--right.drawer-open .drawer-hamburger {
right: 25.5rem
}
.drawer--right .drawer-nav {
right: -25rem
}
.drawer-menu {
padding: 5%
}
.drawer-menu li {
border-bottom: 1px solid #333
}
.drawer-menu a {
line-height: 2.7;
display: block;
font-size: 1.6em
}
.drawer-menu #btn-web {
margin-top: 8%
}
.drawer-menu .item-list {
text-align: center;
margin-bottom: 5%
}
.drawer-menu .sp-search {
border-bottom: none
}
.drawer-menu .sp-search #s {
border: 1px solid grey;
padding: 7.5% 5%;
box-sizing: border-box;
margin-bottom: 2.5%
}
.drawer-menu .sp-search input {
width: 100%;
display: block
}
.drawer-menu #btn-line {
margin-bottom: 20%
}
.drawer-menu .sp-search #searchsubmit {
background: grey;
color: #fff;
padding: 2.5% 0
}
.BLOG .btnArea .link {
padding: 20px 0;
display: block;
border: 1px solid #26a65b
}
#blog .container {
width: 100%;
float: none;
margin: 0
}
#blog .sidebar {
width: 100%;
max-width: 100%;
padding-top: 1rem;
margin-bottom: 3rem
}
.tagarea {
margin-bottom: 0
}
.tagarea .tag_list {
margin-top: 20px;
display: none
}
#rate .tabs-box li {
width: 49%;
margin: 0 2% 2% 0
}
#rate.tabs-box li:nth-child(2n+1) {
clear: both
}
#rate.tabs-box li:nth-child(2n+2) {
margin-right: 0 !important
}
#rate .tabs-box li:nth-last-child(-n+4) {
margin-bottom: 2%
}
#rate .tabs-box li:nth-last-child(-n+2) {
margin-bottom: 0
}
#rate.tabs-box li a {
height: 44px;
line-height: 44px
}
.tabs-box li:nth-child(2n+1) {
clear: both
}
.tabs-box li:nth-child(2n+2) {
margin-right: 0 !important
}
.tabs-box li:nth-last-child(-n+4) {
margin-bottom: 2%
}
.tabs-box li:nth-last-child(-n+2) {
margin-bottom: 0
}
#rate .rate-tabs-box .tabs-box li {
text-align: center;
float: none;
line-height: 40px;
height: 44px;
border-radius: 6px 6px 0 0;
cursor: pointer;
color: #fff;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border: none;
background: gray;
width: 24%;
margin-right: 1.3338%
}
#rate .rate-tabs-box .tabs-box li.active {
background: #353535
}
#rate .rate-tabs-box .tabs-box li:hover {
background: #26a65b
}
#rate .rate-tabs-box .minbox li.active {
background: gray
}
#rate .rate-tabs-box .minbox li a:hover {
background: gray;
color: #fff
}
#rate .rate-tabs-box .tabs-box {
border-bottom: 5px solid #353535;
margin-bottom: 15px
}
#rate .rate-tabs-box .minbox li {
position: relative;
background: #26a65b;
height: 44px;
line-height: 40px;
text-align: center;
width: 48%;
margin-bottom: 15px
}
#rate .rate-tabs-box .minbox li:not(:nth-child(4n)) {
margin-right: 1.3338%
}
#rate .rate-tabs-box .minbox li a {
display: block;
height: 44px;
line-height: 40px;
color: #fff;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
#top-banner {
width: 100%;
background: url(//kaitori-toolup.com/blog/wp-content/themes/kaitori/images/top/first_view.jpg) no-repeat center;
background-size: cover;
height: 620px
}
#top-banner .inner {
position: relative;
height: 620px
}
#top-banner .inner .text {
position: absolute;
top: 32px;
left: 0
}
#top-banner .inner .button {
width: 100%;
box-sizing: border-box;
padding: 0 12px;
position: absolute;
top: 310px;
left: 0
}
#top-banner .inner .button li {
display: block;
margin-right: 0;
margin-bottom: 18px;
text-align: center
}
#top-banner .inner .button li img {
max-width: 100%;
width: auto
}
#top-banner .inner .img {
display: block;
text-align: center;
position: absolute;
bottom: 0;
right: 0
}
#top-banner .inner .img img {
width: 50%
}
}
#top-banner #serch-box {
background: 0 0;
padding: 0 0 0 80px;
z-index: 1
}
#top-banner #serch-box #searchsubmit {
border: 1px solid #fff
}
#top-banner #serch-box select {
border-color: #fff
}
@media screen and (max-width:939px) {
#top-banner #serch-box {
flex-flow: row nowrap;
padding: 0 10px;
width: 100%;
box-sizing: border-box;
top: 155px
}
#top-banner #serch-box .select {
width: 100%;
flex-grow: 1;
margin-bottom: 0
}
#top-banner #serch-box #s {
width: 50px
}
#top-banner #serch-box #searchsubmit {
margin: 0;
width: 80px
}
}
.MAKER h4.border {
font-size: 24px;
font-weight: 700;
border-bottom: 1px solid #eee;
margin: 0 0 24px;
padding: 12px 0 12px 10px;
position: relative
}
.MAKER h4.border:before {
content: "";
width: 4px;
height: 80%;
background: #26a65b;
position: absolute;
top: 6px;
left: 0
}
.MAKER .makerList {
margin: 0 0 42px
}
@media screen and (min-width:769px) {
.MAKER .makerList li {
list-style: none;
width: 32%;
float: left;
margin: 0 2% 2% 0
}
.MAKER .makerList li:nth-child(3n+1) {
clear: both
}
.MAKER .makerList li:nth-child(3n+3) {
margin-right: 0
}
}
.MAKER .makerList li a {
display: block;
background: #26a65b;
color: #fff;
text-align: center;
font-size: 18px;
padding: 12px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
.MAKER .makerList li a:hover {
background: #269247
}
@media screen and (max-width:768px) {
.MAKER .makerList li {
list-style: none;
width: 100%;
margin: 0 0 2%
}
.list .archive_cate_list a{
font-size: 10px;
}
.BLOG .list{
margin: 0 auto;
}
}
#toc_container{
width: 100% !important;
}
.tab_item {
margin-bottom: -10px;
padding-bottom: 10px;
width: 50%;
height: 50px;
border: 5px solid #f0f0f0;
border-bottom: none;
background-color: #f0f0f0;
line-height: 50px;
font-size: 12px !important;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
box-sizing: border-box;
cursor: pointer;
}
.tab_item:hover {
opacity: 0.75;
}
input[name="tab_item"],
input[name="tab_item2"] {
display: none;
}
.tab_content {
padding: 20px 5px 10px;
display: none;
clear: both;
overflow: hidden;
border: 5px solid #f0f0f0;
border-top: none;
}
#all:checked ~ #all_content,
#all2:checked ~ #all_content2,
#programming:checked ~ #programming_content,
#programming2:checked ~ #programming_content2,
#design:checked ~ #design_content {
display: block;    
}
.tabs input:checked + .tab_item {
background-color: #fff;
padding-top: 5px;
margin-top: -5px;
height: 55px;
} .rank_item-thumb img{
max-width: 460px;
width: 100%;
}
.single .BLOG .rank::before{
display: none;
}
.ftr_fixed_menu{
position: fixed;
bottom: 0;
left: auto;
right: auto;
width: 100%;
height: 60px;
background-color: rgba(59, 59, 59 ,.95);
display: flex;
align-items: center;
justify-content: center;
box-shadow: -5px 5px 5px #000;
}
#ftr_btn_line {
width: 100%;
}
#ftr_btn_line a{
width: 95%;
margin: 0 auto;
background: #00b900;
color: #fff;
border-radius: 8px;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
height: 50px;
}
#ftr_btn_line img,
#ftr_btn_line2 img,
#ftr_btn_web img {
margin-right: 3px;
max-width: 50px;
max-height: 100%;
}
#ftr_btn_web img {
max-width: 35px;
}
#ftr_btn_web,
#ftr_btn_line2 {
width: 50%;
}
#ftr_btn_web a{
width: 95%;
margin: 0 auto;
background: #b6370f;
color: #fff;
border-radius: 8px;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: bold;
height: 50px;
}
#ftr_btn_line2 a{
width: 95%;
margin: 0 auto;
background: #00b900;
color: #fff;
border-radius: 8px;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: bold;
height: 50px;
}
@media screen and (min-width:768px) {
.ftr_fixed_menu{
display: none;
}
} .category_part_wrap{
margin: 0 auto;
padding: 20px 20px 0 20px;
max-width: 1118px;
width: 98%;
border: 3px solid #26A65B;
border-radius: 8px;
font-size: 16px;
}
.category_part_inner{
margin: 0 20px;
}
.category_part_title{
padding-bottom: 10px;
margin-bottom: 20px;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid #26A65B;
}
.category_part_title p{
margin: 0;
padding: 0;
color: #333;
font-weight: bold;
}
.acordion_tag_title{
position: relative;
}
.acordion_tag_title p{
margin: 0;
font-weight: 500;
line-height: 1;
}
.category_part_heading{
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
color: #4e4e4e;
}
.accordion_title{
font-size: 17px;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #999999;
}
.accordion_title a{
margin-left: 5px;
font-weight: bold;
color: #636363;
}
.accordion_title a:hover{
transition:.5s;
opacity: .7;
}
.accordion_text {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
}
.accordion_text p{
width: 20%;
line-height: 1.2;
margin:0 0 1.6em 0;
display: flex;
font-size: 14px;
font-weight: 600;
color: #0066C0;
position: relative;
}
.accordion_text p:before{
margin-top: .2em;
margin-right: 6px;
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #aaa;
border-right: 0;
}
.accordion_text a:hover{
transition:.5s;
background-color: rgba(255,255,255,0.5);
}
.accordion_text p:last-of-type::after{
display: none;
}
.accordion_text p a{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.accordion_text + .category_part_heading{
margin-top: 40px;
}
.category_part_pc{
display: block;
}
.category_part_mb{
display: none;
}
@media screen and (max-width:767px) {
.category_part_pc{
display: none;
}
.category_part_mb{
display: block;
}
.category_part_mb .sidebar{
margin-top: 40px;
}
.category_part_inner{
margin: 0;
}
.accordion_text p{
width: 25%;
}
} .related_article_columns_wrap{
margin: 50px 0 5rem;
width: 100%;
}
.related_article_columns_title{
padding: 10px 5px;
margin-bottom: 10px;
color: #fff;
font-size: 15px;
font-weight: bold;
background-color: #424242;
}
.related_article_columns{
padding: 5px 0;
margin-bottom: 10px;
display: flex;
position: relative;
border-bottom: 1px solid #ccc;
}
.related_article_columns img{
margin-right: 5px;
width: 110px;
height: 70px;
align-self: flex-start;
object-fit: cover;
flex-shrink: 0;
}
.related_article_columns p{
padding: 0;
margin: 0 0 10px 0;
min-height: 3em;
font-size: 12px;
line-height: 1.4;
}
.related_article_columns a{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.related_article_columns a:hover{
transition:.5s;
background-color: rgba(255,255,255,0.5);
}
@media screen and (max-width:640px) {
.BLOG .list_normal li {
width: 100%;
margin-bottom: 30px;
}
.list .blog_li {
width: 48%;
}
.accordion_text p{
width: 33%;
}
.category_part_title p{
font-size: 16px;
}
.archive_flex_even{
display: block;
}
.archive_flex_odd{
display: none;
}
}
@media screen and (max-width:480px) {
.category_part_heading{
font-size: 16px;
}
.accordion_text p {
width: 50%;
}
}
@media screen and (min-width: 768px) {
.contents.col-10 {
flex:auto
}
main#faq,main#flow,main#not-covered {
font-weight: 400;
font-family: -apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
font-size: 16px
}
.bread ul {
width: 100%
}
.assess h2 {
font-size: 1.6rem
}
.assess form ul {
padding-top: 0;
margin-bottom: 0
}
.assess table th {
padding-left: 0;
display: flex;
align-items: center
}
.assess table td {
padding: 0;
margin-bottom: 3rem
}
.form.assess label {
margin-bottom: 0
}
.assess .item_field div {
margin-bottom: 0
}
.assess .item_field div {
margin-bottom: 3rem
}
.assess td textarea {
margin-top: .3rem
}
.form.assess fieldset {
max-width: 90rem
}
.ftr_fixed_menu {
display: none
}
}
.contact_area {
margin: 20px 0 60px;
padding: 60px 0;
background-color: #26a65b;
text-align: center;
color: #fff
}
.contact_area  img{
width: 98%;
}
.contact_area article {
margin: 0 auto;
padding: 0 20px;
width: 100%;
max-width: 960px;
box-sizing: border-box;
padding: 0 20px
}
.contact_area .pc {
display: none
}
.contact_area a {
display: block;
margin-bottom: 5px
}
.point_box {
background: #fff;
padding: 8px;
margin: 24px auto 0;
position: relative;
border-radius: 8px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
text-align: center;
font-size: 15px
}
.point_box::before {
content: "";
width: 16px;
height: 16px;
transform: rotate(45deg) translateX(-50%);
background: #fff;
position: absolute;
left: 50%;
top: 0
}
.point_box_title {
font-size: 18px;
color: #085400;
font-weight: 700;
margin-top: 20px
}
ul.point_box_checkbox {
margin: 0;
padding: 8px 0 0 15px
}
ul.point_box_checkbox>li {
list-style: none!important;
text-align: left!important;
color: #085400;
font-weight: 700;
font-size: 14px!important;
margin: 0!important;
padding: 8px 0!important
}
ul.point_box_checkbox>li>svg {
margin: 0 10px 0 0;
width: 14px;
height: 14px;
fill: #085400
}
.contact_area a.tel-txt {
padding: 15px 0;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #fff;
text-decoration: none
}
.tel-txt p {
line-height: 1.4;
margin-bottom: 0
}
.tel-txt p:first-child {
font-size: 1.4rem;
font-weight: 700
}
.tel-txt p:last-child {
padding: .5rem 0 0;
font-size: 2.2rem;
font-family: Arial,serif;
font-weight: 700;
line-height: .9;
display: flex;
align-items: center;
justify-content: center
}
.tel-txt p:last-child svg {
width: 5.4rem;
height: 5.4rem;
fill: #fff;
padding-top: 10px;
display: none
}
.tel-txt p:first-child span {
font-size: .7em;
font-weight: 400
}
.points_box {
text-align: center;
font-size: 15px
}
@media screen and (min-width: 768px) {
.top_page .contact_area {
margin:80px 0 9.4vw;
padding: 60px 0
}
.contact_area a {
padding: 0
}
.contact_area .sp {
display: none
}
.contact_area .pc {
display: block
}
.contact_area article {
padding: 0
}
.tel-txt {
display: flex!important;
justify-content: space-around;
align-items: center
}
.tel-txt p:first-child {
font-size: 20px;
width: 45%
}
.tel-txt p:first-child span {
font-size: 14px
}
.tel-txt p:last-child {
font-size: 54px;
width: 50%
}
}
.rate .container.row {
flex-flow: column
}
.rate .left_menu {
min-width: auto;
max-width: 100%;
padding: 0 20px;
background-color: transparent
}
.rate .left_menu h2 {
margin: 0 0 5px;
padding: 0 0 5px;
color: #525263;
font-weight: 600;
font-size: 15px;
border-bottom: 2px solid #ccc
}
.rate .left_menu ul li {
width: 100%;
flex-shrink: 0
}
.rate .left_menu ul li a {
font-size: 14px;
color: #000;
padding: 5px 0;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: flex-start
}
.rate .left_menu ul li a:hover {
cursor: pointer
}
.rate .left_menu li a:after {
display: none
}
.rate .left_menu .main_cate,.rate .left_menu ul .sub_cate {
height: 32px;
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-start;
overflow-x: scroll;
overflow-y: hidden
}
.rate .left_menu .main_cate li,.rate .left_menu ul .sub_cate li {
width: auto
}
.rate .left_menu .main_cate li.active,.rate .left_menu ul .sub_cate li.active {
font-weight: 600;
color: #525263
}
.rate .left_menu ul .sub_cate li.active a,.rate .left_menu ul li.active a {
font-weight: 600;
color: #26a660;
line-height: 1.2
}
.left_menu li a:after {
background: 0 0
}
.rate .left_menu .main_cate li a,.rate .left_menu ul .sub_cate li a {
padding: 0 10px 0 5px;
border-right: 1px solid #ccc
}
.rate .left_menu ul .sub_cate li:first-child a {
padding-left: 0
}
.rate .left_menu .main_cate li:last-child a,.rate .left_menu ul .sub_cate li:last-child a {
border-right: none
}
@media screen and (min-width: 768px) {
.rate .container.row {
flex-flow:row;
max-width: 1118px
}
.rate .cate_area {
max-width: 1118px;
margin-bottom: 1rem
}
.rate .left_menu {
min-width: 150px;
max-width: calc((100% / (12/2)) - 20px);
background-color: transparent;
padding: 20px 0
}
.rate .left_menu .main_cate,.rate .left_menu ul .sub_cate {
margin-top: 5px;
margin-left: 10px;
display: block;
overflow: auto;
height: auto
}
.rate .left_menu ul li a {
padding: 5px 0
}
.rate .left_menu .main_cate li a,.rate .left_menu ul .sub_cate li a {
border: none;
padding: 5px 0;
margin-right: 0;
line-height: 1.2
}
.rate .container .col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/10)) - 5px);
flex: 0 0 calc((100% / (12/10)) - 5px);
width: calc((100% / (12/10)));
max-width: calc((100% / (12/10)));
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 40px
}
.rate .item_detail_list {
flex-flow: wrap
}
.rate .item_detail_list .cate_price_outer {
width: calc(100% - (180px + 162px))
}
.rate .cate_price.col {
min-width: auto;
max-width: calc(100% / 3)
}
.rate .item_detail_list .cate_jan_code {
min-width: auto;
max-width: calc(100% / 3)
}
.rate .cate_button_satei {
min-width: 160px;
width: 162px
}
.rate .cate_button_satei .button {
padding: 10px 15px;
margin: 0 10px
}
}
@media screen and (min-width: 768px) and (max-width:959px) {
.cate_price .price_h,.cate_price .price_l {
font-size:18px
}
.item_detail_list .jan {
line-height: 1.1;
margin-top: 5px
}
}
@media screen and (max-width: 1000px) {
.contact_area a {
padding:0 20px
}
}
.ftr_nav{
background-color: #f5f6f8;
}
footer .nav ul{
padding: 0;
}
.nav_ttl{
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: column;
}
.toggle_btn{
padding: 15px 15px;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border-bottom: 1px solid #dedede;
margin-bottom: 5px;
font-size: 18px;
color: #333;
}
.ul_sub{
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: wrap;
width: 100%;
}
.ul_sub li{
width: 50%;
}
footer li a{
padding: 15px 15px;
}
footer li a,
.ul_sub li a{
width: 100%;
padding: 5px 15px;
display: flex;
justify-content: flex-start;
align-items: center;
color: #333;
font-size: 14px;
}
.dli-plus {
display: inline-block;
vertical-align: middle;
color: #333;
line-height: 1;
width: 1em;
height: 1px;
background: currentColor;
border-radius: 0.1em;
position: relative;
margin-left: auto;
transform-origin: center center;
transition-duration: 0.2s;
}
.div_sub.open{
margin-bottom: 30px;
}
.dli-plus::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform-origin: center center;
transform: rotate(90deg);
}
.toggle_btn.open .dli-plus{
transform: rotate(-180deg);
}
.toggle_btn.open .dli-plus::before{
content: none;
}
footer .nav ul:nth-child(5){
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: wrap;
margin-top: 10px;
margin-bottom: 30px;
}
footer .nav ul:nth-child(5) .nav_ttl:not(.ttl_link){
display: none;
}
footer .nav ul:nth-child(5) .nav_ttl.ttl_link,
footer .nav ul:nth-child(5) .nav_sub{
width: 50%;
}
footer .nav ul:nth-child(5) .nav_sub a,
footer .nav ul:nth-child(5) .nav_ttl.ttl_link a{
justify-content: center;
letter-spacing: normal;
}
@media screen and (min-width: 640px){
.ftr_nav{
display: flex;
justify-content: center;
align-items: flex-start;
margin-bottom: 2rem;
}
footer .nav{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-flow: row;
padding: 30px;
max-width: 1040px;
}
footer .nav > ul{
width: 20%;
}
.ul_sub li{
width: 100%;
}
.toggle_btn{
font-size: 15px;
padding: 0;
border-bottom:none;
}
.dli-plus{
display: none;
}
footer li a, .ul_sub li a,
footer .nav ul:nth-child(5) .nav_ttl.ttl_link a{
font-size: 13px;
color: #848484;
padding: 5px 0;
}
footer .nav ul:nth-child(5){
margin-top: 0;
margin-bottom: 0;
align-items: flex-start;
}
footer .nav ul:nth-child(5) .nav_ttl:not(.ttl_link){
display: flex;
font-size: 15px;
}
footer .nav ul:nth-child(5) .nav_ttl:nth-child(4){
margin-top: 30px;
}
footer .nav ul:nth-child(5) .nav_sub{
width: 100%;
}
footer .nav ul:nth-child(5) .nav_sub a{
justify-content: flex-start;
padding: 5px 0;
font-size: 13px;
color: #848484;
}
footer .nav ul:nth-child(5) .nav_ttl.ttl_link a{
font-size: 15px;
padding: 5px 0 0;
margin-top: 30px;  
margin-bottom: 5px;
color: #333;
justify-content: flex-start;
}
}