@import url("default.css");

* {-webkit-text-size-adjust:100%;}
a:link {text-decoration:none; color:#4c4948;}
a:visited{text-decoration:none; color:#4c4948;}
a:hover{text-decoration:none; color:#4c4948;}
a:active{text-decoration:none; color:#4c4948;}
@font-face {
	font-family: 'DINPro Medium';
	font-style: normal;
	font-weight: normal;
	src: local('DINPro Medium'), url('fonts/DINPro-Medium tr.woff') format('woff');
}
@font-face {
    font-family: 'DINPro-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('DINPro-Bold'), url('DINPro-Bold.woff') format('woff');
}
.din-medium { font-family: 'DINPro Medium'; font-weight: normal;}
.din-bold { font-family: 'DINPro-Bold'; font-weight: bold;}
.grecaptcha-badge { opacity: 0;}
h1,h2,h3,h4 { font-weight: bold;}
body { font-size: .18rem; line-height: 1.8; background-color: #fff; color: #254451; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; font-weight: 500; position: relative;}
header { position: absolute; width: 100%; top: 0; left: 0; z-index: 997; transition: .4s;}
header .wrapper{ height: 140px; position: relative; transition: .4s; display: flex; -webkit-align-items: center; align-items: center; justify-content: space-between;}
header.trans { background: none;}
header.trans.header_sizing { background: rgba(255,255,255,.5);}
header .container-fluid { max-width: 1400px; margin: 0 auto;}
header .logo { display: inline-block; transition: .4s; max-width: 280px; /* filter: drop-shadow(0px 0px 10px rgba(255,255,255,0.6)); */ }
header .logo img { transition: .4s;}
header .gnav {}
header .gnav > li { display: inline-block; line-height: 40px; position: relative; letter-spacing: .1em;}
header .gnav > li > a { display: block; font-size: .17rem; line-height: .21rem; padding: 0 .08rem; font-weight: normal; position: relative; transition: .3s; font-weight: bold;}
header .gnav > li > a:before { background: #fff; content: ""; z-index: 1; height: 1px; position: absolute; left: 0; right: 0; bottom: -10px; margin: auto; width: calc(100% - .3rem); transform: scale(0, 1); transform-origin: right center 0; -webkit-transform: 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);}
header .gnav > li > a:hover:before {transform: scale(1, 1);transform-origin: left center 0;}
header .gnav .lg a { display: block; background: #595757; color: #fff; padding: .2em .7em .3em; margin-left: .2rem;}
header .menu-trg-area { width: 50px; height: 50px; position: absolute; top: 0; right: 0; bottom: 0; display: none!important; margin: auto 0;}
header .menu-trigger,
header .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
header .menu-trigger { position: absolute; right: 5px; top: 0; width: 30px; height: 35px; z-index: 2;}
header .menu-trigger span { position: absolute; left: 0; width: 100%; height: 1px; background-color: #595757;}
header .menu-trigger span:nth-of-type(1) { top: 15px;}
header .menu-trigger span:nth-of-type(2) { top: 24px;}
header .menu-trigger span:nth-of-type(3) { bottom: 0;}
header .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(20px) rotate(-45deg); transform: translateY(20px) rotate(-45deg); top: 5px;}
header .menu-trigger.active span:nth-of-type(2) { left: 50%; opacity: 0; -webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards;}
header .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-20px) rotate(45deg); transform: translateY(-20px) rotate(45deg); bottom: -11px;}
/*footer { border-top: 1px solid rgba(255,255,255,.25);}*/
footer .copyright { padding: 35px 0; text-align: center; font-size: 13px; letter-spacing: .2em; background: #254451; color: #fff; border-top: 1px solid rgba(255,255,255,.25);}
.en { font-weight: normal;}
.din,.slug { font-family: DINPro Medium;}
.link_btn { background: #e50012; color: #fff!important; font-weight: bold; width: 330px; max-width: 100%; font-size: .2rem; letter-spacing: .1em; display: flex; align-items: center; justify-content: center; border-radius: .5rem; height: .6rem; margin: 0 auto; transition: .3s;}
.link_btn:hover { opacity: .7;}
.bg-gray { background: #fbfbfb; }
.bg-gray2 { background: #f4f5f7; }
.hight-bg-gray { background: #e9e9e9;}
.container-fluid { max-width: 1190px; padding-left: 30px; padding-right: 30px;}
.beta-title { background: #e50012; color: #fff; font-weight: bold; font-size: 37px; letter-spacing: .1em; text-indent: .1em; padding: .3em; text-align: center; margin-bottom: 30px;}
.logo .part1 { margin-bottom: 12px; /* background-color: rgb(255,255,255,0.8); */ padding: 13px; border-radius: 10px;}
.item-faq { margin-bottom: 30px;}
.item-faq .q { border-radius: 20px 20px 0 0; background: #254451; color: #fff; position: relative; display: flex; align-items: center; padding: 15px 70px 15px 25px; cursor: pointer;}
.item-faq .q .icon { width: 55px; line-height: 1;}
.item-faq .q .title { width: calc(100% - 55px); font-weight: bold; font-size: 24px; margin-top: 5px;}
.item-faq .q .arrow { right: .35rem; top: 0; bottom: 0; margin: auto 0; position: absolute;}
.item-faq .a { border-radius: 0 0 20px 20px; display: flex; border: 3px solid #254451; align-items: end; overflow: hidden; height: 0; padding: 0; background: #fff;}
.item-faq .a .icon { color: #FF5593; line-height: 1; width: 55px;}
.item-faq .a .content { width: calc(100% - 55px); font-size: 24px;}
.item-faq .q.active + .a { padding: 25px; height: auto;}
.item-price { /*border: 3px solid #fff;*/ margin-bottom: .3rem; background: #fff;}
.item-price h3 { background: #e50012!important; line-height: 1; font-size: .2rem; text-align: center; padding: 1em .5em 1.1em; letter-spacing: .1em;}
.item-price figure { margin-bottom: 0;}
.item-price .p-price { font-weight: bold; padding: .5em; font-size: .24rem; text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; line-height: 1.5; color: #212529;}
.item-price .p-price p { width: 100%;}
.item-price .p-price span { font-size: .14rem;}
.item-price .p-price strong { padding: 0 5px;}
.item-price .p-text { color: #212529; padding: 0 15px 15px;}
.item-price .p-text strong { display: block; border: 1px solid #ccc; text-align: center; font-size: .16rem; margin-bottom: .1rem;}
.item-price .p-text p { font-size: .14rem;}
.check-list { margin: 0 -20px 0; font-size: 0; letter-spacing: 0;}
.check-list li { display: inline-block; width: 50%; padding: 0 20px; font-size: 18px; letter-spacing: .08em; font-weight: normal; line-height: 1.3; vertical-align: bottom;}
.check-list li div { border-bottom: dashed 2px #231815; position: relative; padding: 15px 0 15px 53px;}
.check-list li div:before { content: ""; background-image: url(../images/icon-check.svg); width: 42px; height: 34px; background-size: cover; position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0;}
.item-card { padding: .3rem; background-color: rgb(255, 255, 255); box-shadow: 0px 8px 16px 0px rgba(205, 190, 255, 0.2); height: 100%;}
.item-card .title { font-size: .2rem; margin-bottom: .15rem;}
.item-card p { font-size: .14rem;}
/*.carousel-slider:before { content: ""; position: absolute; top: 0; right: 100%; width: 100vw; height: 100%; background: #fff; z-index: 1;}*/
.carousel-slider .slick-list { margin: 0 -15px; overflow: visible;}
.carousel-slider .slick-slide { margin: 0 15px;}
.carousel-slider .slick-prev { display: none!important;}
.carousel-slider .slick-next { font-size: 0; line-height: 0; position: absolute; right: -.3rem; display: block; width: .6rem; height: .6rem; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; background: #fff; border-radius: 50%;}
.carousel-slider .slick-next:before { content: ''; width: .25rem; height: .25rem; border: 0px; border-top: solid 4px #333; border-right: solid 4px #333; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; left: -.1rem; bottom: 0; right: 0; margin: auto;}
.slider-block { border: 1px solid #254451;; display: block; height: 100%; background: #fff;}
.slider-block > div { padding: .2rem .15rem .15rem;}
.slider-block .post-days { color: #979797; font-size: 12px;}
.slider-block .post-title { font-weight: bold; line-height: 1.6; margin: .1rem 0; transition: .3s;}
.slider-block .post-description { color: #979797; font-size: 12px;}
.slider-block:hover .post-title { color: #e50012;}
.page-hero { display: flex; -webkit-align-items: center; align-items: center; height: 3.7rem; -webkit-justify-content: center; justify-content: center; text-align: center; padding: 0; padding-top: .5rem!important;}
.page-hero .jp { display: block; font-weight: bold; font-size: .34rem; letter-spacing: .1em; margin-bottom: .1rem;}
.page-hero .en { display: block; font-weight: bold; font-size: .21rem; letter-spacing: .09em;}.page-hero {}
@media (min-width: 991px) {
	.v-rl { position: relative; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; display: inline-block; text-align: justify; text-justify: inter-ideograph;}
}
@media (max-width: 767px) {
	.check-list li { width: 100%; font-size: 16px;}
	.check-list li div { padding-left: 29px;}
	.check-list li div:before { width: 22px; height: 18px;}
}
@media (max-width: 575px) {
	.item-faq .q { padding: 13px 35px 13px 19px;}
	.item-faq .q .icon { width: 40px;}
	.item-faq .q .title { width: calc(100% - 40px); font-size: 14px;}
	.item-faq .q .icon img { width: 30px;}
	.item-faq .q.active + .a { padding: 15px;}
	.item-faq .a .icon { width: 40px;}
	.item-faq .a .icon img { width: 30px;}
	.item-faq .a .content { font-size: 14px;}
	.item-faq .q .arrow { right: 12px; width: 15px;}
}

main > section { padding: 70px 0 70px;}
.section-title { text-align: center; margin-bottom: .8rem;}
.section-title .slug { font-size: .24rem; margin-bottom: 10px; color: #e50012;}
.section-title .jp { font-size: .53rem; letter-spacing: .075em; line-height: 1.4; font-weight: bold;}
.section-title .en { font-size: .14rem; letter-spacing: .025em; margin-top: 12px;}
#siteWrapper { overflow: hidden;}
#firstView { background-size: cover; background-position: center; background-color: #f0f0f0; position: relative; padding: 130px 0 50px; text-align: center; min-height: 100vh; overflow: hidden; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;}
#firstView .scroll { position: absolute; left: 1rem; bottom: 40px;}
#firstView .scroll span { padding-bottom: 5px; left: -3px; line-height: 1; font-size: 13px; position: relative; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; display: inline-block; text-align: justify; text-justify: inter-ideograph;}
#firstView .scroll > div { position: relative; height: 85px;}
#firstView .scroll > div:before { content: ""; position: absolute; bottom: -1px; left: 4.5px; height: 18px; width: 1px; background: #4c4948; transform: rotate(30deg);}
#firstView .scroll > div> div{ position: absolute; left: 0; bottom: 0; display:block; width:1px; background:#4c4948; animation:2.5s ease-in 1s infinite alternate forwards running expansion;}
#firstView h2 { font-size: .35rem; letter-spacing: .075em; line-height: 1.5; position: absolute; right: 0; left: 9rem; margin: 0 auto; font-weight: bold;}
#about ul { display: flex; flex-wrap: wrap;}
#about ul li { width: 20%; text-align: center;}
#about ul li p { font-size: .24rem; margin-top: .05rem; font-weight: bold;}

.contents ul li .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.contents ul li i { height: 30px; width: 30px; line-height: 30px; text-align: center; border-radius: 50%; /* background: #254451; */ padding-left: 3px; margin-right: 10px; transition: .4s; display: inline-block; color: #254451;}
.contents ul li { margin-top: 10px; list-style: none;}

#faq { background-color: #fbfbfb;}
#faq .section-title { margin-bottom: .55rem;}
#features .label { font-size: .36rem; letter-spacing: 0; margin-bottom: .1rem; color: rgb(229, 0, 18);}
#features .features_title { font-size: .36rem; letter-spacing: .1em; font-weight: bold; margin-bottom: .2rem;}
#features .caption { color: #647589; margin-bottom: .2rem;}
#case { padding: .35rem 0 .65rem; background: #254451;}
#case .section-title { margin-bottom: .3rem;}
#case .section-title .slug { color: #fff;}
#case .wrapper { background: #fff; position: relative; padding: 100px 45px 45px;}
#case .wrapper h3 { margin-bottom: .2rem;}
#case .wrapper .wrap { border-bottom: dashed 2px #CF477C; padding: 0 0 50px; margin-bottom: 50px;}
#case p { font-size: .24rem; background: linear-gradient(#ccc 1px, transparent 1px) #fff; background-size: auto 2em; line-height: 2em; border-bottom: 1px solid #ccc; overflow: hidden; font-weight: bold; position: relative;}
#case p:before { content: ""; position: absolute; height: 2px; width: 100%; left: 0; top: 0; background: #fff;}
#case2 { background: #254451; padding-top: 0;}
#scene h2 { margin-bottom: .55rem;}
#scene .wrap { margin-bottom: 30px;}
#scene .wrap h3 { margin-top: 18px; font-size: .22rem; letter-spacing: .025em;}
#scene .wrap p { margin-top: 5px; font-size: .15rem; letter-spacing: .025em; font-weight: normal;}
#scene .p2 { font-size: .27rem; letter-spacing: .025em;}
#oem { padding-bottom: 120px;}
#howto { padding: 140px 0 120px;}
#howto .number { font-size: 25px; margin-bottom: 25px;}
#howto .wrap figure { margin-bottom: 25px;}
#product h2 { margin-bottom: 60px;}
#product h3 { text-align: center; line-height: 1.8; margin-bottom: 15px;}
#product .p1 { margin-bottom: 10px; font-size: 24px; letter-spacing: -.025em; color: #231815;}
#product .p2 { text-align: center; font-size: 13px;}
#product .p3 { text-align: center; font-size: 13px; margin-top: 30px;}
#price { background: #254451; color: #fff;}
#price .section-title { margin-bottom: .5rem; color: #fff;}
#price .section-title .slug { color: #fff;}
#price #spec_2 .wrapper { background: #fff; color: #254451; padding: 0 30px 20px;}
#price #spec_2 .wrapper .beta-title { background: #e50012!important; line-height: 1; font-size: .2rem; text-align: center; padding: 1em .5em 1.1em; letter-spacing: .1em; margin-left: -30px; margin-right: -30px;}

/* 20201228 */
#spec_2 .check-list div { position: relative;}
#spec_2 .check-list .sub { margin-left: 40px; font-weight: bold; font-size: 14px;}
#spec_2 .notice { font-size: 12px; padding-top: 20px; text-align: center;}

#price .price-table .plan { background-color: #fff; border-radius: 10px; color: #4c4948; padding: 20px;}
#price .price-table .plan-a { border: 3px solid #777;}
#price .price-table .plan-a .plan-name { color: #fff; background-color: #777; display: block; margin: -20px -20px 20px; padding: 10px 20px;}
#price .price-table .plan-b { border: 3px solid #e50012;}
#price .price-table .plan-b .plan-name { color: #fff; background-color: #e50012; display: block; margin: -20px -20px 20px; padding: 10px 20px;}
#price .price-table .plan-c { border: 3px solid #00A82D;}
#price .price-table .plan-c .plan-name { color: #fff; background-color: #00A82D; display: block; margin: -20px -20px 20px; padding: 10px 20px;}
#price .price-table .plan-d { border: 3px solid #2F6BB3;}
#price .price-table .plan-d .plan-name { color: #fff; background-color: #2F6BB3; display: block; margin: -20px -20px 20px; padding: 10px 20px;}

#price .price-table .plan-d .scroll { overflow: auto; white-space: nowrap;}
.scroll::-webkit-scrollbar{	height: 5px;}
.scroll::-webkit-scrollbar-track{	background: #F1F1F1;}
.scroll::-webkit-scrollbar-thumb {	background: #BCBCBC;}
#price .price-table .plan-d table { margin-bottom: 0; width: 100%;}
#price .price-table .plan-d table .th td { background-color: #F2F2F2;}
#price .price-table .plan-d table td { padding: .15rem; vertical-align: middle; border-bottom: 1px solid #dee2e6; border-right: 1px solid #dee2e6; border-left: 1px solid #dee2e6; font-size: 14px;}
#price .price-table .plan-d table tr td:first-child { border-left: none;}
#price .price-table .plan-d table tr td:last-child { border-right: none;}


#price .price-table .plan-name { font-size: .2rem;}
#price .price-table p { font-size: 26px; margin-bottom: 10px; font-weight: bold;}
#price .price-table p:after { content: " / 月"; font-size: 12px;}
#price .price-table ul li { font-size: 14px;}
#price .price-table ul li i { margin-right: 10px;}
#price .price-table ul .sub { font-size: 10px; color: #555; margin-bottom: 10px; margin-left: 25px;}


#contact { padding-bottom: 1.2rem; background-color: #fbfbfb;}
#contact h2 { margin-bottom: 25px;}
#contact .p1 { margin-bottom: 40px;}
#contact .p2 { margin-bottom: 35px;}
#contact .dotted-wrapper { display: inline-block; border: dotted 1px rgba(158,158,159,.5); padding: .1rem; font-size: .25rem; letter-spacing: .025em;}
#contact .telnum { font-size: .4rem; letter-spacing: .025em;}
.privacy { margin-top: 40px; font-weight: normal;}
.privacy dl dt { font-size: 15px; letter-spacing: .4em; border-bottom: 1px solid rgba(35,24,21,.2); padding: 15px 8px; font-weight: normal;}
.privacy dl dd { font-size: 13px; letter-spacing: .1em; padding: 15px 8px 40px;}
.contact-wrapper { margin-top: 60px;}
.contact-wrapper dl { display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-bottom: 25px;}
.contact-wrapper dl dt { width: 160px;}
.contact-wrapper dl dt span { color: #e84845;}
.contact-wrapper dl dd { width: calc(100% - 160px);}
.contact-wrapper span.wpcf7-list-item { margin: 0 1em 0 0!important;}
.contact-wrapper input[type*="text"],
.contact-wrapper input[type*="email"],
.contact-wrapper input[type*="tel"],
.contact-wrapper textarea { border: none; border-radius: 6px; padding: 5px; background: #e8e8e8;}
.contact-wrapper input[type*="email"],
.contact-wrapper textarea { width: 100%;}
.contact-wrapper p { font-size: 16px;}
.contact-wrapper .submit-wrap { text-align: center; margin-top: 60px;}
.contact-wrapper .submit-wrap input { background: #e50012; color: #fff; border: none; font-size: .25rem; letter-spacing: .025em; width: 550px; max-width: 100%; height: 90px; font-weight: bold; display: block; margin: 0 auto;}
.contact-wrapper + .wpcf7-response-output { margin-top: 10px!important;}
@keyframes expansion{
	0%{ height:85px;}
	100%{ height:40px;}
}

#flow { background-color: #fff;}
#flow .label { font-size: .36rem; letter-spacing: 0; margin-bottom: .1rem; color: rgb(229, 0, 18); margin-top: 30px;}
#flow .step-box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: visible; overflow: hidden;}
.step-box h2 { font-size: 23px; margin-bottom: 20px;}
.step-box p { margin-bottom: 30px;}
.step-box img { margin: 40px 0;}
.blue-example { color: #fff; display: inline-block; padding: 15px 30px; margin-bottom: 30px;}
.page-03 .step { font-size: 24px; font-weight: normal; padding: 17px 20px 7px 20px; color: #fff; text-align: center; margin: 0; display: block;}

/* blog */
.page-blog .posts .bg-white { background: #fff; padding: 40px 30px 40px; }
.page-blog .posts .widget { background: #fff; padding: 40px 20px 20px; }
.page-blog .posts .widget h4 { font-size: .2rem; line-height: .29rem; color: #fff; letter-spacing: 0; padding: 6px 12px; background: #254451; margin-bottom: .2rem; border-left: 6px solid #727272; }
.page-blog .posts .widget ul { margin-bottom: .4rem; }
.page-blog .posts .widget ul li:first-child { border-top: 1px dotted #9A9A9B; }
.page-blog .posts .widget ul li { display: block; border-bottom: 1px dotted #9A9A9B; font-size: .16rem; line-height: .28rem; padding-top: 7px; padding-bottom: 7px; }
.page-blog .posts .widget ul li a p { font-size: 0.14rem; line-height: 1.5; font-weight: normal; margin-top: 0.03rem; margin-bottom: 0.05rem; background: #eee; display: inline-block; padding: .01rem .07rem; }
.page-blog .posts .blog-list li { border-bottom: 1px solid #eee; padding-bottom: .5rem; margin-bottom: .5rem; }
.page-blog .posts .blog-list li:last-child { margin-bottom: 0; border-bottom: 0; }
.page-blog .posts .blog-list li .img-wrap { margin-bottom: .2rem; }
.page-blog .posts .blog-list li .img-wrap img { width: 100%; }
.page-blog .posts .blog-list li .date-wrap { position: relative; display: flex; align-items: center; color: #ababab; letter-spacing: .07em; font-size: 15px; }
.page-blog .posts .blog-list li .date-wrap .n-tag { margin-left: 15px; color: #fff; background: #fd0000; border-radius: 0.2em; font-weight: bold; font-size: 11px; display: flex; height: 20px; width: 50px; align-items: center; justify-content: center; line-height: 1; }
.page-blog .posts .blog-list li h4.title { font-size: .24rem; font-weight: bold; position: relative; padding-bottom: .3rem; margin: .08rem 0 .4rem; }
.page-blog .posts .blog-list li h4.title:after { content: ""; position: absolute; left: 0; bottom: 0; width: .3rem; height: .01rem; background: #231815; }
.page-blog .posts .blog-list li .contents { line-height: 1.8; }
@media (max-width: 767px) {
  .page-blog .posts .widget { padding: 20px 15px 20px; margin-top: .3rem; }
  .page-blog .posts .bg-white { padding: 20px 15px 20px; }
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .page-blog .posts .widget h4 { padding-top: 5px; }
}

/* category */
#category { margin-bottom: 0;}

/* single */
#single #case2 { padding-top: 70px; margin-bottom: 50px;}
#single #case2 .section-title { margin-bottom: .3rem;}
#single .posts { padding: 1rem 0;}
#single .posts .head { margin-bottom: .4rem; border-bottom: 1px solid #ccc; padding-bottom: .3rem; position: relative;}
#single .posts .head:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100px; height: 1px; background: #254451;}
#single .posts .head .title { font-weight: bold; font-size: .22rem; line-height: 2; letter-spacing: .08em;}
#single .posts .head .flex { margin-top: .1rem; display: flex; font-size: .16rem; color: #979797;}
#single .posts .head .flex .days { margin-right: .2rem;}
#single .posts .head .flex .desc { letter-spacing: .1em;}
#single .posts .wp-post { margin-bottom: .5rem;}
#single.page-case { margin-bottom: 0;}

@media (max-width: 991px) {
	body { font-size: 16px;}
	#firstView { display: block;}
	#firstView h2 { position: static; width: 100%; text-align: left; padding: 0 30px; font-size: 24px; color: #fff;}
	#firstView .scroll { left: auto; right: 20px;}
	figure { text-align: center; margin-bottom: 20px;}
	.logo .part1 { margin-bottom: 0;}
	.logo .part1 img { height: 40px;}
	header { position: fixed;}
	header.header_sizing { background: rgba(255,255,255,.85);}
	header .wrapper { height: 90px;}
	header.header_sizing .wrapper { height: 65px;}
	header .menu-trg-area { display: block!important;}
	header .gnav { position: fixed; right: -270px; top: 0; width: 270px; height: 100vh; transition: .4s; background: rgba(255,255,255,100); padding: 90px 30px 0;}
	header.header_sizing .gnav { height: calc(100vh - 65px); top: 65px;}
	header .gnav.active { right: 0;}
	header .gnav li { display: block; position: relative; padding: 0; text-align: left; font-size: 18px;}
	header .gnav li a { display: block; padding: 15px 0 12px; border-bottom: 1px solid #595757; padding-left: 10px;}
	header .gnav li a span { position: relative;}
	header .gnav .lg a { margin-left: 0; margin-top: 20px; line-height: 33px; width: 150px; text-align: center;}
	#about ul li p { font-size: 15px;}
	#case h3 img { height: 40px;}
	#case p { font-size: 18px;}
	#howto { padding: 35px 0 0;}
	#howto .wrap { margin-bottom: 40px;}
	#howto .wrap figure { display: flex; align-items: center; justify-content: center;}
	#howto .number { font-size: 21px; margin-bottom: 10px;}
	#oem { padding-bottom: 50px;}
	#product .logo .part1 img { height: 29px;}
	#product h2 { margin-bottom: 40px;}
	#product .p1 { font-size: 19px; line-height: 1; margin-bottom: 0; font-size: 12px;}
	#product .p3 { margin-top: 20px; font-size: 12px;}
	#features .label { margin-bottom: 20px;}
	main > section { padding: 50px 0 50px;}
	.section-title { margin-bottom: 50px;}
	.section-title .slug { font-size: 17px;}
	.section-title .jp { font-size: 32px;}
	.section-title .en { font-size: 12px;}
	.privacy dl dt { font-size: 12px; padding-bottom: 8px;}
	.privacy dl dd { padding-bottom: 20px; font-size: 12px; padding-top: 8px;}
}
@media (max-width: 767px) {
	.container-fluid { padding-left: 20px; padding-right: 20px;}
	.beta-title { line-height: 1; font-size: .2rem; text-align: center; padding: 1em .5em 1.1em; letter-spacing: .1em;}
	main > section { padding: 40px 0 40px;}
	#about ul { margin: 0 -10px;}
	#about ul li { width: 33.333333%; padding: 10px; margin-bottom: 20px;}
	#case .wrapper { padding: 20px;}
	#case .wrapper .wrap { margin-bottom: 25px; padding-bottom: 25px;}
	#case .photo { width: 100%;}
	#case p { font-size: 16px;}
	#features .label { font-size: 22px; margin-bottom: 15px;}
	#features .features_title { font-size: 27px;}
	#faq .section-title { margin-bottom: 35px;}
	#price .section-title { margin-bottom: 35px;}
	#price #spec_2 .wrapper { padding: 0 15px 25px;}
	#price #spec_2 .wrapper .beta-title { margin: 0 -15px 10px;}
	.section-title { margin-bottom: 35px;}
	.section-title .jp { font-size: 27px;}
	.section-title .en { font-size: 10px;}
	.contact-wrapper dl { display: block;}
	.contact-wrapper dl dt { width: 100%; margin-bottom: 10px;}
	.contact-wrapper dl dd { width: 100%;}
	.contact-wrapper input[type*="text"],
	.contact-wrapper input[type*="email"],
	.contact-wrapper input[type*="tel"],
	.contact-wrapper textarea { width: 100%;}
	.contact-wrapper .submit-wrap { margin-top: 20px;}
	.contact-wrapper .submit-wrap input { width: 230px; height: 43px; font-size: 16px;}

	/* single */
	#single #case2 { padding-top: 40px;}
	#single .posts { padding: 50px 0;}
	#single .posts .head .title { line-height: 1.8; font-size: 18px;}
}

/* 2020.11.26 */
footer { background-color: #254451;}
footer address { margin-bottom: 0;font-size: .16rem; color: #fff;}
footer .content-wrapper { display: block; padding: .45rem 0; margin: auto; width: 5rem; max-width: 100%;}
footer .content-wrapper .logo { margin-top: .3rem; margin-bottom: .3rem; display: flex; -webkit-align-items: center; align-items: center; max-width: 220px;}
footer .content-wrapper .logo .t { margin-right: .2rem;}
footer .content-wrapper .logo .sns-block { font-size: .3rem;}
footer .content-wrapper .logo .sns-block li { padding: 0 3px;}
/*footer .content-wrapper .description { padding-left: .5rem;}*/
footer .content-wrapper .description dl { display: flex;}
footer .content-wrapper .description dt { font-weight: normal; width: 85px;}
footer .content-wrapper .description dd { width: calc(100% - 85px);}
footer .content-wrapper .description .parent { display: flex; margin-bottom: .2rem;}
footer .content-wrapper .description .parent .title { width: 70px;}
footer .content-wrapper .description .parent .title label { border: 1px solid #333; background: #333; display: block; text-align: center; color: #fff; font-weight: bold; border-radius: 2px;}
footer .content-wrapper .description .parent .detail { width: calc(100% - 70px); /*padding-left: .2rem;*/}
footer .content-wrapper .tel { margin-top: .15rem;}
footer .content-wrapper .tel a { display: block; font-size: .16rem; border: 1px solid #fff; border-radius: .3rem; text-align: center; letter-spacing: .075em; padding: .4em; color: #fff;}
footer .content-wrapper .tel i { margin-right: .08rem; font-size: .16rem; position: relative;}
footer .content-wrapper .fax { margin-top: .1rem; color: #fff;}
footer .content-wrapper .fax p { display: block; font-size: .16rem; border: 1px solid #fff; border-radius: .3rem; text-align: center; letter-spacing: .075em; padding: .4em;}
footer .content-wrapper .fax p a { color: #fff!important; text-decoration: none;}
footer .content-wrapper .fax i { margin-right: .08rem; font-size: .16rem; position: relative;}
footer .googlemap { height: 100%;}
footer .googlemap iframe { width: 100%; display: block; height: 100%;}

@media (max-width: 767px) {
	footer .detail { margin: 0 auto;}
	footer .content-wrapper { width: 100%;}
	footer .content-wrapper .tel { margin-top: 10px;}
	footer .content-wrapper .logo { margin-bottom: 20px;}
	footer .content-wrapper .logo .t { height: 30px;}
	footer .content-wrapper .description { padding-left: 0;}
	footer .googlemap { height: 300px;}
	footer .btm-block { display: block; position: relative; padding: 15px 15px 50px;}
	footer .btm-block .copyright { position: absolute; bottom: 15px; left: 15px; font-size: 10px;}
}



/*  */
@media (max-width: 991px) {
	body { font-size: 16px;}
	#features .features_title { font-size: 24px;}
	.item-card p { font-size: 16px;}
	.item-price .p-text p { font-size: 16px;}
	.item-faq .a .content { font-size: 18px;}
	.contents ul li { width: auto; height: auto; margin-bottom: 10px;}
}
@media (max-width: 767px) {
	body { font-size: 16px;}
	#features .features_title { font-size: 18px;}
	.item-price .p-text p { font-size: 16px;}
	.contents ul li { font-size: 14px; width: auto; height: auto; margin-bottom: 10px;}
	.contents ul li i { width: auto; height: auto;}
	.item-card p { font-size: 14px;}
	.item-faq .a .content { font-size: 14px;}
	.contact-wrapper p { font-size: 12px;}
}
@media (max-width: 575px) {
	body { font-size: 14px;}
	#features .features_title { font-size: 18px;}
	.contents ul li { font-size: 12px;}
	.contents ul li i { width: auto; height: auto;}
	.contact-wrapper p { font-size: 10px;}
	#flow .col-xs-12 .label { margin-top: 15px; font-size: 22px;}
	#flow .col-xs-12 { border-bottom: dashed 2px #231815;}
}