@charset "UTF-8";
/* 色
$c-orange   : #FD8F20;
$c-cream    : #FFF5E9;
$c-lightGray: #E5E5E5;
$c-gray     : #999999;
$c-thinGray : #F7F7F7;
*/
@keyframes scroll-anime { 0% { bottom: -100px; }
  80% { bottom: -100px; }
  90% { bottom: -60px; }
  95% { bottom: -100px; }
  97% { bottom: -95px; }
  100% { bottom: -100px; } }

@keyframes shine { 100% { left: 125%; } }

@keyframes gradBtn { 0%, 100% { background-position: 0; }
  50% { background-position: 100%; } }

@keyframes poco1 { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@keyframes poco2 { 0% { transform: rotate(-45deg); }
  100% { transform: rotate(315deg); } }

@keyframes poco3 { 0% { transform: rotate(-90deg); }
  100% { transform: rotate(270deg); } }

@keyframes poco4 { 0% { transform: rotate(-130deg); }
  100% { transform: rotate(230deg); } }

@keyframes poco5 { 0% { transform: rotate(-180deg); }
  100% { transform: rotate(180deg); } }

@keyframes poco6 { 0% { transform: rotate(-270deg); }
  100% { transform: rotate(90deg); } }

@keyframes poco7 { 0% { transform: rotate(-360deg); }
  100% { transform: rotate(0deg); } }

@keyframes poco1_r { 0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); } }

@keyframes poco2_r { 0% { transform: rotate(90deg);
    opacity: 0; }
  100% { transform: rotate(-270deg);
    opacity: 0; } }

@keyframes poco3_r { 0% { transform: rotate(180deg); }
  100% { transform: rotate(-180deg); } }

@keyframes poco4_r { 0% { transform: rotate(270deg); }
  100% { transform: rotate(-90deg); } }

@keyframes poco5_r { 0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); } }

@keyframes a1 { 0% { opacity: 0; }
  1% { opacity: 1; }
  45% { opacity: 1; }
  50% { opacity: 0; }
  65% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes a2 { 0% { opacity: 0; }
  5% { opacity: 1; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  80% { opacity: 0; } }

@keyframes a3 { 0% { opacity: 0; }
  3% { opacity: 1; }
  45% { opacity: 1; }
  50% { opacity: 0; }
  55% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; } }

@media (min-width: 561px) { a[href*="tel:"] { pointer-events: none; cursor: default; text-decoration: none; color: #333; } }

/*-----------------------------------------------
共通項目
-----------------------------------------------*/
html { font-size: 16px; line-height: 1.7; font-family: 'Noto Sans JP', Arial, Sans-Serif; }

main { padding-top: 90px; }

a { display: block; text-decoration: none; color: #000000; }

a:link, a:visited { text-decoration: none; color: #000000; }

a:hover { opacity: .8; }

li { list-style: none; }

#nav-toggle { display: none; }

.secpad { max-width: 1120px; width: 100%; margin: 0 auto; }

.linkBtn { position: relative; border-radius: 45px; padding: 15px 0; text-align: center; font-size: 0.9375rem; font-weight: bold; }

.linkBtn::after { position: absolute; display: inline-block; content: url(../images/arrow-white.svg); width: 25px; right: 20px; }

.linkBtn2 { position: relative; width: 280px; padding: 25px; border-bottom: 1px solid #E5E5E5; font-weight: bold; color: #000; }

.linkBtn2::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ''; background: #000; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; }

.linkBtn2:hover { color: #ffffff; }

.linkBtn2:hover::before { transform-origin: left top; transform: scale(1, 1); }

.linkBtn2:hover::after { content: url(../images/arrow-white.svg); }

.linkBtn2::after { position: absolute; display: inline-block; content: url(../images/arrow-black.svg); width: 25px; right: 20px; }

.headingType2 { font-size: 2rem; margin-bottom: 20px; }

.headingType2 span { font-size: 16px; display: block; color: #FD8F20; margin-bottom: 20px; }

.headingType3 { font-size: 1.625rem; }

.headingType3 span { font-size: 0.875rem; display: block; color: #FD8F20; margin-bottom: 20px; }

.headingColorLine { font-size: 1.75rem; margin-bottom: 50px; }

.headingColorLine::after { content: ''; display: block; width: 100px; height: 2px; margin: 0 auto; margin-top: 15px; background-color: #FD8F20; }

.decoFrameHeading { width: 100%; margin-bottom: 15px; padding: 60px 0; }

.decoFrameHeading h2 { text-align: center; font-size: 1.75rem; padding: 0 30px; }

.decoFrameHeading h2 .subCatch { display: block; font-weight: normal; font-size: 1.2rem; }

.decoFrameHeading::before { content: url("../images/heading-bg-1.png"); display: inline-block; text-align: left; width: 100%; }

.decoFrameHeading::after { content: url("../images/heading-bg-2.png"); display: inline-block; text-align: right; width: 100%; }

.catch-copy { text-align: center; margin-bottom: 90px; }

.headingSetHr { position: relative; font-size: 1.75rem; margin-bottom: 50px; padding-bottom: 25px; border-bottom: 2px solid #E5E5E5; color: #000000; }

.pageTopBtn { opacity: 0; position: fixed; width: 67px; right: 75px; bottom: 75px; padding: 20px; background: -ms-linear-gradient(left, #F5982B, #F5691A); background: -moz-linear-gradient(left, #F5982B, #F5691A); background: -webkit-linear-gradient(left, #F5982B, #F5691A); background: linear-gradient(left, #F5982B, #F5691A); border-radius: 50%; z-index: 9998; transition: opacity .25s ease 0s; }

.pageTopBtn img { width: 100%; transform: rotate(-90deg); }

.is-scroll .pageTopBtn { opacity: 1; display: block; }

.contactBtn { background: -ms-linear-gradient(left, #f5dc2b, #F5691A); background: -moz-linear-gradient(left, #f5dc2b, #F5691A); background: -webkit-linear-gradient(left, #f5dc2b, #F5691A); background: linear-gradient(left, #f5dc2b, #F5691A); color: #ffffff; background-size: 200% 200%; animation: gradBtn 3s ease infinite; }

.pcBr, .pcImg { display: block; }

.spBr, .spMenu, .spImg { display: none; }

.twoColorAreaList { display: flex; flex-wrap: wrap; border-top: 1px solid #999999; border-right: 1px solid #999999; }

.twoColorAreaList dt, .twoColorAreaList dd { display: flex; align-items: center; border-bottom: 1px solid #999999; border-left: 1px solid #999999; width: 50%; }

.twoColorAreaList dt:nth-child(4n+1), .twoColorAreaList dd:nth-child(4n+2) { background-color: #F7F7F7; }

.twoColorAreaList dt:nth-child(4n+3), .twoColorAreaList dd:nth-child(4n+4) { background-color: #E5E5E5; }

.twoColorAreaListNoBorder { display: flex; flex-wrap: wrap; }

.twoColorAreaListNoBorder dt { display: flex; align-items: center; width: 50%; flex-wrap: wrap; }

.twoColorAreaListNoBorder dt:nth-child(4n+1), .twoColorAreaListNoBorder dd:nth-child(4n+2) { background-color: #F7F7F7; }

.twoColorAreaListNoBorder dt:nth-child(4n+3), .twoColorAreaListNoBorder dd:nth-child(4n+4) { background-color: #E5E5E5; }

.twoColorAreaListNoBorder .wrap { flex-wrap: wrap; }

.twoColorAreaListNoBorder .wrap p { width: 100%; }

.linkBtnSimpleFrame { margin: 0 auto; font-weight: bold; border: 1px solid #999999; }

.shinyEffect { overflow: hidden; position: relative; }

.shinyEffect::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); transform: skewX(-25deg); }

.shinyEffect:hover { opacity: 1; }

.shinyEffect:hover::before { animation: shine .75s; }

/*----------------------------
header
----------------------------*/
header { width: 100%; height: 90px; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; align-items: center; justify-content: space-between; position: fixed; z-index: 9999; padding: 0 60px; background-color: #ffffff; }

header #header-logo { height: 50px; margin-bottom: 4px; }

header #gnav ul { display: flex; align-items: center; }

header #gnav ul li { font-size: 0.9375rem; font-weight: bold; margin-bottom: 4px; }

header #gnav ul li:hover { border-bottom: 4px solid #FD8F20; margin-bottom: 0; }

header #gnav ul li:not(:last-child) { margin-right: 30px; }

header #gnav ul li a { display: block; padding: 30px 0; }

header #gnav ul li .contactBtn { color: #ffffff; padding: 12px 30px; }

header #gnav ul li .contactBtn::after { display: none; }

header #gnav ul .otherMenu { display: none; }

header #gnav ul .border-none { margin-bottom: 4px; }

header #gnav ul .border-none:hover { margin-bottom: 4px; border: none; }

/*----------------------------
footer
----------------------------*/
footer #footer-contact { background-color: #000000; color: #ffffff; }

footer #footer-contact .secpad { display: flex; padding: 100px 0; }

footer #footer-contact .secpad .contact-detail { width: 400px; border-right: 1px solid #333; }

footer #footer-contact .secpad .contact-detail .detail { font-size: 0.875rem; }

footer #footer-contact .secpad .contact-tel { width: 400px; padding: 0 50px; border-left: 1px solid rgba(112, 112, 112, 0.2); border-right: 1px solid #333; }

footer #footer-contact .secpad .contact-tel h3 { margin-bottom: 22px; }

footer #footer-contact .secpad .contact-tel .detail a { position: relative; font-size: 2rem; font-weight: bold; color: #ffffff; padding-left: 30px; }

footer #footer-contact .secpad .contact-tel .detail a::before { content: url(../images/tel-icon.svg); display: inline-block; position: absolute; width: 25px; left: 0; }

footer #footer-contact .secpad .contact-tel .detail p { font-size: 0.875rem; }

footer #footer-contact .secpad .contact-formLink { width: 320px; padding-left: 50px; border-left: 1px solid rgba(112, 112, 112, 0.2); }

footer #footer-contact .secpad .contact-formLink h3 { margin-bottom: 22px; }

footer #footer-contact .secpad .contact-formLink .contactBtn { color: #ffffff; }

footer #footer-linkList { background-color: #E5E5E5; }

footer #footer-linkList .linkList-area { display: flex; max-width: 1120px; width: 100%; margin: 0 auto; padding: 120px 0; }

footer #footer-linkList .linkList-area-item { width: 280px; }

footer #footer-linkList .linkList-area-item li { font-size: 0.9375rem; font-weight: bold; margin-bottom: 20px; }

footer #footer-linkList .linkList-area-item .link-small { font-size: 0.75rem; font-weight: normal; margin-bottom: 15px; }

footer #footer-nav { background-color: #fff; }

footer #footer-nav .footer-nav-area { display: flex; justify-content: space-between; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; padding: 40px 0; }

footer #footer-nav .footer-nav-area nav ul { display: flex; }

footer #footer-nav .footer-nav-area nav ul li { font-size: 0.875rem; }

footer #footer-nav .footer-nav-area nav ul li a { margin-right: 30px; }

footer #footer-nav .footer-nav-area small { font-size: 0.875rem; }

.ex-link { position: relative; padding-right: 15px; display: inline; }

.ex-link::after { content: url(../images/ex-link-icon.svg); display: inline-block; position: absolute; right: 0; width: 11px; }

/*----------------------------
pageHeader
----------------------------*/
#pageHeader { height: 400px; background-image: url(../images/heading-bg.jpg); background-size: cover; display: flex; align-items: center; }

#pageHeader .pageHeaderContent { max-width: 1120px; width: 100%; margin: 0 auto; }

#pageHeader .pageHeaderContent h1 { color: #ffffff; font-size: 2.5rem; font-weight: bold; }

#pageHeader .pageHeaderContent h1 span { display: block; font-size: 16px; margin-bottom: 15px; }

/*----------------------------
ぱんくず
----------------------------*/
#breadcrumbs { background-color: #ffffff; }

#breadcrumbs .breadcrumbs-content { display: flex; max-width: 1120px; width: 100%; margin: 0 auto; padding: 25px 0 70px; }

#breadcrumbs .breadcrumbs-content li { display: inline; font-size: 0.875rem; }

#breadcrumbs .breadcrumbs-content li:not(:last-child)::after { content: '>'; margin: 0 10px; }

#breadcrumbs .breadcrumbs-content li a { display: inline; }

#breadcrumbs .breadcrumbs-content .text-omitted { max-width: 200px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/*-----------------------------------------------
ヒーロー　アニメーション
-----------------------------------------------*/
#top-hero .layer_1 { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9998; background-image: url("/images/hero-layer01.png"); background-size: cover; background-position: center center; }

#top-hero .layer_2 { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9; background-image: url("/images/hero-layer02.png"); background-size: cover; background-position: center center; }

#top-hero .layer_3 { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; background-image: url("/images/hero-layer03.jpg"); background-size: cover; background-position: center center; }

#top-hero .moA { top: 36%; transform-origin: 100% 0; }

#top-hero .moB { top: -17%; right: calc(50% - 550px); transform-origin: 0 0; }

#top-hero .star { position: absolute; z-index: 99; opacity: .8; }

#top-hero .star:nth-child(1) { animation: poco1 25s linear infinite; width: 600px; left: calc(50% - 600px); }

#top-hero .star:nth-child(2) { animation: poco2 30s linear infinite; width: 580px; left: calc(50% - 600px); }

#top-hero .star:nth-child(3) { animation: poco3 18s linear infinite; width: 300px; left: calc(50% - 300px); }

#top-hero .star:nth-child(4) { animation: poco3 13s linear infinite; width: 280px; left: calc(50% - 300px); }

#top-hero .star:nth-child(5) { animation: poco4 48s linear infinite; width: 500px; left: calc(50% - 500px); }

#top-hero .star:nth-child(6) { animation: poco2 10s linear infinite; width: 150px; left: calc(50% - 150px); z-index: 1; }

#top-hero .star:nth-child(7) { animation: poco1 45s linear infinite; width: 160px; left: calc(50% - 150px); z-index: 1; }

#top-hero .star:nth-child(8) { animation: poco5 55s linear infinite; width: 200px; left: calc(50% - 200px); z-index: 1; }

#top-hero .star:nth-child(9) { animation: poco2 25s linear infinite; width: 320px; left: calc(50% - 300px); }

#top-hero .star:nth-child(10) { animation: poco3 28s linear infinite; width: 550px; left: calc(50% - 600px); }

#top-hero .star:nth-child(11) { animation: poco4 12s linear infinite; width: 250px; left: calc(50% - 250px); }

#top-hero .star:nth-child(12) { animation: poco5 42s linear infinite; width: 210px; left: calc(50% - 100px); z-index: 9; }

#top-hero .star:nth-child(13) { animation: poco2_r 80s linear infinite; width: 600px; left: calc(50% - 300px); }

#top-hero .star:nth-child(14) { animation: poco4_r 30s linear infinite; width: 580px; left: calc(50% - 300px); }

#top-hero .star:nth-child(15) { animation: poco5_r 50s linear infinite; width: 300px; left: calc(50% - 150px); }

#top-hero .star:nth-child(16) { animation: poco4_r 15s linear infinite; width: 280px; left: calc(50% - 150px); z-index: 1; }

#top-hero .star:nth-child(17) { animation: poco5_r 8s linear infinite; width: 130px; left: calc(50% - 75px); z-index: 1; }

#top-hero .star:nth-child(18) { animation: poco2_r 25s linear infinite; width: 200px; left: calc(50% - 100px); z-index: 1; }

#top-hero .star:nth-child(19) { animation: poco2_r 28s linear infinite; width: 300px; left: calc(50% - 150px); }

#top-hero .star:nth-child(20) { animation: poco3_r 15s linear infinite; width: 150px; left: calc(50% - 75px); z-index: 9; }

#top-hero .star:nth-child(21) { animation: poco4_r 32s linear infinite; width: 180px; left: calc(50% - 100px); z-index: 1; }

/*-----------------------------------------------
トップページ
-----------------------------------------------*/
#top p { line-height: 2; }

#top #top-product .secpad, #top #top-demo .secpad, #top #top-other .secpad, #top #top-company .secpad { max-width: 1440px; padding: 60px 0; }

#top #top-news .secpad { padding: 60px 0; }

#top .btnType1 { background-color: #000000; color: #ffffff; }

#top #top-hero { width: 100%; height: calc(100vh - 60px); }

#top #top-hero .hero-wrap { position: relative; overflow: hidden; width: 100%; height: 100%; }

#top #top-hero .hero-wrap .hero-text { position: absolute; bottom: 60px; z-index: 9998; max-width: 780px; min-width: 480px; width: 50%; left: 15%; }

#top #top-hero .hero-wrap .hero-text svg { width: 100%; }

#top #top-hero .hero-wrap .hero-text path { fill: none; stroke: #fff; stroke-dasharray: 2000; stroke-dashoffset: 0; stroke-width: 0.5; animation-play-state: running; -webkit-animation: hello 3.5s ease-in 1.5s both; animation: hello 4.5s ease-in 1.5s both; }

@-webkit-keyframes hello { 0% { stroke-dashoffset: 2000;
    fill: transparent;
    /*透過*/ }
  50% { fill: transparent;
    /*透過*/ }
  100% { stroke-dashoffset: 0;
    fill: #fff; } }

@keyframes hello { 0% { stroke-dashoffset: 2000;
    fill: transparent;
    /*透過*/ }
  50% { fill: transparent;
    /*透過*/ }
  100% { stroke-dashoffset: 0;
    fill: #fff; } }

#top #top-hero .hero-wrap .ie-svg svg { width: 780px; height: 275px; }

#top #top-hero .hero-wrap .ie-svg path { fill: #fff; }

#top .bgi-area { background-image: url("../images/bg.jpg"); background-size: cover; }

#top .bgi-area .bgi-mask { background: rgba(255, 255, 255, 0.9); }

#top #top-about .top-about-area { display: flex; align-items: flex-start; max-width: 1560px; width: 100%; }

#top #top-about .top-about-area .top-about-image { width: 60%; margin-top: -30px; position: relative; z-index: 999; }

#top #top-about .top-about-area .top-about-detail { width: 40%; display: flex; flex-direction: column; justify-content: center; padding: 180px 0 0 120px; }

#top #top-about .top-about-area .top-about-detail .headingType2, #top #top-about .top-about-area .top-about-detail .detail { margin-bottom: 40px; }

#top #top-about .top-about-area .top-about-detail .detail { width: 100%; }

#top #top-about .top-about-area .top-about-detail .linkBtn { width: 300px; margin-bottom: 25px; }

#top #top-product .secpad { padding-bottom: 180px; }

#top #top-product .secpad .headingType2 { text-align: center; margin-bottom: 75px; }

#top #top-product .secpad .top-product-list { display: flex; margin-bottom: 50px; }

#top #top-product .secpad .top-product-list .product-list-item { width: 33%; }

#top #top-product .secpad .top-product-list .product-list-item:not(:last-child) { margin-right: 15px; }

#top #top-product .secpad .top-product-list .product-list-item a { display: block; text-align: center; padding: 60px 30px; background-color: #ffffff; color: #000; width: 100%; height: 100%; }

#top #top-product .secpad .top-product-list .product-list-item a .headingType3 { font-size: 2rem; margin-bottom: 25px; }

#top #top-product .secpad .top-product-list .product-list-item a .headingType3 span { display: block; font-size: 0.875rem; color: #000000; margin-bottom: 20px; }

#top #top-product .secpad .top-product-list .product-list-item a .image { display: flex; justify-content: center; align-items: center; height: 190px; margin-bottom: 25px; }

#top #top-product .secpad .top-product-list .product-list-item a .detail p:first-child { margin-bottom: 15px; text-align: left; }

#top #top-product .secpad .top-product-list .product-list-item a .detail p:last-child { font-size: 1.75rem; font-weight: bold; }

#top #top-product .secpad .top-product-list .product-list-item a .detail p:last-child span { font-size: 0.875rem; }

#top #top-product .secpad .linkBtn { margin: 0 auto; width: 300px; }

#top #top-demo { background: -ms-linear-gradient(left, #F5691A, #F5982B); background: -moz-linear-gradient(left, #F5691A, #F5982B); background: -webkit-linear-gradient(left, #F5691A, #F5982B); background: linear-gradient(left, #F5691A, #F5982B); }

#top #top-demo .secpad { position: relative; padding: 85px 0; }

#top #top-demo .secpad .top-demo-detail { position: relative; z-index: 3; padding: 90px 0; color: #ffffff; }

#top #top-demo .secpad .top-demo-detail .headingType3 { margin-bottom: 20px; }

#top #top-demo .secpad .top-demo-detail .headingType3 span { color: #ffffff; }

#top #top-demo .secpad .top-demo-detail .detail { margin-bottom: 40px; }

#top #top-demo .secpad .top-demo-detail .linkBtn { width: 300px; }

#top #top-demo .secpad .top-demo-image { position: absolute; max-width: 950px; width: 100%; top: -120px; right: 0; z-index: 2; }

#top #top-demo .secpad .top-demo-image img { width: 100%; }

#top #top-other .secpad .top-other-list { display: flex; }

#top #top-other .secpad .top-other-list .other-list-item { width: calc((1440px - 30px) / 3); height: 450px; position: relative; display: flex; align-items: center; overflow: hidden; }

#top #top-other .secpad .top-other-list .other-list-item::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center center; transition: all .3s ease-out; }

#top #top-other .secpad .top-other-list .other-list-item:hover::after { transform: scale(1.2); }

#top #top-other .secpad .top-other-list .other-list-item:not(:last-child) { margin-right: 15px; }

#top #top-other .secpad .top-other-list .other-list-item .item-content { position: relative; z-index: 2; color: #ffffff; padding: 0 30px; }

#top #top-other .secpad .top-other-list .other-list-item .item-content .headingType3 { margin-bottom: 20px; }

#top #top-other .secpad .top-other-list .other-list-item .item-content .headingType3::before { display: inline-block; margin-bottom: 15px; }

#top #top-other .secpad .top-other-list .support::after { background-image: url(../images/support.png); }

#top #top-other .secpad .top-other-list .support .item-content .headingType3::before { content: url(../images/support-icon.svg); width: 45px; height: 45px; }

#top #top-other .secpad .top-other-list .faq::after { background-image: url(../images/faq.png); }

#top #top-other .secpad .top-other-list .faq .item-content .headingType3::before { content: url(../images/faq-icon.svg); width: 45px; height: 45px; }

#top #top-other .secpad .top-other-list .download::after { background-image: url(../images/download.png); }

#top #top-other .secpad .top-other-list .download .item-content .headingType3::before { content: url(../images/download-icon.svg); width: 32px; height: 45px; }

#top #top-company .secpad .top-company-area { display: flex; align-items: center; }

#top #top-company .secpad .top-company-area img { width: 40%; }

#top #top-company .secpad .top-company-area .top-company-detail { width: 60%; padding-left: 90px; }

#top #top-company .secpad .top-company-area .top-company-detail p { font-size: 1.625rem; font-weight: bold; margin-bottom: 80px; }

#top #top-company .secpad .top-company-area .top-company-detail .page-link { display: flex; }

#top #top-company .secpad .top-company-area .top-company-detail .page-link .linkBtn2 { padding-left: 20px; }

#top #top-company .secpad .top-company-area .top-company-detail .page-link .linkBtn2:first-child { margin-right: 60px; }

#top .top-banner { max-width: 1440px; width: 100%; margin: 60px auto 60px; }

#top .top-banner img { width: 100%; }

#top .top-banner:last-child { margin: 60px auto 120px; }

#top #top-news .secpad .top-news-area { display: flex; }

#top #top-news .secpad .top-news-area .top-news-heading { width: 30%; }

#top #top-news .secpad .top-news-area .top-news-heading .headingType2 { margin-bottom: 35px; }

#top #top-news .secpad .top-news-area .top-news-heading .linkBtn { width: 145px; padding: 10px 10px 10px 25px; font-size: 0.875rem; text-align: left; }

#top #top-news .secpad .top-news-area .top-news-heading .linkBtn::after { width: 15px; top: 7px; right: 15px; }

#top #top-news .secpad .top-news-area .top-news-list { width: 70%; }

#top #top-news .secpad .top-news-area .top-news-list .news-list-item a { padding: 35px 0; border-bottom: 1px solid #E5E5E5; }

#top #top-news .secpad .top-news-area .top-news-list .news-list-item a p { line-height: 1.6; }

#top #top-news .secpad .top-news-area .top-news-list .news-list-item a time { font-size: 0.875rem; color: #999999; }

#top #top-news .secpad .top-news-area .top-news-list .news-list-item:first-child a { padding: 0 0 35px; }

.top-hero-scroll { position: absolute; bottom: -80px; right: 100px; z-index: 1; animation-name: scroll-anime; animation-duration: 5s; animation-timing-function: ease; animation-iteration-count: infinite; z-index: 9998; }

.top-hero-scroll-2 { position: absolute; bottom: -111px; right: 100px; width: 20px; z-index: 9998; }

/*-----------------------------------------------
製品情報
-----------------------------------------------*/
#product #prod-monitor, #product #prod-module, #product #prod-panel { margin-top: -90px; padding-top: 90px; }

#product .touch-list { display: flex; flex-wrap: wrap; margin-bottom: 65px; }

#product .touch-list .touch-list-item { display: flex; flex-direction: column; align-items: center; width: calc(33% - 27px); padding: 35px 20px; background-color: #F3F3F3; margin-bottom: 45px; }

#product .touch-list .touch-list-item:not(:nth-child(3n)) { margin-right: 45px; }

#product .touch-list .touch-list-item .headingType3 { color: #000000; text-align: center; }

#product .touch-list .touch-list-item .headingType3 span { margin: 0 0 18px; color: #000000; }

#product .touch-list .touch-list-item .image { height: 240px; display: flex; justify-content: center; align-items: center; }

#product .touch-list .touch-list-item .waku { border: solid 1px #000; padding: 5px 20px; text-align: center; font-size: 12px; margin-bottom: 8px; }

#product .touch-list .touch-list-item .detail { margin-bottom: 8px; text-align: center; max-width: 100%; font-size: 16px; }

#product .touch-list .touch-list-item .size { font-size: 1.75rem; font-weight: bold; text-align: center; margin-bottom: 8px; }

#product .touch-list .touch-list-item .size span { font-size: 0.875rem; }

#product .touch-list .touch-list-item .tocontact { font-size: 15px; font-weight: bold; color: #f5691a; }

#product .touch-list .touch-list-item.wakutuki .image { height: 190px; }

/*-----------------------------------------------
タッチモニター
-----------------------------------------------*/
#touch .touch-content { max-width: 1120px; width: 100%; margin: 0 auto 120px; }

#touch .touch-content .attract-point { max-width: 100%; border: solid 8px #e5e5e5; padding: 15px 0; text-align: center; }

#touch .touch-content .touch-list { display: flex; flex-direction: column; }

#touch .touch-content .linkBtn { display: none; width: 590px; margin: 30px auto 0; background-color: #000000; color: #ffffff; }

#touch .touch-content .touch-list-item { border-bottom: 1px solid #DEDEDE; }

#touch .touch-content .touch-list-item a { display: flex; align-items: center; padding: 18px 0; }

#touch .touch-content .touch-list-item a:not(:last-child) { margin-bottom: 10px; }

#touch .touch-content .touch-list-item a .image { width: 181px; margin-right: 40px; }

#touch .touch-content .touch-list-item a .size { width: 200px; font-size: 4.9375rem; margin-right: 60px; line-height: 1; text-align: right; font-weight: bold; }

#touch .touch-content .touch-list-item a .size span { margin-left: 5px; font-size: 1.5rem; font-weight: normal; }

#touch .touch-content .touch-list-item a .detail-area { width: 50%; }

#touch .touch-content .touch-list-item a .detail-list { display: flex; flex-wrap: wrap; margin-bottom: 15px; }

#touch .touch-content .touch-list-item a .detail-list-item { display: flex; justify-content: center; align-items: center; width: calc((100% - 20px) / 3); height: 50px; background-color: #999999; color: #ffffff; font-size: 0.9375rem; font-weight: bold; }

#touch .touch-content .touch-list-item a .detail-list-item:not(:nth-child(3n)) { margin-right: 10px; }

#touch .touch-content .touch-list-item a .detail-list-item:nth-child(-n + 3) { margin-bottom: 10px; }

#touch .touch-content .touch-list-item a .detail-two-line { font-size: 0.875rem; line-height: 1.2; }

#touch .touch-content .touch-list-item a .detail-model { display: flex; border: 2px solid #999999; color: #999999; }

#touch .touch-content .touch-list-item a .detail-model p:first-child { width: 75px; padding: 10px; text-align: center; font-size: 0.9375rem; font-weight: bold; border-right: 1px solid #999999; }

#touch .touch-content .touch-list-item a .detail-model .model-num { padding: 10px 20px; max-width: calc(100% - 75px); width: 100%; word-wrap: break-word; }

.term-fullflat-monitor #touch .touch-content .linkBtn, .term-module-pcap-ip #touch .touch-content .linkBtn { display: block; }

/*-----------------------------------------------
タッチモニター シングルページ
-----------------------------------------------*/
#touch-s #breadcrumbs { background-color: #E5E5E5; }

#touch-s #slider { background-color: #E5E5E5; padding-bottom: 110px; }

#touch-s #slider .slide { max-width: 1120px; width: 100%; margin: 0 auto 30px; }

#touch-s #slider .thumbnail { max-width: 1120px; width: 100%; margin: 0 auto; }

#touch-s #slider .thumbnail .swiper-wrapper { justify-content: center; padding: 0 10px; }

#touch-s #slider .thumbnail .swiper-wrapper .swiper-slide { margin-right: 10px; text-align: center; }

#touch-s #slider .thumbnail .swiper-wrapper .swiper-slide img { width: 100%; cursor: pointer; }

#touch-s #slider .thumbnail .swiper-wrapper .swiper-slide-thumb-active img { border: 1px solid #FD8F20; }

#touch-s .thumb-not-view { padding-bottom: 60px !important; }

#touch-s .thumb-not-view .thumbnail { display: none; }

#touch-s #single-content { max-width: 1120px; width: 100%; margin: 120px auto 150px; }

#touch-s #single-content input { display: none; }

#touch-s #single-content .tab-content { display: none; clear: both; overflow: hidden; }

#touch-s #single-content .tab-list { display: flex; border-bottom: 1px solid #E5E5E5; margin-bottom: 90px; padding-left: 80px; }

#touch-s #single-content .tab-list li { border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; }

#touch-s #single-content .tab-list li:last-child { border-right: 1px solid #E5E5E5; }

#touch-s #single-content .tab-list li .tab-item { display: block; float: left; width: 200px; font-size: 0.9375rem; font-weight: bold; text-align: center; margin-bottom: -1px; padding: 12px 0; opacity: .5; }

#touch-s #single-content .tab-list li .tab-item:hover { cursor: pointer; }

#touch-s #single-content #input-chara:checked ~ #chara-content, #touch-s #single-content #input-spec:checked ~ #spec-content, #touch-s #single-content #input-relProd:checked ~ #relProd-content { display: block; }

#touch-s #single-content #input-chara:checked ~ .tab-list .label-chara, #touch-s #single-content #input-spec:checked ~ .tab-list .label-spec, #touch-s #single-content #input-relProd:checked ~ .tab-list .label-relProd { opacity: 1; border-top: 2px solid #FD8F20; }

#touch-s #single-content #input-chara:checked ~ .tab-list .label-chara .tab-item, #touch-s #single-content #input-spec:checked ~ .tab-list .label-spec .tab-item, #touch-s #single-content #input-relProd:checked ~ .tab-list .label-relProd .tab-item { margin-top: -2px; opacity: 1; border-bottom: 1px solid #ffffff; }

#touch-s #single-content #chara-content .chara-area { display: flex; }

#touch-s #single-content #chara-content .chara-area:not(:last-child) { margin-bottom: 100px; }

#touch-s #single-content #chara-content .chara-area .text { margin-right: 60px; width: calc(100% - 440px); }

#touch-s #single-content #chara-content .chara-area .text h2 { font-size: 1.5rem; border-left: 2px solid #FD8F20; padding-left: 10px; margin-bottom: 35px; }

#touch-s #single-content #chara-content .chara-area .text a { text-decoration: underline; color: #3083bd; }

#touch-s #single-content #chara-content .chara-area .text a.linkBtn { background: -ms-linear-gradient(left, #f5dc2b, #F5691A); background: -moz-linear-gradient(left, #f5dc2b, #F5691A); background: -webkit-linear-gradient(left, #f5dc2b, #F5691A); background: linear-gradient(left, #f5dc2b, #F5691A); color: #ffffff; background-size: 200% 200%; animation: gradBtn 3s ease infinite; width: 350px; margin-left: auto; margin-bottom: 30px; color: #fff; text-decoration: none; }

#touch-s #single-content #chara-content .chara-area .text .convex-image-wrap { width: 100%; margin-top: 50px; }

#touch-s #single-content #chara-content .chara-area .text .convex-image-wrap img { max-width: 100%; width: 100%; }

#touch-s #single-content #spec-content { margin-top: -60px; }

#touch-s #single-content #spec-content .twoColorAreaList dt, #touch-s #single-content #spec-content .twoColorAreaList dd { min-height: 95px; padding-left: 25px; }

#touch-s #single-content #spec-content .twoColorAreaList dt { font-weight: bold; width: 30%; }

#touch-s #single-content #spec-content .twoColorAreaList dd { width: 70%; }

#touch-s #single-content #spec-content .spec-table table { width: 100%; }

#touch-s #single-content #spec-content .spec-table table tbody tr { display: flex; border: 1px solid #999999; }

#touch-s #single-content #spec-content .spec-table table tbody tr:not(:last-child) { border-bottom: none; }

#touch-s #single-content #spec-content .spec-table table tbody tr th, #touch-s #single-content #spec-content .spec-table table tbody tr td { display: flex; align-items: center; padding: 15px 25px; }

#touch-s #single-content #spec-content .spec-table table tbody tr th { font-weight: bold; border-right: 1px solid #999999; width: 25%; }

#touch-s #single-content #spec-content .spec-table table tbody tr td { width: 75%; }

#touch-s #single-content #spec-content .spec-table table tbody tr td:not(:last-child) { border-right: 1px solid #999999; }

#touch-s #single-content #spec-content .spec-table table tbody tr .w25 { width: 25%; }

#touch-s #single-content #spec-content .spec-table table tbody tr .w375 { width: 37.5%; }

#touch-s #single-content #spec-content .spec-table table tbody tr .w50 { width: 50%; }

#touch-s #single-content #spec-content .spec-table table tbody tr .w75 { width: 75%; }

#touch-s #single-content #spec-content .spec-table table tbody tr .center { justify-content: center; }

#touch-s #single-content #spec-content .spec-table table tbody tr:nth-child(odd) th, #touch-s #single-content #spec-content .spec-table table tbody tr:nth-child(odd) td { background-color: #F7F7F7; }

#touch-s #single-content #spec-content .spec-table table tbody tr:nth-child(even) th, #touch-s #single-content #spec-content .spec-table table tbody tr:nth-child(even) td { background-color: #E5E5E5; }

#touch-s #single-content #spec-content .linkBtn { background: -ms-linear-gradient(left, #f5dc2b, #F5691A); background: -moz-linear-gradient(left, #f5dc2b, #F5691A); background: -webkit-linear-gradient(left, #f5dc2b, #F5691A); background: linear-gradient(left, #f5dc2b, #F5691A); color: #ffffff; background-size: 200% 200%; animation: gradBtn 3s ease infinite; width: 350px; margin-left: auto; margin-bottom: 30px; }

#touch-s #single-content #relProd-content .relProd-list { display: flex; }

#touch-s #single-content #relProd-content .relProd-list-item { width: 272px; text-align: center; margin-bottom: 20px; }

#touch-s #single-content #relProd-content .relProd-list-item img { width: 100%; }

#touch-s #single-content #relProd-content .relProd-list-item:not(:last-child) { margin-right: 30px; }

#touch-s #single-content #relProd-content .relProd-list-item h3 { font-size: 1.125rem; font-weight: bold; margin-bottom: 20px; }

#touch-s #single-content #relProd-content .relProd-list-item .text { font-size: 0.875rem; margin-bottom: 10px; }

#touch-s #single-content #relProd-content .relProd-list-item .spec-link { border: 1px solid #999999; padding: 5px 0; }

.postid-61 #touch-s #single-content #spec-content .linkBtn { display: none; }

/*-----------------------------------------------
高品質の理由
-----------------------------------------------*/
#reason-quality, #reason-elect { line-height: 2; }

#reason-quality .quality-heading img, #reason-quality .flexible-heading img, #reason-elect .quality-heading img, #reason-elect .flexible-heading img { vertical-align: bottom; line-height: 0; }

#reason-quality .quality-heading span, #reason-quality .flexible-heading span, #reason-elect .quality-heading span, #reason-elect .flexible-heading span { display: block; font-size: 1.25rem; padding-left: 10px; font-weight: bold; }

#reason-quality #page-top, #reason-elect #page-top { background-color: #ffffff; padding: 0 10px; }

#reason-quality #page-top .secpad h3, #reason-elect #page-top .secpad h3 { position: relative; font-size: 1.5rem; padding-left: 85px; margin-bottom: 80px; }

#reason-quality #page-top .secpad h3::before, #reason-elect #page-top .secpad h3::before { display: inline-block; content: ''; width: 75px; height: 2px; position: absolute; left: 0; top: 15px; background-color: #E5E5E5; }

#reason-quality #page-top .secpad .probrem-list, #reason-elect #page-top .secpad .probrem-list { display: flex; padding: 0 60px 170px; }

#reason-quality #page-top .secpad .probrem-list .probrem-list-item, #reason-elect #page-top .secpad .probrem-list .probrem-list-item { width: 250px; }

#reason-quality #page-top .secpad .probrem-list .probrem-list-item:not(:last-child), #reason-elect #page-top .secpad .probrem-list .probrem-list-item:not(:last-child) { margin-right: 125px; }

#reason-quality #page-top .secpad .probrem-list .probrem-list-item img, #reason-elect #page-top .secpad .probrem-list .probrem-list-item img { display: block; margin: 0 auto 40px; }

#reason-quality #quality-1 .secpad, #reason-quality #quality-2 .secpad, #reason-quality #flexible .secpad, #reason-elect #quality-1 .secpad, #reason-elect #quality-2 .secpad, #reason-elect #flexible .secpad { max-width: 1400px; }

#reason-quality #quality-1 .secpad .quality-content, #reason-quality #quality-1 .secpad .flexible-content, #reason-quality #quality-2 .secpad .quality-content, #reason-quality #quality-2 .secpad .flexible-content, #reason-quality #flexible .secpad .quality-content, #reason-quality #flexible .secpad .flexible-content, #reason-elect #quality-1 .secpad .quality-content, #reason-elect #quality-1 .secpad .flexible-content, #reason-elect #quality-2 .secpad .quality-content, #reason-elect #quality-2 .secpad .flexible-content, #reason-elect #flexible .secpad .quality-content, #reason-elect #flexible .secpad .flexible-content { display: flex; justify-content: space-between; align-items: center; }

#reason-quality #quality-1 .secpad .quality-content .detail, #reason-quality #quality-1 .secpad .flexible-content .detail, #reason-quality #quality-2 .secpad .quality-content .detail, #reason-quality #quality-2 .secpad .flexible-content .detail, #reason-quality #flexible .secpad .quality-content .detail, #reason-quality #flexible .secpad .flexible-content .detail, #reason-elect #quality-1 .secpad .quality-content .detail, #reason-elect #quality-1 .secpad .flexible-content .detail, #reason-elect #quality-2 .secpad .quality-content .detail, #reason-elect #quality-2 .secpad .flexible-content .detail, #reason-elect #flexible .secpad .quality-content .detail, #reason-elect #flexible .secpad .flexible-content .detail { line-height: 2; }

#reason-quality #quality-1, #reason-quality #flexible, #reason-elect #quality-1, #reason-elect #flexible { background-color: #FFF5E9; }

#reason-quality #quality-1 .quality-heading img, #reason-quality #quality-1 .flexible-heading img, #reason-quality #flexible .quality-heading img, #reason-quality #flexible .flexible-heading img, #reason-elect #quality-1 .quality-heading img, #reason-elect #quality-1 .flexible-heading img, #reason-elect #flexible .quality-heading img, #reason-elect #flexible .flexible-heading img { margin: -50px 0 20px; }

#reason-quality #quality-1 .quality-content, #reason-quality #quality-1 .flexible-content, #reason-quality #flexible .quality-content, #reason-quality #flexible .flexible-content, #reason-elect #quality-1 .quality-content, #reason-elect #quality-1 .flexible-content, #reason-elect #flexible .quality-content, #reason-elect #flexible .flexible-content { padding: 60px 0 150px 100px; }

#reason-quality #quality-1 .quality-content .detail, #reason-quality #quality-1 .flexible-content .detail, #reason-quality #flexible .quality-content .detail, #reason-quality #flexible .flexible-content .detail, #reason-elect #quality-1 .quality-content .detail, #reason-elect #quality-1 .flexible-content .detail, #reason-elect #flexible .quality-content .detail, #reason-elect #flexible .flexible-content .detail { max-width: 630px; width: 100%; margin-right: 90px; }

#reason-quality #quality-1 .quality-content img, #reason-quality #quality-1 .flexible-content img, #reason-quality #flexible .quality-content img, #reason-quality #flexible .flexible-content img, #reason-elect #quality-1 .quality-content img, #reason-elect #quality-1 .flexible-content img, #reason-elect #flexible .quality-content img, #reason-elect #flexible .flexible-content img { max-width: 553px; width: 100%; box-shadow: 27px 23px #FD8F20; margin-right: 30px; }

#reason-quality #quality-1, #reason-elect #quality-1 { margin-bottom: 90px; }

#reason-quality #quality-2, #reason-elect #quality-2 { background: -ms-linear-gradient(right, #F5982B, #F5691A); background: -moz-linear-gradient(right, #F5982B, #F5691A); background: -webkit-linear-gradient(right, #F5982B, #F5691A); background: linear-gradient(right, #F5982B, #F5691A); color: #ffffff; }

#reason-quality #quality-2 .secpad .quality-heading, #reason-elect #quality-2 .secpad .quality-heading { text-align: right; }

#reason-quality #quality-2 .secpad .quality-heading img, #reason-elect #quality-2 .secpad .quality-heading img { margin-top: -50px; }

#reason-quality #quality-2 .secpad .quality-content, #reason-elect #quality-2 .secpad .quality-content { padding: 15px 0 100px; }

#reason-quality #quality-2 .secpad .quality-content img, #reason-elect #quality-2 .secpad .quality-content img { max-width: 550px; width: 100%; box-shadow: -27px 23px #E5E5E5; margin-right: 90px; margin-left: 30px; }

#reason-quality #quality-2 .secpad .quality-content .detail-area, #reason-elect #quality-2 .secpad .quality-content .detail-area { max-width: 630px; width: 100%; margin-right: 100px; }

#reason-quality #quality-2 .secpad .quality-content .detail-area .detail, #reason-elect #quality-2 .secpad .quality-content .detail-area .detail { margin-bottom: 40px; }

#reason-quality #quality-2 .secpad .quality-content .detail-area .detail-emp, #reason-elect #quality-2 .secpad .quality-content .detail-area .detail-emp { padding: 15px 30px; border: 2px solid #fff; }

#reason-quality .spacing-img, #reason-elect .spacing-img { width: 100%; height: 196px; background-position: bottom; position: fixed; z-index: -1; top: 0px; }

#reason-quality .spacing-img img, #reason-elect .spacing-img img { width: 100%; }

#reason-quality #for-sier, #reason-quality #for-maker-eng, #reason-elect #for-sier, #reason-elect #for-maker-eng { color: #ffffff; }

#reason-quality #for-sier .secpad, #reason-quality #for-maker-eng .secpad, #reason-elect #for-sier .secpad, #reason-elect #for-maker-eng .secpad { max-width: 1300px; display: flex; padding: 100px 0 90px; }

#reason-quality #for-sier .secpad .text, #reason-quality #for-maker-eng .secpad .text, #reason-elect #for-sier .secpad .text, #reason-elect #for-maker-eng .secpad .text { width: 660px; margin-right: 110px; }

#reason-quality #for-sier .secpad .text h3, #reason-quality #for-maker-eng .secpad .text h3, #reason-elect #for-sier .secpad .text h3, #reason-elect #for-maker-eng .secpad .text h3 { font-size: 2.3125rem; font-weight: bold; margin-bottom: 30px; }

#reason-quality #for-sier .secpad .text p, #reason-quality #for-maker-eng .secpad .text p, #reason-elect #for-sier .secpad .text p, #reason-elect #for-maker-eng .secpad .text p { margin-bottom: 50px; line-height: 1.8; }

#reason-quality #for-sier .secpad .text p a, #reason-quality #for-maker-eng .secpad .text p a, #reason-elect #for-sier .secpad .text p a, #reason-elect #for-maker-eng .secpad .text p a { display: inline; color: #ffffff; }

#reason-quality #for-sier .secpad .text .btnType1, #reason-quality #for-sier .secpad .text .btnType2, #reason-quality #for-maker-eng .secpad .text .btnType1, #reason-quality #for-maker-eng .secpad .text .btnType2, #reason-elect #for-sier .secpad .text .btnType1, #reason-elect #for-sier .secpad .text .btnType2, #reason-elect #for-maker-eng .secpad .text .btnType1, #reason-elect #for-maker-eng .secpad .text .btnType2 { width: 376px; font-size: 0.9375rem; color: #ffffff; }

#reason-quality #for-sier .secpad .text .detail-link, #reason-quality #for-maker-eng .secpad .text .detail-link, #reason-elect #for-sier .secpad .text .detail-link, #reason-elect #for-maker-eng .secpad .text .detail-link { text-decoration: underline; }

#reason-quality #for-sier .secpad .point-list-item, #reason-quality #for-maker-eng .secpad .point-list-item, #reason-elect #for-sier .secpad .point-list-item, #reason-elect #for-maker-eng .secpad .point-list-item { display: flex; }

#reason-quality #for-sier .secpad .point-list-item:not(:last-child), #reason-quality #for-maker-eng .secpad .point-list-item:not(:last-child), #reason-elect #for-sier .secpad .point-list-item:not(:last-child), #reason-elect #for-maker-eng .secpad .point-list-item:not(:last-child) { margin-bottom: 80px; }

#reason-quality #for-sier .secpad .point-list-item .image, #reason-quality #for-maker-eng .secpad .point-list-item .image, #reason-elect #for-sier .secpad .point-list-item .image, #reason-elect #for-maker-eng .secpad .point-list-item .image { width: 55px; margin-right: 40px; }

#reason-quality #for-sier .secpad .point-list-item .image img, #reason-quality #for-maker-eng .secpad .point-list-item .image img, #reason-elect #for-sier .secpad .point-list-item .image img, #reason-elect #for-maker-eng .secpad .point-list-item .image img { width: 100%; }

#reason-quality #for-sier, #reason-elect #for-sier { background-image: url(../images/sier-bg.jpg); background-size: cover; background-position: center center; }

#reason-quality #for-sier .secpad .text .linkBtn, #reason-elect #for-sier .secpad .text .linkBtn { text-align: left; padding-left: 30px; }

#reason-quality #for-sier .secpad .text .btnType1, #reason-elect #for-sier .secpad .text .btnType1 { background-color: #FD8F20; }

#reason-quality #for-maker-eng, #reason-elect #for-maker-eng { background-image: url(../images/maker-eng-bg.jpg); background-size: cover; background-position: center center; }

#reason-quality #for-maker-eng .secpad .text h3, #reason-quality #for-maker-eng .secpad .text p, #reason-elect #for-maker-eng .secpad .text h3, #reason-elect #for-maker-eng .secpad .text p { margin-bottom: 60px; }

#reason-quality #for-maker-eng .secpad .text .linkBtn, #reason-elect #for-maker-eng .secpad .text .linkBtn { text-align: left; padding-left: 30px; }

#reason-quality #for-maker-eng .secpad .text .btnType2, #reason-elect #for-maker-eng .secpad .text .btnType2 { background-color: #000000; color: #ffffff; }

#reason-quality #for-maker-eng .secpad .point-list-item:not(:last-child), #reason-elect #for-maker-eng .secpad .point-list-item:not(:last-child) { margin-bottom: 75px; }

#reason-quality #page-bottom, #reason-elect #page-bottom { background-color: #ffffff; padding: 60px 10px 90px; }

#reason-quality #page-bottom .secpad, #reason-elect #page-bottom .secpad { text-align: center; }

#reason-quality #page-bottom .secpad p, #reason-elect #page-bottom .secpad p { margin-bottom: 60px; }

#reason-quality #page-bottom .secpad .btnType1, #reason-elect #page-bottom .secpad .btnType1 { width: 435px; margin: 0 auto; background-color: #000000; color: #ffffff; }

/*-----------------------------------------------
よくある質問
-----------------------------------------------*/
#faq .secpad .page-top-text { text-align: center; margin-bottom: 85px; }

#faq .secpad .contact-info { text-align: center; }

#faq .secpad .contact-info .headingColorLine { margin-bottom: 50px; }

#faq .secpad .contact-info dl { margin-bottom: 15px; }

#faq .secpad .contact-info dl div { display: flex; justify-content: center; align-items: center; font-weight: bold; margin-bottom: 5px; }

#faq .secpad .contact-info dl div dt { width: 125px; background-color: #E5E5E5; border-radius: 6px; padding: 5px 0; margin-right: 15px; }

#faq .secpad .contact-info .linkBtnSimpleFrame { width: 285px; padding: 15px 0; }

#faq .secpad .faq-area { padding-top: 90px; }

#faq .secpad .faq-area::after { display: block; margin-top: 90px; content: ''; width: 100%; height: 2px; background-image: url(../images/hr.svg); background-repeat: repeat-x; }

#faq .secpad .faq-area dl .question { position: relative; font-size: 1.75rem; font-weight: bold; color: #FD8F20; margin-bottom: 50px; padding-left: 60px; }

#faq .secpad .faq-area dl .question::before { content: url("../images/Q.png"); display: inline-block; position: absolute; top: -10px; left: 0; }

#faq .secpad .faq-area dl .answer { position: relative; font-size: 1.5rem; font-weight: bold; color: #000000; margin-bottom: 20px; padding-left: 60px; }

#faq .secpad .faq-area dl .answer::before { content: url("../images/A.png"); display: inline-block; position: absolute; top: -12px; left: 0; }

#faq .secpad .faq-area .btnType1 { width: 330px; background-color: #000000; color: #ffffff; }

#faq .secpad .faq-area .detail, #faq .secpad .faq-area .linkBtn { margin-left: 60px; line-height: 1.8; }

#faq .secpad .page-bottom { padding: 120px 0; }

/*-----------------------------------------------
サポート
-----------------------------------------------*/
#support .secpad .page-top > img { width: 100%; margin-bottom: 55px; }

#support .secpad .detail-list { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 120px; }

#support .secpad .detail-list .detail-list-item { display: flex; width: calc(50% - 20px); margin-bottom: 40px; }

#support .secpad .detail-list .detail-list-item:nth-child(odd) { margin-right: 20px; }

#support .secpad .detail-list .detail-list-item .image { margin-right: 20px; }

#support .secpad .detail-list .detail-list-item .text dt { font-size: 1.1875rem; font-weight: bold; margin-bottom: 10px; }

#support .secpad .repair { width: 750px; margin: 0 auto 120px; padding: 60px 0; background-color: #FFF5E9; text-align: center; }

#support .secpad .repair .headingColorLine { margin-bottom: 30px; }

#support .secpad .repair p { line-height: 2; }

#support .secpad .repair p a { display: inline; }

/*-----------------------------------------------
ダウンロード
-----------------------------------------------*/
#download .secpad { margin-bottom: 120px; }

#download .secpad .twoColorAreaList { margin-bottom: 120px; }

#download .secpad .twoColorAreaList dt, #download .secpad .twoColorAreaList dd { width: 50%; }

#download .secpad .twoColorAreaList dt { padding: 15px 0 15px 35px; }

#download .secpad .twoColorAreaList dd { font-size: 0.9375rem; font-weight: bold; }

#download .secpad .twoColorAreaList dd a { margin: 0 auto; text-decoration: underline; }

#download .secpad .catalog-content { display: flex; }

#download .secpad .catalog-content img { width: 381px; margin-right: 30px; }

/*-----------------------------------------------
会社概要
-----------------------------------------------*/
#about #page-top { background-color: #ffffff; padding: 0 10px; }

#about .secpad { margin-bottom: 120px; padding: 0 15px; }

#about .secpad .twoColorAreaListNoBorder dt { width: 35%; padding-left: 40px; font-weight: bold; }

#about .secpad .twoColorAreaListNoBorder > dd, #about .secpad .twoColorAreaListNoBorder div { width: 65%; padding: 35px 30px; }

#about .secpad .twoColorAreaListNoBorder dd { line-height: 1.8; }

#about .secpad .twoColorAreaListNoBorder dd a { text-decoration: underline; }

#about .secpad .twoColorAreaListNoBorder .wrap a { display: inline; }

#about .secpad .twoColorAreaListNoBorder .bottom-spacing { margin-bottom: 15px; }

/*-----------------------------------------------
研究発表
-----------------------------------------------*/
#study .secpad .page-top-text { text-align: center; font-size: 1.5625rem; margin-bottom: 100px; }

#study .secpad .study-list { display: flex; flex-wrap: wrap; margin-bottom: 90px; }

#study .secpad .study-list-item { max-width: calc((100% - 90px) / 3); width: 100%; }

#study .secpad .study-list-item:not(:nth-child(3n)) { margin-right: 45px; }

#study .secpad .study-list-item:nth-child(-n+3) { margin-bottom: 45px; }

#study .secpad .study-list-item .thumb { margin-bottom: 15px; width: 100%; text-align: center; }

#study .secpad .study-list-item .thumb img { max-width: 100%; }

#study .secpad .study-list-item .title { height: 50px; font-weight: bold; margin-bottom: 10px; line-height: 1.3; }

#study .secpad .study-list-item .author { height: 50px; margin-bottom: 30px; line-height: 1.3; }

#study .secpad .study-list-item .linkBtnSimpleFrame { text-align: center; padding: 10px 0; }

/*-----------------------------------------------
カタログダウンロード
-----------------------------------------------*/
#catalog .secpad .page-top-text { text-align: center; font-size: 1.5625rem; margin-bottom: 100px; }

#catalog .secpad .study-list { display: flex; flex-wrap: wrap; margin-bottom: 90px; }

#catalog .secpad .study-list-item { max-width: calc((100% - 90px) / 4); width: 100%; display: flex; flex-direction: column; }

#catalog .secpad .study-list-item:not(:nth-child(4n)) { margin-right: 30px; }

#catalog .secpad .study-list-item:nth-child(n+5) { margin-top: 50px; }

#catalog .secpad .study-list-item .thumb { margin-bottom: 5px; width: 100%; text-align: center; }

#catalog .secpad .study-list-item .thumb img { max-width: 100%; }

#catalog .secpad .study-list-item .title { font-weight: bold; margin-bottom: 10px; line-height: 1.3; }

#catalog .secpad .study-list-item .author { margin-bottom: 15px; line-height: 1.3; }

#catalog .secpad .study-list-item .linkBtnSimpleFrame { text-align: center; padding: 10px 0; margin: auto 0 0; }

/*-----------------------------------------------
デモ機申し込み
-----------------------------------------------*/
#demo .secpad .page-top-text { font-size: 1.25rem; text-align: center; margin-bottom: 20px; }

#demo .secpad .demo-detail { margin-bottom: 35px; text-align: center; }

#demo .secpad .demo-detail p { margin-bottom: 30px; line-height: 2.1; }

#demo .secpad .demo-detail p:last-child { margin-bottom: 15px; font-weight: bold; }

#demo .secpad .btnType1 { width: 376px; margin: 0 auto 90px; background-color: #000000; color: #ffffff; text-align: left; padding-left: 25px; }

/*-----------------------------------------------
個人情報保護
-----------------------------------------------*/
#privacy .secpad { margin: 0 auto 80px; }

#privacy .secpad p:not(:last-child) { margin-bottom: 50px; }

#privacy .secpad p a { display: inline; color: #245783; }

#privacy .secpad .privacy-list { margin-bottom: 90px; }

#privacy .secpad .privacy-list-item { margin: 0 0 30px; }

#privacy .secpad .privacy-list-item > h2 { margin-bottom: 0.3em; }

#privacy .secpad .privacy-list-item > p { margin-bottom: 0.5em; line-height: 1.9; }

#privacy .secpad .privacy-list-item .disclosure-cond-list li { margin: 0 0 0.5em 1.5em; list-style-type: disc; }

/*-----------------------------------------------
新着情報
-----------------------------------------------*/
#info .secpad .info-list { margin-bottom: 60px; }

#info .secpad .info-list-item a { display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid #E5E5E5; font-size: 0.9375rem; }

#info .secpad .info-list-item a time { min-width: 100px; font-size: 1rem; margin-right: 30px; }

#info .secpad .info-list-item a .title { width: 1000px; }

#info .secpad .pagination { margin-bottom: 160px; }

#info .secpad .pagination .page-numbers { display: flex; justify-content: center; }

#info .secpad .pagination .page-numbers li:not(:last-child) { margin-right: 10px; }

#info .secpad .pagination .page-numbers li span, #info .secpad .pagination .page-numbers li a { padding: 10px 20px; font-size: 1.5rem; font-weight: bold; background-color: #E5E5E5; color: #ffffff; }

#info .secpad .pagination .page-numbers li .current { background-color: #FD8F20; }

#info .secpad .pagination .page-numbers li .next { background-color: #E5E5E5; }

/*-----------------------------------------------
新着情報-シングルページ
-----------------------------------------------*/
#info-s .secpad { padding-bottom: 120px; max-width: 900px; }

#info-s .secpad h2 { margin-bottom: 20px; }

#info-s .secpad a { text-decoration: underline; }

#info-s .secpad p { line-height: 1.8; }

#info-s .secpad p:not(:last-child) { margin-bottom: 30px; }

#info-s .secpad img { width: 100%; }

#info-s .secpad figure { max-width: 750px; margin: 0 auto; }

#info-s .secpad figure:not(:last-child) { margin-bottom: 30px; }

#info-s .secpad figcaption { text-align: center; font-size: 13px; color: #757575; }

/*-----------------------------------------------
お問い合わせ
-----------------------------------------------*/
#contact .secpad { margin-bottom: 120px; }

#contact .secpad .mailform-detail { text-align: center; font-size: 1.5rem; font-weight: bold; margin-bottom: 30px; }

#contact .secpad .privacy { max-width: 560px; width: 100%; margin: 20px auto; text-align: center; border: 1px solid #000; padding: 20px; }

#contact .secpad .privacy .aste { color: #FD8F20; }

#contact .secpad .privacy div { display: flex; justify-content: center; }

#contact .secpad .privacy div a { margin-left: 20px; text-decoration: underline; color: #1768c6; display: inline; }

#contact .secpad form .twoColorAreaListNoBorder dt, #contact .secpad form .twoColorAreaListNoBorder dd { padding: 20px 0; }

#contact .secpad form .twoColorAreaListNoBorder dt { width: 35%; padding-left: 40px; font-weight: bold; }

#contact .secpad form .twoColorAreaListNoBorder dt a { text-decoration: underline; color: #1768c6; display: inline; }

#contact .secpad form .twoColorAreaListNoBorder dt span { margin-left: 10px; font-weight: normal; color: #FD8F20; }

#contact .secpad form .twoColorAreaListNoBorder dt .note { font-size: 13px; font-weight: normal; color: #5a5a5a; padding-right: 15px; margin-left: 0; }

#contact .secpad form .twoColorAreaListNoBorder dd { width: 65%; padding-right: 40px; flex-direction: column; align-items: flex-start; }

#contact .secpad form .twoColorAreaListNoBorder dd input[type="text"], #contact .secpad form .twoColorAreaListNoBorder dd input[type="email"], #contact .secpad form .twoColorAreaListNoBorder dd input[type="tel"] { outline: 0; width: 100%; height: 50px; background-color: #ffffff; border: 1px solid #999999; padding: 10px; }

#contact .secpad form .twoColorAreaListNoBorder dd textarea { outline: 0; width: 100%; height: 200px; background-color: #ffffff; border: 1px solid #999999; padding: 10px; }

#contact .secpad form .twoColorAreaListNoBorder .check-list, #contact .secpad form .twoColorAreaListNoBorder .radio-list { flex-direction: row; }

#contact .secpad form .twoColorAreaListNoBorder .radio-product span label::after { font-size: 13px; }

#contact .secpad form .twoColorAreaListNoBorder .radio-product span:nth-child(1) label::after { content: '各種機器への組込みに使用する製品'; }

#contact .secpad form .twoColorAreaListNoBorder .radio-product span:nth-child(2) label::after { content: 'デスクトップにそのまま置いて使用する製品'; }

#contact .secpad form .twoColorAreaListNoBorder .radio-product span:nth-child(3) label::after { content: 'LCD不要の場合にはこちらを選択ください'; }

#contact .secpad form .twoColorAreaListNoBorder .radio-product span:nth-child(4) label::after { content: 'タッチパネル不要の場合にはこちらを選択ください'; }

#contact .secpad form .twoColorAreaListNoBorder .radio-product span:nth-child(5) label::after { content: '下記「お問い合せ内容」欄にご記入ください'; }

#contact .secpad form .twoColorAreaListNoBorder .radio-os span label::after { font-size: 13px; }

#contact .secpad form .twoColorAreaListNoBorder .radio-os span:nth-child(7) label::after { content: '下記「お問い合せ内容」欄にご記入ください'; }

#contact .secpad form .twoColorAreaListNoBorder .check-list { display: flex; flex-wrap: wrap; }

#contact .secpad form .twoColorAreaListNoBorder .check-list .horizontal-item { width: calc(33%); margin-left: 0; }

#contact .secpad form .twoColorAreaListNoBorder .check-list.w100 .horizontal-item, #contact .secpad form .twoColorAreaListNoBorder .radio-list.w100 .horizontal-item { width: 100%; display: block; }

#contact .secpad form .twoColorAreaListNoBorder .check-list.w100 .horizontal-item + .horizontal-item, #contact .secpad form .twoColorAreaListNoBorder .radio-list.w100 .horizontal-item + .horizontal-item { margin-left: 0; }

#contact .secpad form .twoColorAreaListNoBorder .check-list-l { flex-direction: column; }

#contact .secpad form .twoColorAreaListNoBorder .check-list-l > span { display: block; width: 100%; margin-left: 0 !important; }

#contact .secpad form .twoColorAreaListNoBorder .select-one > div { width: 33%; }

#contact .secpad form .twoColorAreaListNoBorder .select-one > div label { width: 100%; }

#contact .secpad form .twoColorAreaListNoBorder .multi { flex-direction: column; align-items: flex-start; }

#contact .secpad form .twoColorAreaListNoBorder .multi span { margin-left: 0; }

#contact .secpad form .linkBtn { width: 300px; text-align: center; background-color: #000000; margin: 40px auto; padding: 0; }

#contact .secpad form .linkBtn::after { top: 18px; }

#contact .secpad form .linkBtn input { width: 100%; color: #ffffff; padding: 20px 0; }

#notfound { padding-top: 0; }

#notfound .content { background-image: url("/images/404logo.png"); background-size: contain; background-position: center center; padding: 100px 0; margin: 60px 0 120px; text-align: center; }

#notfound .content p { color: #666; }

#notfound .content p:first-child { font-size: 72px; }

#notfound .content p:last-child { font-size: 32px; }

/*-----------------------------------------------
資料フォーム
-----------------------------------------------*/
.page-id-483 main .secpad { max-width: 900px; }

.page-id-483 main .secpad h2 { margin-top: 60px; }

.page-id-483 main .secpad h3 { margin-bottom: 15px; }

/*-----------------------------------------------
タッチパネルの仕組み
5/19追加
-----------------------------------------------*/
#mecha { padding-bottom: 90px; }

.mecha-wrap { max-width: 1000px; width: 100%; margin: 0 auto; }

.mecha-wrap ul { display: flex; flex-wrap: wrap; justify-content: space-between; }

.mecha-wrap li { width: calc((100% - 30px) / 2); }

.mecha-wrap li:nth-child(n+3) { margin-top: 30px; }

.mecha-wrap li a { border: solid 1px #dedede; padding: 22px; }

.mecha-wrap li img { width: 100%; }

.mecha-wrap li h3 { text-align: center; }

.mecha-wrap li h3 .note { font-size: 0.95rem; display: block; font-weight: normal; }

.mechanism-sub p, .mechanism-sub iframe { margin-bottom: 20px; }

.mechanism-sub table { border-collapse: collapse; font-size: 13px; }

.mechanism-sub table th, .mechanism-sub table td { padding: 10px; }

.mechanism-sub table .symbol { text-align: center; }

.mechanism-sub .secpad { display: flex; padding-bottom: 50px; }

.mechanism-sub .secpad .m-contents { width: calc(100% - 380px); }

.mechanism-sub .secpad aside { width: 350px; margin-left: 30px; }

.mechanism-sub .secpad aside h2 { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 2px solid #E5E5E5; }

@media screen and (min-width: 769px) { .mechanism-sub .secpad aside .mecha-wrap li { width: 100%; }
  .mechanism-sub .secpad aside .mecha-wrap li:nth-child(n+3) { margin: 0; }
  .mechanism-sub .secpad aside .mecha-wrap li:not(:first-child) { margin-top: 30px; }
  .mechanism-sub .secpad aside .mecha-wrap li h3 { text-align: left; line-height: 1.3; } }

/*-----------------------------------------------
 本ウェブサイトのご利用について
-----------------------------------------------*/
#terms #intro { text-align: center; margin-bottom: 30px; }

#terms section:not(:last-child) { margin-bottom: 30px; }

#terms section .secpad { max-width: 900px; }

#terms section .secpad h2 { border-left: 2px solid #FD8F20; padding-left: 10px; margin-bottom: 5px; }

#terms #contact .secpad div { width: 400px; margin: 20px auto 0; padding: 30px; border: 1px solid #E5E5E5; }

#terms #contact .secpad div h3 { text-align: center; }

#terms #contact .secpad div p { display: flex; justify-content: center; margin-bottom: 30px; }

#terms #contact .secpad div .contactBtn { color: #fff; margin: 0 10px; }

.iframe-wrap { width: 100%; height: 0; position: relative; padding-top: 56.25%; overflow: hidden; }

.iframe-wrap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/*-----------------------------------------------
採用事例
-----------------------------------------------*/
.mb-30 { margin-bottom: 30px; }

.mb-50 { margin-bottom: 50px; }

.box-content { display: flex; width: 100%; }

.box-content .box-content_child { text-align: center; }

.box-content .box-content_child img { width: calc(100% /2); }

.box-content .box-content_left, .box-content .box-content_right { width: calc(100% /2); margin: auto; }

/*ul.child-menu { overflow: hidden; width: 200%; height: 0; top: 10px; color: #fff; list-style: none; position: absolute; top: 100%; /* left: 0; */
/*  margin: 0; padding: 0;*/
/*  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
/*.menu-list:hover ul.child-menu {
    overflow: visible;
    height: 38px;
    border-bottom: 2px solid #FD8F20;
    background: #fff;
    width: 200px;
    padding: 20px;
}
#gnav > ul > li.menu-list > ul > li:hover{
    border-bottom:none;
}
*/
.box-text-content { margin-bottom: 20px; }

/*-----------------------------------------------
パス枠線
-----------------------------------------------*/
.post-password-form > p > label > input { border: solid 1px #000; }

.post-password-form > p > input { padding: 2px; background: #dfdede; border: solid 1px #000; }

/*-----------------------------------------------
画像小さく
-----------------------------------------------*/
.img_50 { width: 50%; }

/*-----------------------------------------------
採用事例動画紹介文字
-----------------------------------------------*/
.movie-text { font-weight: initial; font-size: large; }

.movie-text-link { font-size: large; border-bottom: #bbb4b4 2px dotted; width: 120px; }

/*-----------------------------------------------
ヘッダーのメニュー
-----------------------------------------------*/
.header-news-wrap { display: flex; }

.header-news-wrap .header-news { margin: auto 20px; }

.header-news-wrap .header-news p { background: #f57920; padding: 10px; color: white; padding: 15px; border-radius: 50px; font-size: small; }

.sp-news { display: none; }

@media screen and (max-width: 760px) { .header-news { display: none; }
  .sp-news { display: block; padding: 10px; background: #fd8f20; }
  .sp-news a p { color: white !important; } }

/*-----------------------------------------------
製品情報 → ノンフレームタイプ
-----------------------------------------------*/
#non-frame .wrapper { max-width: 1120px; width: 100%; margin: 0 auto 100px; }

#non-frame .wrapper section { margin-bottom: 50px; }

#non-frame .wrapper span { color: #c00; }

#non-frame .annot { font-size: 13px; }

#non-frame .intro .text { text-align: center; padding: 0 5px; font-size: 18px; }

#non-frame .intro .annot { text-align: right; padding: 0 5px; margin-bottom: 20px; }

#non-frame .intro .image { max-width: 719px; margin: 0 auto; padding: 10px 5px; }

#non-frame .intro .image img { width: 100%; }

#non-frame .lineup h2 { margin-bottom: 5px; }

#non-frame .lineup h2::before { content: '■'; color: #FD8F20; margin-right: 5px; }

#non-frame .lineup table { font-size: 14px; line-height: 1.3; text-align: center; border-collapse: collapse; border-spacing: 0; border: 1px solid #000; margin-bottom: 5px; }

#non-frame .lineup table tr th, #non-frame .lineup table tr td { padding: 10px 5px; }

#non-frame .lineup table tr th:not(:last-child), #non-frame .lineup table tr td:not(:last-child) { border-right: 1px solid #000; }

#non-frame .lineup table tr th { font-weight: normal; background-color: #e6e6e6; }

#non-frame .lineup table thead th, #non-frame .lineup table thead td { border-bottom: 1px solid #000; }

#non-frame .lineup table tbody tr:not(:last-child) th, #non-frame .lineup table tbody tr:not(:last-child) td { border-bottom: 1px solid #000; }

#non-frame .lineup table .no-bb { border-bottom: none !important; }

#non-frame .lineup .annot-list { margin-bottom: 30px; }

#non-frame .lineup .annot-list li { font-size: 13px; line-height: 1.5; text-indent: -1.8em; padding-left: 1.8em; }

#non-frame .other .list { border: 1px solid #000; }

#non-frame .other .list h3 { width: 100%; padding: 10px 5px; background-color: #FD8F20; color: #fff; text-align: center; }

#non-frame .other .list dl { display: flex; flex-wrap: wrap; }

#non-frame .other .list dl dt, #non-frame .other .list dl dd { padding: 10px; }

#non-frame .other .list dl dt:not(:nth-last-child(-n + 2)), #non-frame .other .list dl dd:not(:nth-last-child(-n + 2)) { border-bottom: 1px solid #000; }

#non-frame .other .list dl dt { width: 30%; border-right: 1px solid #000; }

#non-frame .other .list dl dt::before { content: '■'; color: #FD8F20; margin-right: 5px; }

#non-frame .other .list dl dd { width: 70%; }

#non-frame .other .annot { text-align: right; }

#non-frame .linkBtn { background: -ms-linear-gradient(left, #f5dc2b, #F5691A); background: -moz-linear-gradient(left, #f5dc2b, #F5691A); background: -webkit-linear-gradient(left, #f5dc2b, #F5691A); background: linear-gradient(left, #f5dc2b, #F5691A); color: #ffffff; background-size: 200% 200%; animation: gradBtn 3s ease infinite; width: 350px; margin: 0 auto 70px; }

#non-frame .demo { display: flex; max-width: 900px; width: 100%; margin: 0 auto; padding: 30px; background-color: #e6e6e6; }

#non-frame .demo .text { width: 60%; }

#non-frame .demo .text h3::before { content: '■'; color: #FD8F20; margin-right: 5px; }

#non-frame .demo .text p { padding-left: 1.5em; }

#non-frame .demo .image { width: 40%; display: flex; justify-content: center; align-items: center; }

@media screen and (max-width: 1120px) { #non-frame .wrapper { padding: 0 5px; }
  #non-frame .wrapper .lineup table { display: block; overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; } }

@media screen and (max-width: 768px) { #non-frame .wrapper .intro .text { text-align: left; }
  #non-frame .wrapper .demo { padding: 10px; flex-direction: column; }
  #non-frame .wrapper .demo .text, #non-frame .wrapper .demo .image { width: 100%; } }

@media screen and (max-width: 560px) { #non-frame .wrapper .intro .annot, #non-frame .wrapper .other .annot { text-align: left; } }

#sample .secpad .intro { margin-bottom: 40px; text-align: center; line-height: 1.8; }

#sample .secpad .image-area { display: flex; margin: 30px 0; }

#sample .secpad .image-area > * { width: 50%; }

#sample .secpad .image-area > * .image { margin: 10px 20px; }

#sample .secpad .image-area > * .image img { width: 100%; }

#sample .secpad .image-area > * .text { text-align: center; font-size: 14px; }

@media screen and (max-width: 750px) { #sample .secpad .image-area { flex-direction: column; }
  #sample .secpad .image-area > * { width: 100%; }
  #sample .secpad .image-area > *:first-child { margin-bottom: 30px; } }

#sample .secpad .notes { border: 6px solid #E5E5E5; padding: 20px; margin-bottom: 30px; }

#sample .secpad .notes dt { text-align: center; font-weight: bold; font-size: 22px; margin-bottom: 20px; }

#sample .secpad .notes dd { text-indent: -1.25em; padding-left: 1.25em; margin-bottom: 10px; }

#sample .secpad .linkBtn { width: 300px; text-align: center; background-color: #000000; margin: 40px auto; padding: 0; }

#sample .secpad .linkBtn::after { top: 18px; }

#sample .secpad .linkBtn input, #sample .secpad .linkBtn a { width: 100%; color: #ffffff; padding: 20px 0; }

#sample .secpad .h-adr dt .aste, #sample .secpad .h-adr dd .aste { color: #FD8F20; margin-left: 10px; }

#sample .secpad .h-adr dt { width: 35%; padding: 20px 20px 20px 40px; font-weight: bold; }

#sample .secpad .h-adr dt span { font-weight: normal; }

#sample .secpad .h-adr dd { width: 65%; padding: 20px 40px 20px 0; }

#sample .secpad .h-adr dd input, #sample .secpad .h-adr dd textarea, #sample .secpad .h-adr dd select { width: 100%; background-color: #fff; padding: 5px; border: 1px solid #999; }

#sample .secpad .h-adr .zip input { max-width: 100%; width: auto; }

#sample .secpad .h-adr .radio { display: flex; flex-direction: column; }

#sample .secpad .h-adr .radio .horizontal-item { margin-left: 0; }

#sample .secpad .h-adr .radio input { max-width: 100%; width: auto; }

#sample .secpad .h-adr .multi dd { flex-direction: column; align-items: flex-start; }

#sample .secpad .h-adr .address { display: flex; }

#sample .secpad .h-adr .address select { width: 30%; margin-right: 10px; }

#sample .secpad .h-adr .address input { width: 70%; }

#sample .secpad .h-adr .size, #sample .secpad .h-adr .content { flex-direction: column; align-items: flex-start; }

#sample .secpad .mailform-detail { text-align: center; margin: 20px 0; font-size: 20px; }

#sample .secpad .classifier { display: flex; align-items: center; }

#sample .secpad .classifier input { width: 100px !important; margin-right: 10px; }

#sample .secpad .privacy { max-width: 560px; width: 100%; margin: 20px auto; text-align: center; border: 1px solid #000; padding: 20px; }

#sample .secpad .privacy .aste { color: #FD8F20; }

#sample .secpad .privacy div { display: flex; justify-content: center; }

#sample .secpad .privacy div a { margin-left: 20px; text-decoration: underline; color: #1768c6; display: inline; }

#sample .secpad table th, #sample .secpad table td { text-align: center; }

#sample .secpad table th { padding: 0 10px; }

@media screen and (max-width: 560px) { #sample .notes { padding: 10px; }
  #sample .secpad .intro { text-align: left; }
  #sample .secpad .h-adr { flex-direction: column; }
  #sample .secpad .h-adr dt, #sample .secpad .h-adr dd { width: 100%; padding: 15px; }
  #sample .secpad .h-adr dt { padding-bottom: 0px; } }

/*# sourceMappingURL=style.css.map */