@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css); @charset "UTF-8";  html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } body { margin: 0 } nav { display: block } h1 { font-size: 2em; margin: .67em 0 } figure { display: block } figure { margin: 1em 40px } a { background-color: transparent; -webkit-text-decoration-skip: objects } a:active, a:hover { outline-width: 0 } img { border-style: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } html { box-sizing: border-box; font-size: 100% } *, *::before, *::after { box-sizing: inherit } body { margin: 0; padding: 0; background: #fefefe; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; line-height: 1.5; color: #0a0a0a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic } html, body, div, span, h1, h2, h3, p, a, img, i, ul, li, figure, nav { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } figure, nav { display: block } body { line-height: 1 } ul { list-style: none } .contents h2, .contents h3, .contents p, .contents li { font-size: 16px; font-weight: 300; line-height: 1.6; font-feature-settings: "palt" } @media screen and (max-width:767px) { .contents h2, .contents h3, .contents p, .contents li {   font-size: 14px } } html, body { height: 100% } body { overflow-x: hidden; color: #222; font-family: "Noto Sans Japanese", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif } a { color: #222; text-decoration: none } @media screen and (min-width:1024px) { a:hover {   text-decoration: underline } .hov:hover {   opacity: .7 } } img { max-width: 100%; height: auto; vertical-align: bottom } br.smart-on { display: none } br.smart-off { display: inline } @media screen and (max-width:520px) { br.smart-on {   display: inline } br.smart-off {   display: none } } @font-face { font-family: 'fonts'; src: url(../fonts/fonts-ielakg.ttf) format("truetype"), url(../fonts/fonts-ielakg.woff) format("woff"), url("../fonts/fonts-ielakg.svg#fonts") format("svg"); font-weight: 400; font-style: normal } [class^="icon-"] { font-family: 'fonts' !important; speak: none; font-style: normal; font-weight: 700; font-variant: normal; text-transform: none; line-height: 1; color: #eac709; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .icon-arrow:before { content: "\e900" } .icon-up:before { content: "\e90a" } @font-face { font-family: 'foot-action'; src: url(../fonts/foot-action.eot?cil2vh); src: url('../fonts/foot-action.eot?cil2vh#iefix') format('embedded-opentype'), url(../fonts/foot-action.ttf?cil2vh) format('truetype'), url(../fonts/foot-action.woff?cil2vh) format('woff'), url('../fonts/foot-action.svg?cil2vh#foot-action') format('svg'); font-weight: 400; font-style: normal } [class^="fa-"], [class*=" fa-"] { font-family: 'foot-action' !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .fa-package:before { content: "\e800" } .fa-file-text2:before { content: "\e926" } .fa-cart:before { content: "\e93a" } .fa-download2:before { content: "\e9c5" } .cf:before, .cf:after { content: ""; display: block; overflow: hidden } .cf:after { clear: both } .cf { zoom: 1 } h2.type_a { width: 100%; height: 59px; line-height: 59px; background: #fff; font-weight: 500; box-sizing: border-box; padding: 0 30px 0 20px; font-size: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 2px solid #fad92b; position: relative } h2.type_a span { width: 88px; font-size: 14px; height: 14px; display: block; position: absolute; top: 0; right: 30px } h2.type_a span:before { content: url(../../common/images/icon-arrow.png); width: 7px; height: 11px; position: relative; top: 0; padding-right: 10px } h2.type_b { font-size: 26px; padding-bottom: 20px; line-height: 1.3; border-bottom: 3px solid #c8d3de; position: relative; margin-top: 70px; margin-bottom: 40px; box-sizing: border-box; font-weight: 500 } h2.type_b:after { position: absolute; bottom: -3px; left: 0; content: ""; height: 3px; width: 78px; background: #fad92b } h2.type_c { position: relative; text-align: center; padding-bottom: 21px; font-size: 24px; font-weight: 700; margin-top: 70px } h2.type_c.no-titlePage { margin-top: 70px } h2.type_c:after { position: absolute; bottom: -3px; left: calc(50% - 20px); content: ""; height: 3px; width: 40px; background: #fad92b } h2.side-header { color: #222; font-size: 16px; font-weight: 700; text-align: left; background-color: #fff; height: 45px; line-height: 45px; padding-left: 16px; margin: 0; border: none; border-bottom: #fad92b 3px solid; border-top-left-radius: 5px; border-top-right-radius: 5px } #wrapper { width: 100%; height: 100%; margin: 0 auto } @media screen and (max-width:767px) { #wrapper {   overflow-x: hidden;   -webkit-overflow-scrolling: touch } } .contents { zoom: 1 } .contents:before, .contents:after { content: ""; display: table; height: 0; visibility: hidden } .contents:after { clear: both } #contents-zone { background-color: #ebeff2; padding-top: 40px } #cnt-home #contents-zone { padding-top: 60px } #inner { width: 1100px; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; position: relative } #left-content { width: 100%; max-width: 800px; flex-flow: row wrap; justify-content: space-between } #header { position: relative; width: 1100px; height: 100px; margin: auto } #header a { text-decoration: none; display: block; color: #222; line-height: 1 } #header #head-logo, #header #gnav, #header #sub-nav, #header #tag-line { position: absolute } #header #head-logo { top: 40px; left: 0 } #header #head-logo img { height: 46px } #header #logo-labo { width: 120px; top: 52px; left: 54px; position: absolute } #header #logo-labo img { width: 100% } #header #tag-line { top: 6px; left: 0; font-size: 13px; color: #777 } #header #tag-line br { display: none } #header #gnav { left: 0; bottom: 0; width: 1100px } #header #gnav li { display: inline-block; height: 50px; line-height: 50px; font-size: 14px; font-weight: 700; margin: 0; position: relative } #header #gnav li:hover { opacity: .7 } #header #gnav li:after { position: absolute; content: ""; background: #dadbdd; top: 10px; right: 0; width: 1px; height: 30px } #header #gnav li:last-child:after { display: none } #header #gnav a { height: 50px; line-height: 50px; display: inline-block } #header #gnav a.current { color: #dabb1a } #header #gnav li.menu_pro.l { border-top-left-radius: 5px } #header #gnav li.menu_pro.r { border-top-right-radius: 5px } #header #gnav li.menu_pro.l:after { background: #d6c152 } #header #gnav li.menu_pro.r:after { display: none } #header #sub-nav { top: 54px; right: 0 } #header #sub-nav li { float: left; font-size: 14px; margin-right: 34px; position: relative } #header #sub-nav li:last-child { margin-right: 0 } #header #sub-nav i { margin-right: 4px; font-size: 10px } #header #sub-nav li#btn_contact { width: 173px; height: 36px; line-height: 36px; text-align: center; background-color: #fad92b; border-radius: 18px; font-weight: 700; margin-top: -11px; position: relative } #header #sub-nav li#btn_contact a { padding: 11px 0; text-indent: 22px } #header #sub-nav li#btn_contact a:before { content: ""; display: inline-block; width: 26px; height: 19px; position: absolute; top: 9px; left: 22px; background: url(../images/icon-mail.png) no-repeat; background-size: contain; vertical-align: middle; background-blend-mode: multiply } #header #sub-nav li a.external { padding-right: 22px } #header #sub-nav li a.external:after { position: absolute; right: 0; content: ""; width: 16px; height: 16px; background: url(../images/icon-out.png) center center no-repeat; background-size: cover } @media screen and (min-width:960px) { #header #sp-nav {   display: none } } @media screen and (max-width:959px) { #header {   width: auto;   height: 80px } #header a {   text-decoration: none;   display: block;   color: #000;   line-height: 1 } #header #head-logo, #header #gnav, #header #sub-nav {   position: static } #header #head-logo {   position: absolute;   top: 10px;   left: 10px;   width: 120px } #header #logo-labo {   top: 27px;   left: 90px } #header #tag-line {   top: 20px;   left: 300px;   line-height: 1.5;   font-size: 10px;   color: #777 } #header #tag-line br {   display: inline } #header nav {   display: none;   position: absolute;   top: 80px;   left: 0;   width: 100%;   padding-bottom: 15px;   background: #f2f2f2 } #header #gnav {   left: 0;   bottom: 10px;   width: 100%;   border-top: 1px solid #ddd;   text-align: center;   background: #fff } #header #gnav li {   display: block;   margin: 0;   border-bottom: 1px solid #ddd;   text-align: center;   padding: 0 } #header #gnav li a {   width: 100% } #header #gnav li:last-child {   margin-bottom: 0 } #header #sub-nav {   border-bottom: 1px solid #ddd;   background: #fff;   zoom: 1 } #header #sub-nav:before, #header #sub-nav:after {   content: "";   display: table;   height: 0;   visibility: hidden } #header #sub-nav:after {   clear: both } #header #sub-nav li {   float: left;   width: 50%;   margin: 0;   font-size: 14px;   text-align: center;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   -ms-box-sizing: border-box;   -o-box-sizing: border-box;   box-sizing: border-box } #header #sub-nav li:first-child {   margin: 0;   border-right: 1px solid #ddd } #header #sub-nav a {   display: block;   padding: 15px 0 } #header #sub-nav i {   margin-right: 2px;   font-size: 10px } #header #sub-nav li:not(#btn_contact) {   display: none } #header #sub-nav li#btn_contact {   margin-top: 0;   padding: 0;   width: 100%;   border-radius: 0;   line-height: 50px;   height: 50px } #header #sub-nav li#btn_contact a {   text-indent: 0;   line-height: 50px;   height: 50px;   padding: 0 } #header #sub-nav li#btn_contact a:before {   position: absolute;   left: calc(50% - 78px);   top: 16px;   margin-left: 0 } #header #sp-nav {   display: block;   position: absolute;   top: 10px;   right: 10px;   width: 60px;   height: 60px;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   -ms-box-sizing: border-box;   -o-box-sizing: border-box;   box-sizing: border-box;   z-index: 9999;   line-height: 1 } #header #sp-nav figure {   position: absolute;   left: 50%;   top: 50%;   display: block;   width: 36px;   height: 3px;   margin: -1px 0 0 -18px;   -webkit-border-radius: 1.5px;   -moz-border-radius: 1.5px;   -ms-border-radius: 1.5px;   border-radius: 1.5px;   background: #fad92b;   transition: all 0.3s;   -moz-transition: all 0.3s;   -webkit-transition: all 0.3s;   -ms-transition: all 0.3s;   -o-transition: all 0.3s;   transform: rotate(0deg);   -moz-transform: rotate(0deg);   -webkit-transform: rotate(0deg);   -ms-transform: rotate(0deg);   -o-transform: rotate(0deg) } #header #sp-nav figure:first-child {   transform: translateY(-12px);   -moz-transform: translateY(-12px);   -webkit-transform: translateY(-12px);   -ms-transform: translateY(-12px);   -o-transform: translateY(-12px) } #header #sp-nav figure:last-child {   transform: translateY(12px);   -moz-transform: translateY(12px);   -webkit-transform: translateY(12px);   -ms-transform: translateY(12px);   -o-transform: translateY(12px) } #header #sp-nav.on figure:first-child {   transform: rotate(-45deg) translateY(0);   -moz-transform: rotate(-45deg) translateY(0);   -webkit-transform: rotate(-45deg) translateY(0);   -ms-transform: rotate(-45deg) translateY(0);   -o-transform: rotate(-45deg) translateY(0) } #header #sp-nav.on figure:nth-child(2) {   transform: scaleX(0);   -moz-transform: scaleX(0);   -webkit-transform: scaleX(0);   -ms-transform: scaleX(0);   -o-transform: scaleX(0) } #header #sp-nav.on figure:last-child {   transform: rotate(45deg) translateY(0);   -moz-transform: rotate(45deg) translateY(0);   -webkit-transform: rotate(45deg) translateY(0);   -ms-transform: rotate(45deg) translateY(0);   -o-transform: rotate(45deg) translateY(0) } #header #gnav li.menu_pro.l, #header #gnav li.menu_pro.r {   padding: 0 } } @media screen and (max-width:520px) { #header {   height: 90px;   position: fixed;   background-color: #fff;   width: 100%;   z-index: 10;   box-shadow: 0 3px 3px rgba(0, 0, 0, .03) } #header #head-logo {   top: 40px;   width: 46px } #header #head-logo img {   height: auto } #header #logo-labo {   width: 130px;   top: 52px;   left: 60px } #header #tag-line {   font-size: 9px;   position: static;   width: 100%;   background-color: #f8f8f8;   padding: 2px 10px;   box-sizing: border-box } #header nav {   top: 90px } #header #gnav li.menu_pro {   border-bottom: 1px solid #e2d380 } #header #sp-nav {   top: 36px;   right: 5px;   width: 50px;   height: 50px } #header #sp-nav figure {   width: 26px;   height: 2px;   margin: -1px 0 0 -13px;   -webkit-border-radius: 1px;   -moz-border-radius: 1px;   -ms-border-radius: 1px;   border-radius: 1px;   background: #fad92b } #header #sp-nav figure:first-child {   transform: translateY(-7px);   -moz-transform: translateY(-7px);   -webkit-transform: translateY(-7px);   -ms-transform: translateY(-7px);   -o-transform: translateY(-7px) } #header #sp-nav figure:last-child {   transform: translateY(7px);   -moz-transform: translateY(7px);   -webkit-transform: translateY(7px);   -ms-transform: translateY(7px);   -o-transform: translateY(7px) } } #footer { background: #515151 } #foot-nav { width: 1100px; margin: 0 auto; padding: 60px 0 40px; display: flex; flex-flow: row wrap; justify-content: space-between } #foot-nav > ul, #foot-nav > div { width: 100%; max-width: 242px } #foot-nav ul li { font-size: 14px; margin-bottom: 20px; display: flex; flex-flow: row nowrap } #foot-nav ul li a { color: #fff; width: calc(100% - 20px); line-height: 1.3 } #foot-nav ul li a span { padding-right: 20px; position: relative } #foot-nav ul li a span:after { position: absolute; right: 0; top: 3px; content: ""; width: 14px; height: 14px; background: url(../images/icon-out-white.png) center center no-repeat; background-size: cover } #foot-nav ul li i { margin-right: 10px; margin-top: 5px; font-size: 10px } #foot-nav ul li ul { margin-top: 20px } #foot-nav .list-fourth a.logo-corporate { display: block; margin-bottom: 30px } #foot-nav .list-fourth a.footer-contact { width: 244px; height: 67px; line-height: 67px; text-align: center; background-color: #fad92b; border-radius: 5px; font-weight: 700; font-size: 17px; position: relative; padding: 0; text-indent: 48px; display: block } #foot-nav .list-fourth a.footer-contact:hover { color: #444; text-decoration: none; opacity: .9 } #foot-nav .list-fourth a.footer-contact:before { content: ""; display: inline-block; box-sizing: content-box; width: 34px; height: 25px; position: absolute; top: 23px; left: 44px; background: url(../images/icon-mail.png) no-repeat; background-size: contain; vertical-align: middle; background-blend-mode: multiply } #copyright { width: 100%; height: 71px; line-height: 71px; border-top: rgba(206, 206, 206, .2) 1px solid; font-size: 12px; text-align: center; color: #cecece } @media screen and (max-width:520px) { #foot-nav {   padding: 0 0 40px;   flex-flow: column wrap;   width: 100% } #foot-nav > ul, #foot-nav > div {   max-width: unset;   box-sizing: border-box } #foot-nav ul li {   font-size: 14px;   margin-bottom: 0;   padding: 13px 10px;   border-bottom: 1px solid #666 } #foot-nav ul li.foot-sub-nav {   padding-right: 0 } #foot-nav ul li ul {   border-top: 1px solid #666;   margin-left: -14px;   width: calc(100% + 24px);   margin-bottom: -13px;   margin-top: 0 } #foot-nav ul li ul li {   padding-left: 30px } #foot-nav .list-fourth a.logo-corporate {   padding: 40px 20px 0 } #foot-nav .list-fourth a.footer-contact {   width: calc(100% - 40px);   margin: 0 20px;   text-indent: 0 } #foot-nav .list-fourth a.footer-contact:before {   left: 45px } #copyright {   height: 20px;   line-height: 20px;   font-size: 10px } } #pagetop { position: fixed; right: 10px; bottom: 80px; width: 54px; height: 54px; z-index: 110 } #pagetop a { display: table-cell; width: 54px; height: 54px; border-radius: 27px; background: #999; color: #fff; text-decoration: none; text-align: center; vertical-align: middle } @media screen and (min-width:960px) { #pagetop a:hover {   background: #666 } } #cnt-home #mv { height: 350px; width: 100%; background: url(../../images/index/bg-mv.jpg) no-repeat center center; background-size: cover } #cnt-home #mv #mv-inner { width: 1100px; height: 100%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between } #cnt-home #mv #mv-inner #catch-wrap { box-sizing: border-box; width: 800px; height: 100%; display: flex; justify-content: center; align-items: center } #cnt-home #mv #mv-inner #catch-wrap #catch { width: 551px; color: #fff; border: 4px solid #fad92b; border-radius: 10px; color: #222; background-color: #fff } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch { background-color: #fad92b; text-align: center; width: 100%; padding: 10px 0 21px } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch p { font-size: 17px; line-height: 30px; letter-spacing: .2em; height: 30px; font-weight: 700; padding: 0 14px; text-align: center; display: block; width: 100% } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch p:before { content: url(../../images/index/slash-l.png); position: relative; top: 8px; margin-right: 13px } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch p:after { content: url(../../images/index/slash-r.png); position: relative; top: 8px; margin-left: 13px } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch p span { font-size: 22px } #cnt-home #mv #mv-inner #catch-wrap #catch h1#main-catch { border: none; text-align: center; font-size: 24px; padding: 34px 0; letter-spacing: .2em; margin: 0; font-weight: 700; line-height: 1.4; position: relative } #cnt-home #mv #mv-inner #catch-wrap #catch h1#main-catch span { font-size: 34px } #cnt-home #mv #mv-inner #catch-wrap #catch h1#main-catch span.maru-fukidashi { position: absolute; width: 109px; height: 110px; background: url(../../images/index/shokuhinno-fukidashi.png) center center no-repeat; background-size: cover; top: -81px; left: -49px; z-index: 3; text-indent: -9999px } #cnt-home #mv #mv-inner #whats-new { width: 100%; max-width: 260px; background-color: #fff; margin: 10px 0; border-radius: 5px } #cnt-home #mv #mv-inner #whats-new h2 { color: #222; font-size: 16px; font-weight: 700; text-align: left; background-color: #fff; height: 45px; line-height: 45px; padding-left: 16px; margin: 0; border: none; border-bottom: #fad92b 3px solid; border-top-left-radius: 5px; border-top-right-radius: 5px } #cnt-home #mv #mv-inner #whats-new ul { display: flex; flex-flow: column wrap } #cnt-home #mv #mv-inner #whats-new ul li { padding: 15px; border-bottom: #eee 1px solid; position: relative } #cnt-home #mv #mv-inner #whats-new ul li > a { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0 } #cnt-home #mv #mv-inner #whats-new ul li:last-child { border-bottom: none } #cnt-home #mv #mv-inner #whats-new ul li .whats-flex { display: flex; flex-flow: row wrap } #cnt-home #mv #mv-inner #whats-new ul li p.whats-thumb { width: 80px; margin-right: 15px } #cnt-home #mv #mv-inner #whats-new ul li p.whats-thumb img { width: 100% } #cnt-home #mv #mv-inner #whats-new ul li p.whats-title { font-size: 14px; width: calc(100% - 95px); line-height: 1.3 } #cnt-home #mv #mv-inner #whats-new ul li a:hover + .whats-flex p.whats-thumb img { opacity: .8 } #cnt-home #mv #mv-inner #whats-new ul li .whats-flex p.whats-thumb a:hover img { opacity: .8 } #article-list { display: flex; flex-flow: row wrap; padding-bottom: 7px; width: 810px } #article-list .article { background: #fff; border-radius: 5px; position: relative; width: 260px; margin: 0 10px 40px 0 } #article-list .article .new { position: absolute; top: -3px; left: -3px; width: 66px; height: 66px; background: url(../images/icon-new.png) no-repeat center center; background-size: contain; z-index: 2; text-indent: -9999px } #article-list .article .a_wrap { position: relative } #article-list .article .a_wrap > a { text-decoration: none; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0 } #article-list .article .a_wrap > a:hover + .image_wrap img { transform: scale(1.1); transition-duration: 0.3s } #article-list .article .a_wrap .image_wrap a:hover img { transform: scale(1.1); transition-duration: 0.3s } #left-content #article-list .article .image_wrap { overflow: hidden; width: 100% } #article-list .article .image_wrap a { display: block; height: 150px; overflow: hidden } #article-list .article .image_wrap img { width: 100%; display: block; transition-duration: 0.3s; border-top-left-radius: 5px; border-top-right-radius: 5px } #article-list .article .article-box { padding: 18px 20px 0 } #article-list .article .article-box .date { font-size: 14px; color: #919191; margin-bottom: 8px; line-height: 14px } #article-list .article .article-box .article-title { font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 16px } #article-list.pectin .article .article-box .article-title { font-size: 14px } #article-list .article .article-box .article-text { font-size: 14px; line-height: 1.5; color: #535353; margin-bottom: 16px } #article-list .article ul.tag { display: flex; flex-flow: row wrap; padding: 0 20px 24px } #article-list .article ul.tag li { height: 19px; margin-right: 3px; margin-bottom: 10px } #article-list .article ul.tag li a { background: #00b4be; line-height: 1; height: 19px; border-radius: 9.5px; display: block; color: #fff; font-size: 14px; padding: 2px 10px 3px } #article-list .article ul.tag li a:hover { text-decoration: none; opacity: .8 } #btn-wrap { width: 100%; max-width: 800px; text-align: center; padding-bottom: 54px } #btn-wrap a.btn-round { width: 254px; height: 51px; display: inline-block; line-height: 2.8; font-size: 16px; color: #000; border-radius: 25.5px; background-color: #fff; border: 2px solid #c8d3de; transition: 0.3s; box-sizing: border-box; position: relative; text-indent: 7px } #btn-wrap a.btn-round:after { position: absolute; content: url(../../common/images/icon-arrow.png); width: 7px; height: 11px; position: relative; top: 0; right: -63px } #btn-wrap a.btn-round:hover { text-decoration: none; background: #00b4be; color: #fff; border: #00b4be 2px solid } #btn-wrap a.btn-round:hover:after { content: url(../../common/images/icon-arrow-white.png) } .event-info { width: 100%; margin-top: 7px; padding-bottom: 64px } .event-info dl { display: flex; flex-flow: row wrap; align-items: stretch; margin: 0 } .event-info dt.event-date { padding: 20px 25px 20px 0; text-align: left; border-bottom: 1px solid #c8d3de } .event-info dd.event-category { padding: 18px 30px 19px 0; width: 104px; border-bottom: 1px solid #c8d3de; text-align: center; margin: 0 } .event-category a { font-size: 12px; height: 22px; width: 76px; line-height: 22px; color: #fff; background: #595b61; border-radius: 11px; display: inline-block } .event-category a:hover { opacity: .8; text-decoration: none } .event-info dd.event-title { width: calc(100% - 216px); padding: 20px 25px 20px 0; text-align: left; border-bottom: 1px solid #c8d3de; margin: 0; line-height: 1.5 } .event-info dd.event-title.term { width: calc(100% - 313px) } .box-list { display: flex; flex-flow: row wrap; width: 100%; padding: 30px 0 0 } .box-list .box { width: calc(25% - 15px); position: relative; margin-bottom: 40px; margin-right: 20px } .box-list .box:nth-child(4n) { margin-right: 0 } .box-list .box .a_wrap { position: relative } .box-list .box .a_wrap > a { text-decoration: none; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0 } .box-list .box .a_wrap > a:hover + .image_wrap img { transform: scale(1.1); transition-duration: 0.3s } .box-list .box .a_wrap .image_wrap a:hover img { transform: scale(1.1); transition-duration: 0.3s } .box-list .box .a_wrap .image_wrap { overflow: hidden; width: 100% } .box-list .box .a_wrap .image_wrap img { width: 100%; display: block; transition-duration: 0.3s; border-radius: 5px } .box-list .box .box-title { padding: 14px 0; font-size: 16px; font-weight: 500; position: relative; display: flex; line-height: 1.3 } .box-list .box .box-title:before { content: url(../../common/images/icon-book.png); width: 19px; height: 22px; margin-top: 1px; margin-right: 8px; position: relative; top: 0; left: 0 } .box-list .box .box-title a { padding-top: 2px } #right-content { width: 260px; flex-flow: column wrap } ul.ranking { display: flex; flex-flow: column wrap; margin-bottom: 40px } ul.ranking li { padding: 15px 0; border-bottom: #c8d3de 1px solid; position: relative } ul.ranking li > a { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0 } ul.ranking li .column-flex { display: flex; flex-flow: row wrap } ul.ranking li p.column-thumb { width: 80px; margin-right: 15px; position: relative } ul.ranking li p.column-thumb span { position: absolute; top: 0; left: 0; font-size: 12px; color: #222; width: 17px; height: 17px; line-height: 17px; text-align: center; background-color: #fad92b; z-index: 3 } ul.ranking li p.column-thumb img { width: 100% } ul.ranking li p.column-title { font-size: 14px; width: calc(100% - 95px); line-height: 1.3 } ul.ranking li p.column-title span.date { color: #909090; font-size: 12px; height: 12px; margin: 4px 0; line-height: 1; width: 100%; display: block } ul.ranking li a:hover + .column-flex p.column-thumb img { opacity: .8 } ul.ranking li .column-flex p.column-thumb a:hover img { opacity: .8 } .tag-list { padding-bottom: 30px } .tag-list ul.tag { display: flex; flex-flow: row wrap; padding: 20px 0 0 } .tag-list ul.tag li { height: 19px; margin-right: 3px; margin-bottom: 10px } .tag-list ul.tag li a { background: #00b4be; line-height: 1; height: 19px; border-radius: 9.5px; display: block; color: #fff; font-size: 14px; padding: 2px 10px 3px } .tag-list ul.tag a:hover { text-decoration: none; opacity: .8 } ul.banner { display: flex; flex-flow: column wrap; padding-bottom: 40px } ul.banner li { border-radius: 5px; border: #c9c9c9 solid 1px; background: #fff; padding: 6px; position: relative; margin-bottom: 10px } ul.banner li:after { position: absolute; content: ""; border-style: solid; border-color: transparent transparent #fad92b transparent; border-width: 0 0 19px 19px; bottom: 0; right: 0 } ul.banner li > a { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0 } ul.banner li .banner-flex { display: flex; flex-flow: row wrap; align-items: center } ul.banner li p.banner-thumb { width: 92px; height: 86px; margin-right: 15px; position: relative } ul.banner li p.banner-thumb img { width: 100%; object-fit: cover; border-radius: 4px } ul.banner li p.banner-title { font-size: 18px; font-weight: 700; width: calc(100% - 108px); line-height: 1 } ul.banner li p.banner-title span { display: block; color: #999; font-size: 10px; margin-top: 7px } ul.banner li a:hover + .banner-flex p.banner-thumb img { opacity: .8 } ul.banner li .banner-flex p.column-banner a:hover img { opacity: .8 } #bread-wrap { width: 100%; border-top: 4px solid #fad92b } #bread-crumb { width: 1100px; margin: 0 auto; height: 51px; line-height: 1.3; color: #222; font-size: 14px; display: flex; align-items: center } #bread-crumb a { color: #00b4be } #bread-crumb ol { padding: 0 } #bread-crumb li { display: inline-block } #bread-crumb li:after { display: inline-block; content: '>'; margin: 0 .4em; color: #959fa5 } #bread-crumb li.current:after { content: none } #article-midashi { width: 100%; background: #fff; border-radius: 5px; border: 3px solid #fad92b; padding: 33px 37px; box-sizing: border-box; margin-bottom: 40px } #article-midashi h1 { font-size: 30px; font-weight: 700; padding-bottom: 30px; border-bottom: 1px solid #eaeaea; line-height: 1.3; margin-bottom: 22px } #article-midashi #article-data { display: flex; flex-flow: row wrap; justify-content: space-between } #article-midashi ul.tag { display: flex; flex-flow: row wrap; width: 220px; padding: 0; margin: 0 } #article-midashi ul.tag li { height: 19px; margin-right: 3px; margin-bottom: 10px } #article-midashi ul.tag.eventtag li, #article-midashi ul.tag li a { background: #00b4be; line-height: 1; height: 19px; border-radius: 9.5px; display: block; color: #fff; font-size: 14px; padding: 2px 10px 3px } #article-midashi ul.tag li a:hover { text-decoration: none; opacity: .8 } #article-midashi .sns-zone { width: auto; text-align: right; font-size: 14px; color: #666; margin-left: auto } .main_visual { margin: 0 } .main_visual img { max-width: 100%; max-height: 360px; object-fit: cover; border-radius: 5px } .honbun p { line-height: 1.8; font-size: 18px; margin-bottom: 40px } .honbun .mokuji { margin-top: 60px } .honbun .mokuji p.mokuji-title { height: 51px; line-height: 51px; width: 100%; background: #fad92b; font-size: 18px; padding: 0 24px; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-bottom: 0; font-weight: 700 } .honbun ul.mokuji-list { width: 100%; padding: 40px 37px 23px; background: #fff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px } .honbun ul.mokuji-list li { margin-bottom: 15px; padding-left: 30px; font-size: 18px; line-height: 1.3; position: relative } .honbun ul.mokuji-list li.sttl, .honbun ul.mokuji-list li ul { margin-top: 17px; margin-left: 5px } .honbun ul.mokuji-list > li:before { position: absolute; content: ""; width: 17px; height: 17px; background: url(../images/icon-mokuji-01.png) no-repeat center center; background-size: contain; left: 0; top: 5px } .honbun ul.mokuji-list li.sttl { margin-left: 35px } .honbun ul.mokuji-list li.sttl:before, .honbun ul.mokuji-list li ul > li:before { position: absolute; content: ""; width: 11px; height: 6px; background: url(../images/icon-mokuji-02.png) no-repeat center center; background-size: contain; left: 0; top: 10px } .honbun .flex { display: flex; justify-content: space-between } .honbun .flex > p { width: calc(100% - 400px); margin-top: 0 } .honbun .flex.img_right { flex-flow: row wrap } .honbun .flex.img_left { flex-flow: row-reverse wrap } .honbun .img_wrap { width: 350px; margin-bottom: 0 } .honbun .img_wrap img { width: 100%; object-fit: cover; border-radius: 5px } .honbun .img_wrap > p { padding-top: 10px; font-size: 14px; margin: 0 } .honbun .img_full { width: 100%; margin: 40px 0 } .honbun .img_full img { width: 100%; border-radius: 5px } .honbun h3 { border-left: 3px solid #fad92b; font-size: 18px; font-weight: 700; line-height: 1.6; padding: 1px 20px; margin-bottom: 20px } #btn-modoru { width: 100%; max-width: 800px; text-align: center; margin: 70px 0; clear: both } #btn-modoru a.btn-round { width: 254px; height: 51px; display: inline-block; line-height: 2.8; font-size: 16px; color: #000; border-radius: 25.5px; background-color: #fff; border: 2px solid #c8d3de; transition: 0.3s; box-sizing: border-box; position: relative; text-indent: 7px } #btn-modoru a.btn-round:before { position: absolute; content: url(../../common/images/icon-modoru.png); width: 7px; height: 11px; position: relative; top: 0; left: -63px } #btn-modoru a.btn-round:hover { text-decoration: none; background: #00b4be; color: #fff; border: #00b4be 2px solid } #btn-modoru a.btn-round:hover:before { content: url(../../common/images/icon-modoru-white.png) } #pickup { margin-bottom: 90px; border: #fad92b 3px solid; border-radius: 5px; background: url(../../images/article/bg-pickup-small.jpg) no-repeat center 45px; background-size: cover; position: relative; text-align: center; padding-bottom: 60px } #pickup h2 { font-size: 26px; text-align: center; background-color: #fad92b; padding: 20px 0; font-weight: 500; margin-bottom: 53px } #pickup p.badge { position: absolute; top: -20px; left: 20px } #pickup > p { font-size: 16px; text-align: center; margin-bottom: 40px } #pickup #pickup_inner { margin: 40px auto 60px; width: calc(100% - 80px); background: #fff; border-radius: 5px } #pickup #pickup_inner h3 { text-align: center; margin: 25px 0; font-size: 16px; font-weight: 700 } #pickup #pickup_inner ul.book { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 0 auto; padding-bottom: 36px; width: calc(100% - 60px) } #pickup #pickup_inner ul.book li { width: calc(50% - 20px); box-sizing: border-box; padding-left: 30px; position: relative; margin-bottom: 10px; text-align: left } #pickup #pickup_inner ul.book li:before { content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 22px; background-image: url(../images/icon-book.png); background-size: cover } #pickup a.btn-download { width: 294px; height: 51px; line-height: 51px; display: flex; margin: 0 auto; justify-content: center; align-items: center; color: #000; border-radius: 25.5px; background-color: #fad92b; border: 2px solid #e4c522; transition: 0.3s; box-sizing: border-box; position: relative } #pickup a.btn-download:after { position: absolute; content: ""; background: url(../../images/sample/download_icon.png) no-repeat center center; background-size: cover; width: 23px; height: 20px; top: 50%; right: 29px; transform: translate(0, -50%) } #pickup a.btn-download:hover { text-decoration: none; background: #fff } .kanren-list { display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; margin-bottom: 80px } .kanren-list .kanren-box { width: calc(50% - 20px); position: relative; padding: 30px 0 25px; border-bottom: #c8d3de 1px solid; display: flex; flex-flow: row wrap; justify-content: space-between } .kanren-list .kanren-box > a { margin-right: 25px; width: calc(100% - 225px) } .kanren-list .kanren-box a img { border-radius: 5px } .kanren-list .kanren-box a:hover img { opacity: .8 } .kanren-list .kanren-box .kanren-text { width: 200px } .kanren-list .kanren-box .kanren-text .kanren-title { margin-bottom: 10px } .kanren-list .kanren-box .kanren-text .kanren-title a { font-size: 16px; font-weight: 700; line-height: 1.5 } .kanren-list .kanren-box .kanren-text .kanren-title a:hover { opacity: .7; text-decoration: none } .kanren-list .kanren-box .kanren-text p { color: #535353; font-size: 14px; margin-bottom: 12px } .kanren-list .kanren-box .kanren-text ul.tag { display: flex; flex-flow: row wrap; padding: 0; margin: 0 } .kanren-list .kanren-box .kanren-text ul.tag li { height: 19px; margin-right: 3px; margin-bottom: 10px } .kanren-list .kanren-box .kanren-text ul.tag li a { background: #00b4be; width: 100%; line-height: 1; height: 19px; border-radius: 9.5px; display: block; color: #fff; font-size: 14px; padding: 2px 10px 3px } .kanren-list .kanren-box .kanren-text ul.tag li a:hover { text-decoration: none; opacity: .8 } #page-midashi h1 { height: 211px; width: 100%; border-radius: 5px; border: 3px solid #fad92b; background: url(../images/bg-page-midashi.png) center center no-repeat; display: flex; justify-content: center; align-items: center; font-size: 28px; font-weight: 700; margin-bottom: 0 } #left-content #page-midashi h1 { border-left: none; border-right: none; border-bottom: 1px dotted #fad92b; border-radius: 0; padding: 30px 16px; height: auto; background: #FFF; justify-content: left; font-size: 28px } .trouble-list { margin-top: 40px; display: flex; flex-flow: row wrap; justify-content: space-between } .trouble-list li { width: 173px } .trouble-list li p img { width: 100% } .trouble-list li p:first-child { height: 137px; display: table-cell; vertical-align: middle; letter-spacing: -.05em; line-height: 1.8 } .trouble-list li p strong { background: linear-gradient(transparent 60%, #fad92b 0%) } p.big-arrow { text-align: center; margin-top: 40px } p.big-arrow img { width: 454px } .white-zone { width: 100%; box-sizing: border-box; background: #fff; border-radius: 5px; padding-top: 10px; padding-bottom: 45px; margin-bottom: 90px } .white-zone .gray-zone { width: calc(100% - 20px); height: 339px; margin: 0 auto 50px; background: #d4dce2; border-radius: 5px; font-size: 24px; color: #9ba7b0; text-align: center; display: flex; justify-content: center; align-items: center } ul.solution-list { display: flex; flex-flow: row wrap; justify-content: space-between } ul.solution-list li { width: 25%; border-right: 1px solid #ececec; text-align: center; position: relative } ul.solution-list li:last-child { border-right: none } ul.solution-list li p:first-child { display: flex; justify-content: center; align-items: center; height: 88px } ul.solution-list li p:first-of-type { padding-top: 10px } ul.solution-list li#catalogue p img { width: 62px; height: 63px } ul.solution-list li#contact p img { width: 60px; height: 60px } ul.solution-list li#buy p img { width: 64px; height: 58px } ul.solution-list li#material p img { width: 51px; height: 57px } ul.solution-list li p:last-child { display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 700; padding: 20px 0 } ul.solution-list li a { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0 } .midashi_chokka { margin-top: 40px } #page-midashi-long { width: 100% } #page-midashi-long h1 { height: 211px; width: 100%; border-radius: 5px; border: 3px solid #fad92b; background: url(../images/bg-page-midashi-long.png) center center no-repeat; display: flex; justify-content: center; align-items: center; font-size: 36px; font-weight: 700; margin-bottom: 0 } .page_wrap { margin: 40px 0 110px; width: 100% } .page_wrap.no-titlePage { margin: 0 0 110px } .event_box { padding: 20px 0 25px 20px; background-color: #fff; border-radius: 5px; display: flex; flex-flow: row wrap; margin-bottom: 20px; position: relative; transition: 0.3s } .event_box > a { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0 } .event_box:hover { box-shadow: 0 5px 25px rgba(0, 0, 0, .2) } .event_thumb { width: 305px; margin-right: 50px } .event_thumb img { width: 100% } .event_info { width: calc(100% - 435px) } .event_info h2 { font-size: 20px; font-weight: 500; padding-bottom: 10px; border-bottom: #fad92b 3px solid } .event_info h2 .event-category { text-align: center; margin-right: 15px; font-size: 12px; height: 22px; width: 76px; line-height: 22px; color: #fff; background: #595b61; border-radius: 11px; display: inline-block } .event_info p { padding: 26px; color: #535353; font-size: 16px; line-height: 1.5 } .event_info dl { border-top: 1px solid #c8d3de; display: flex; flex-flow: row wrap; color: #535353; margin: 0 } .event_info dl dt { padding: 22px 40px; width: 155px; box-sizing: border-box; border-bottom: 1px solid #c8d3de; font-weight: 700 } .event_info dl dd { width: calc(100% - 155px); padding: 22px 0; margin: 0; border-bottom: 1px solid #c8d3de } .event_info dl dd p { padding: 0; line-height: 1 } .event_info dl dt:last-of-type { border: none } .event_info dl dd:last-child { border: none } .arrow_area { width: 80px; display: flex; align-items: center; justify-content: center } .catalogue_boxies { margin: 40px 0 110px; padding: 70px 20px; background: #fff; border-radius: 5px; width: 100%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch } .catalogue_boxies.no-titlePage { margin: 0 0 110px } .catalogue_boxies li { width: calc(33.3333% - 13.3333px); margin-right: 20px; margin-bottom: 60px; position: relative; background: #f5f9fd } .catalogue_boxies li:after { position: absolute; content: ""; bottom: 0; right: 0; background: #fad92b; width: 62px; height: 3px } .catalogue_boxies li > a { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0 } .catalogue_boxies li:hover { opacity: .8 } .catalogue_boxies li:nth-child(3n) { margin-right: 0 } .catalogue { padding: 0 34px 20px; box-sizing: border-box; width: 100%; justify-content: space-around; background: #fff } .catalogue_info { background: #f5f9fd; width: 100%; padding: 20px 20px 15px; position: relative } p.catalogue_title { font-size: 16px; font-weight: 700; text-align: center; padding: 0 10px 15px } p.catalogue_summary { color: #535353; font-size: 14px; line-height: 1.5 } .sns-zone { display: flex; flex-flow: row wrap; justify-content: flex-end } .sns-btn { margin-bottom: 5px; margin: 0 2px } .pocket-btn { display: inline-block } @media screen and (max-width:520px) { #cnt-home {   margin-top: 90px } #cnt-home #mv {   height: auto } #cnt-home #mv #mv-inner {   width: 100%;   flex-flow: row column } #cnt-home #mv #mv-inner #catch-wrap {   width: calc(100% - 40px);   margin: 30px auto 0 } #cnt-home #mv #mv-inner #catch-wrap #catch {   width: 100% } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch {   padding: 0 0 20px } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch p {   font-size: 14px;   line-height: 30px;   letter-spacing: .13em;   height: 30px;   padding: 0 } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch p:before {   margin-right: 5px } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch p:after {   margin-left: 5px } #cnt-home #mv #mv-inner #catch-wrap #catch #sub-catch p span {   font-size: 16px } #cnt-home #mv #mv-inner #catch-wrap #catch h1#main-catch {   font-size: 24px;   padding: 34px 0;   letter-spacing: .2em;   margin: 0 } #cnt-home #mv #mv-inner #catch-wrap #catch h1#main-catch span {   font-size: 34px } #cnt-home #mv #mv-inner #catch-wrap #catch h1#main-catch span.maru-fukidashi {   width: 70px;   height: 70px;   top: -30px;   left: -23px } #cnt-home #mv #mv-inner #whats-new {   width: calc(100% - 40px);   margin: 8px auto 30px;   max-width: none } #cnt-home #mv #mv-inner #whats-new ul {   display: flex;   flex-flow: column wrap } #cnt-home #mv #mv-inner #whats-new ul li:not(:first-child) {   display: none } #cnt-home #mv #mv-inner #whats-new ul li p.whats-thumb {   width: 60px } #contents-zone {   padding-top: 30px } #inner {   width: 100%;   flex-flow: column wrap } #left-content {   padding: 0 } #article-list {   padding: 0 10px;   justify-content: space-between;   padding-bottom: 0;   width: 100% } #article-list .article {   width: calc(50% - 5px);   margin-right: 0;   margin-bottom: 30px } #article-list .article .article-box {   padding: 18px 10px 0 } #article-list .article .article-box .date {   font-size: 12px;   margin-bottom: 3px } #article-list .article .article-box .article-title {   font-size: 16px;   margin-bottom: 10px } #article-list .article .article-box .article-text {   font-size: 13px } #article-list .article ul.tag {   padding: 0 10px 20px } #article-list .article ul.tag li {   margin-bottom: 10px } #article-list .article ul.tag li a {   font-size: 13px } #btn-wrap {   padding-bottom: 30px } h2.type_a {   border-radius: 0 } h2.type_a {   height: 45px;   line-height: 45px;   font-size: 16px } .event-info dl {   position: relative } .event-info dt.event-date {   padding-left: 15px;   font-size: 13px;   padding-bottom: 60px } .event-info dd.event-category {   position: absolute;   border-bottom: none;   top: 25px;   left: 10px } .event-info dd.event-title {   width: calc(100% - 105px);   padding-right: 15px;   font-size: 14px } .event-info dd.event-title.term {   width: calc(100% - 163px) } .event-info {   padding-bottom: 0 } .box-list {   justify-content: space-between;   padding: 30px 10px 0 } .box-list .box {   width: calc(50% - 5px);   margin-right: 0;   margin-bottom: 20px } #right-content {   width: 100% } h2.side-header {   padding-left: 20px;   font-weight: 500;   border-radius: 0 } ul.ranking li p.column-thumb {   margin-left: 15px } ul.ranking li p.column-title {   width: calc(100% - 120px) } ul.ranking {   margin-bottom: 30px } .tag-list ul.tag {   padding: 20px 15px } .tag-list {   padding-bottom: 10px } ul.banner {   padding: 0 10px 30px } #bread-wrap {   margin-top: 90px } #bread-crumb {   width: 100%;   box-sizing: border-box;   padding: 0 15px;   line-height: 1.7;   font-size: 13px;   height: auto } #article-midashi {   padding: 20px;   margin-bottom: 40px } #article-midashi h1 {   font-size: 24px;   padding-bottom: 15px } #article-midashi #article-data {   flex-flow: column wrap } #article-midashi ul.tag {   width: 100% } #article-midashi .sns-zone {   width: 100%;   text-align: left } .main_visual img {   width: 100%;   height: auto;   border-radius: 0 } .honbun p {   margin-top: 20px;   padding: 0 10px;   font-size: 16px } .honbun .mokuji {   width: calc(100% - 20px);   margin: 40px auto 0 } .honbun .mokuji p.mokuji-title {   font-size: 16px } .honbun ul.mokuji-list {   font-size: 16px;   padding: 20px } .honbun ul.mokuji-list li {   font-size: 16px } h2.type_b {   margin-top: 40px;   padding: 0 10px 10px;   font-size: 20px } .honbun .flex.img_right, .honbun .flex.img_left {   flex-flow: column wrap } .honbun .flex > p {   width: 100% } .honbun .img_wrap, .honbun .img_full {   width: 100%;   padding: 0 10px;   margin: 20px 0 0 } .honbun .img_wrap > p {   padding: 5px 0;   font-size: 12px } .honbun h3 {   margin: 30px 10px 20px } #btn-modoru {   margin: 40px 0 } #pickup {   padding-bottom: 40px;   margin-bottom: 40px } #pickup p.badge {   position: absolute;   top: -36px;   left: 0 } #pickup p.badge img {   width: 60px !important } #pickup h2 {   font-size: 16px;   margin-bottom: 30px } #pickup #pickup_inner {   width: calc(100% - 20px);   margin-bottom: 40px } #pickup #pickup_inner ul.book {   padding-bottom: 0 } #pickup #pickup_inner ul.book li {   width: 100%;   margin-bottom: 20px } .kanren-list .kanren-box {   width: 100%;   box-sizing: border-box;   padding: 20px 10px 10px } .kanren-list .kanren-box .kanren-text p {   font-size: 13px } .kanren-list .kanren-box .kanren-text {   width: 220px } .kanren-list .kanren-box > a {   margin-right: 5px;   width: calc(100% - 235px) } .kanren-list {   margin-bottom: 40px } #page-midashi h1 {   font-size: 24px;   height: 130px;   background-size: cover } h2.type_c {   font-size: 20px } .trouble-list {   margin-top: 0;   padding: 0 10px;   box-sizing: border-box } .trouble-list li {   width: calc(50% - 10px) } p.big-arrow {   margin-top: 0 } .white-zone .gray-zone {   margin-bottom: 30px } ul.solution-list li {   width: 50%;   border-bottom: 1px solid #ececec;   padding-top: 30px } .white-zone {   margin-bottom: 40px } h2.type_c {   margin-top: 40px } #page-midashi-long h1 {   background-image: url(../images/bg-page-midashi.png);   font-size: 24px;   height: 130px;   background-size: cover } .event_box {   padding: 10px;   border-radius: 0 } .event_thumb {   width: 100%;   margin-right: 0 } .event_info {   width: 100%;   padding-top: 10px } .event_info h2 {   font-size: 16px;   line-height: 1.5 } .event_info h2 .event-category {   display: block;   margin-bottom: 5px } .event_info p {   font-size: 13px;   margin-bottom: 0;   padding: 15px 0;   line-height: 1.8 } .event_info dl dt {   font-size: 13px;   padding: 15px 0;   width: 80px;   line-height: 1.5 } .event_info dl dd {   width: calc(100% - 80px);   padding: 15px 0;   font-size: 13px;   line-height: 1.5 } .arrow_area {   display: none } .page_wrap {   margin-bottom: 40px } .catalogue_boxies {   padding: 40px 20px 0;   margin-bottom: 60px } .catalogue_boxies li {   width: 100%;   margin-right: 0;   margin-bottom: 40px } p.catalogue_title {   padding-bottom: 20px;   font-size: 14px } .catalogue {   padding-bottom: 20px } .sns-zone {   justify-content: flex-start } .honbun h2 {   width: 100%;   margin-top: -90px !important;   padding-top: 130px !important;   display: inline-block;   vertical-align: top } .honbun h3 {   margin-top: -90px !important;   padding-top: 120px !important;   display: inline-block;   vertical-align: top;   border-left: none;   position: relative } .honbun h3:before {   top: 118px;   left: 0;   content: "";   height: 30px;   width: 3px;   position: absolute;   background: #fad92b } } @font-face { font-family: "slick"; src: url(../fonts/slick.eot); src: url("../fonts/slick-.eot#iefix") format("embedded-opentype"), url(../fonts/slick.woff) format("woff"), url(../fonts/slick.ttf) format("truetype"), url("../fonts/slick.svg#slick") format("svg"); font-weight: 400; font-style: normal } @media all and (min-width:0) and (max-width:768px) { #pagetop {   display: none !important } } .mt10 { margin-top: 10px } .mt20 { margin-top: 20px } .mt30 { margin-top: 30px } .mt40 { margin-top: 40px } .mt50 { margin-top: 50px } .mr10 { margin-right: 10px } .mr20 { margin-right: 20px } .mr30 { margin-right: 30px } .mr40 { margin-right: 40px } .mr50 { margin-right: 50px } .mb10 { margin-bottom: 10px } .mb20 { margin-bottom: 20px } .mb30 { margin-bottom: 30px } .mb40 { margin-bottom: 40px } .mb50 { margin-bottom: 50px } .ml10 { margin-left: 10px } .ml20 { margin-left: 20px } .ml30 { margin-left: 30px } .ml40 { margin-left: 40px } .ml50 { margin-left: 50px } .clearfix { *zoom: 1 } .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden } ul.solution-list li a, #header #sub-nav li a:hover { opacity: .7 } form { width: 100%; margin: 50px 0 90px 0 } form table { border-top: 1px solid #CCC; border-left: 1px solid #CCC; width: 100% } form table th { border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; text-align: left; padding: 15px; width: 25% } form table td { border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; padding: 13px } form table td select { display: block; width: 90%; padding: 10px } form table td input[type="text"] { display: block; width: 100%; padding: 10px } form table td input.input_name { width: 42%; display: inline-block } form table td input#zip1, form table td input#zip2 { width: 120px; display: inline-block; margin: 0 3px } form table td input.autozip { text-align: center; color: #222; font-weight: 700; background: #fad92b; padding: 14px 10px; border: none } form table td table { border: none } form table td table th { border: none; padding: 0 } form table td table td { border: none; padding: 0 } form table td textarea { width: 100%; padding: 10px } .contact_txt { margin-top: 50px; width: 100% } .useful_detail .contact_txt { margin-top: 0 } .nonIME { ime-mode: disabled } .formError { color: red; padding-bottom: 3px } #submit.center { text-align: center } .btn_form01 { background: #fad92b; border: none; color: #222; font-weight: 700; font-size: 16px; border-radius: 5px; width: 244px; height: 67px; margin: 30px auto 0 auto; display: block; cursor: pointer } .btn_form01:hover { opacity: .9 } .thanksBox + #btn-modoru, .thanksBox { width: 100%; max-width: 100% } .useful_form #left-content { max-width: 49%; margin-right: 1% } .useful_form #left-content .useful_detail h2.type_b { margin-top: 0 } .useful_form #left-content .useful_detail img { max-height: 300px; max-width: 100%; text-align: center; display: block; margin: 0 auto 30px auto } .useful_form #left-content dt { border-left: 3px solid #fad92b; font-size: 18px; font-weight: 700; line-height: 1.6; padding: 1px 20px; margin-top: 40px } .useful_form #left-content dd { position: relative; margin: 15px 0; padding: 0 0 15px 25px; border-bottom: 1px dotted #CCC } .useful_form #left-content dd:before { position: absolute; content: ""; width: 17px; height: 17px; background: url(../images/icon-mokuji-01.png) no-repeat center center; background-size: contain; left: 0; top: 0 } .useful_form #left-content .useful_kanren .useful_kanren_ttl { border-left: 3px solid #fad92b; font-size: 18px; font-weight: 700; line-height: 1.6; padding: 1px 20px; margin-top: 40px } .useful_form #left-content .useful_kanren ul { border-bottom: 1px dotted #CCC; padding-bottom: 12px } .useful_form #left-content .useful_kanren li { margin: 10px 0 0 0; width: 100%; background: none } .useful_form #left-content .useful_kanren li::after { display: none } .useful_form #left-content .useful_kanren li i { float: left; margin-top: 5px } .useful_form #left-content .useful_kanren li + li { padding-top: 10px; border-top: 1px dotted #CCC } .useful_form #left-content .useful_kanren li a { position: static; padding-left: 20px } .useful_form #right-content { max-width: 50%; width: 100%; padding-left: 3% } .useful_form #right-content form { margin: 0 } .useful_form #right-content input.input_name { width: 42% } .useful_form #right-content #zip1, .useful_form #right-content #zip2 { width: 92px } .useful_form #right-content .autozip { padding: 10px } .useful_form #right-content form table th { font-size: 14px; width: 100%; display: block; border-bottom: none; padding: 15px 15px 0 15px } .useful_form #right-content form table td { font-size: 14px; display: block; width: 100%; padding: 10px 15px 15px 15px } .must { display: inline-block; background: #FF1418; color: #FFF; font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: 5px; margin: 0 5px 0 0 !important; float: left } th .must { margin-left: 3px } #right-content .must { margin-top: -2px !important } td #number { width: 80px; display: inline-block; margin-right: 10px } .useful_form .catalogue_boxies { background: none; margin: 0 } .fleft { float: left } .fright { float: right } .imgrightbox .fright { max-width: 350px; margin: 0 0 50px 50px } .imgleftbox .fleft { max-width: 350px; margin: 0 50px 50px 0 } h3 + .imgrightbox, h3 + .imgleftbox { margin-top: 20px } h3 + .imgrightbox .fright, h3 + .imgleftbox .fleft { margin-top: 10px } .imgrightbox .fright img, .imgleftbox .fleft img { max-width: 100% } .imgrightbox .fright span, .imgleftbox .fleft span { display: block; text-align: left; font-size: 14px; clear: both; margin-top: 5px; line-height: 1.8 } .imgrightbox p, .imgleftbox p { margin-top: 0 } .imgrightbox p + p, .imgleftbox p + p { margin-top: 20px } .honbun form td p { margin: 0 } .honbun form td p + p { margin: 20px 0 0 0 } .helpBox { border: 1px solid #eceef3; border-radius: 5px; padding: 15px; margin: 15px } .helpBox + .helpBox { margin-top: 15px } .helpBox:nth-child(even) { background: #F9F9F9; border: 1px solid #eceef3 } .helpBox .helpBox_ttl { font-size: 20px; font-weight: 700; margin-bottom: 21px; display: block; position: relative; padding: 16px 0 10px 65px } .helpBox .helpBox_ttl span { text-align: center; color: #222; background: #fad92b; display: inline-block; padding: 12px 10px; margin-right: 5px; font-size: 12px; width: 56px; position: absolute; left: 0; top: 0; border-radius: 6px } .helpBox .helpBox_ttl span strong { font-size: 18px; display: inline-block; margin-top: 2px } .helpBox .fright { margin: 0 0 15px 15px; float: right } .helpBox .fright img { max-width: 100% } .cf { *zoom: 1 } .cf:after { content: "."; display: block; clear: both; height: 0; visibility: hidden } .event_status1200 .formend { display: none } .event_thanks { display: none } .event_thanks.event_status1200 { display: block; border: 1px solid #e95413; border-radius: 6px; background: #FDEEE7; color: #e95413; font-weight: 700; text-align: center; padding: 30px 0; margin: 0 10px } .eroff .event_radio_on { display: none } .er .event_radio_off { display: none } .eroff .event_radio_off { display: block } .event_info h2 .event-category.event_status1100 { background: #fad92b; color: #222 } .event_info h2 .event-category.event_status1200 { background: #CCC; color: #222 } @media all and (min-width:0) and (max-width:768px) { .useful_form #left-content, .useful_form #right-content {   max-width: 100%;   margin: 0;   padding: 0 } .useful_form #left-content dl {   margin-top: 30px } .useful_form #left-content .useful_kanren .useful_kanren_ttl, .useful_form #left-content dt {   margin-top: 0 } .useful_form .catalogue_boxies {   margin: 20px 10px 0 10px } .useful_form .catalogue_boxies {   padding: 40px 10px 60px;   margin: 0 } .useful_form #left-content + #right-content {   margin-top: 30px } .contact_form .contact_txt, .useful_form #left-content .contact_txt {   margin-top: 0 } .contact_form .contact_txt {   margin: 30px 0 0;   padding: 0 10px } form th, form td {   display: block;   width: 100% !important;   box-sizing: border-box } form table {   margin: 0 10px;   width: auto } form table td table {   margin: 0 !important;   width: 100% !important } form table td table th {   padding-bottom: 0 } form table td input.input_name {   width: 34% } form table td input#number, form table td input#zip1, form table td input#zip2 {   width: 80px } .fleft, .fright {   float: none } .helpBox .fright {   margin: 10px 0 15px 0;   float: none;   text-align: center } .helpBox .helpBox_ttl {   display: block;   padding: 0;   text-align: center } .helpBox .helpBox_ttl span {   text-align: center;   color: #222;   background: #fad92b;   display: block;   position: static;   padding: 7px 10px;   font-size: 14px;   border-radius: 6px;   margin-bottom: 10px;   width: 100% } .helpBox .helpBox_ttl span strong {   font-size: 14px;   display: inline-block;   margin-top: 0 } .imgrightbox .fright, .imgleftbox .fleft {   max-width: 100%;   margin: 0 0 20px 0;   text-align: center } h3 + .imgrightbox, h3 + .imgleftbox {   margin-top: 0 } .trouble-list li p:first-child {   text-align: center;   height: 120px } .trouble-list li p:first-child br {   display: none } .imgrightbox .fright img, .imgleftbox .fleft img {   padding: 0 10px } #article-list .article .image_wrap a {   height: 90px } #left-content #page-midashi h1 {   padding: 20px 10px;   font-size: 24px } } .ahover:hover { opacity: .8 } .pc-hide { display: none } .sp-hide { display: block } .under-bnrBox a:hover img { opacity: .7 } .testLink { margin-bottom: 30px } .testLink p { font-weight: 700; margin-bottom: 0 } .testLink a { color: #00b4be } .testLink li a:before { display: inline-block; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-right: 5px; vertical-align: middle; border-color: #00b4be; content: ''; margin: 0 5px 2px 0 } #header #gnav li.current a { border-top-left-radius: 5px; background: #fff09f; padding: 0 36px; display: block } .gnav-wrap { border-top: 1px solid #eee } .gnav-wrap #gnav { width: 1100px; margin: auto; overflow: hidden } .gnav-wrap #gnav li { float: left } .gnav-wrap #gnav li a { width: 170px; display: block; text-align: center; border-left: 1px solid #ddd; box-sizing: border-box; padding: 20px 0; margin: 0 0; font-size: 16px; font-weight: 700 } .gnav-wrap #gnav li a.current, .gnav-wrap #gnav li a:hover { background: #fff09f; color: #dabb1a } .gnav-wrap #gnav li:nth-of-type(6) a { width: 250px; border-right: 1px solid #ddd } .gnav-wrap #gnav li a:hover { text-decoration: none } .tagname { margin-left: 10px; position: relative; z-index: 99 } .tagname a { color: #919191 } @media screen and (max-width:520px) { .pc-hide {   display: block } .sp-hide {   display: none } } #left-content a.external:after { content: ""; display: inline-block; width: 16px; height: 16px; background: url(../images/icon-out.png) center center no-repeat; background-size: cover; margin-left: 8px } a.textlink { color: #00b4be; text-decoration: underline } a.textlink:hover { text-decoration: none } .testLink li { font-size: 18px } .testLink a { text-decoration: underline } .testLink a:hover { text-decoration: none } .catalogue_boxies.no-titlePage.no-titlePage-0 { padding-top: 0 } .testLink li a { text-indent: -1em; padding-left: 1em; display: inline-block } #srchBox { width: 260px; argin-bottom: 10px; background-color: #FFF; border-style: solid; border-width: 1px; border-color: #EEE; color: #000; text-align: left; box-sizing: border-box; padding: 15px; margin-bottom: 10px } #srchBox form { margin: 0 } #srchBox form input#s { padding: 4px; box-sizing: border-box; width: 180px } #srchBox form input.btn-search { cursor: pointer } @media screen and (max-width:767px) { #srchBox {   width: 100% } #srchBox form input {   font-size: 16px } } .foot-action { position: fixed; left: 0; bottom: 0; z-index: 100; width: 100% } .foot-action-inner { text-align: left; background: #515151; width: 100% } .foot-action h3 { display: none } .foot-action .footer_contact_in { width: 1100px; margin: 0 auto; padding: 10px 0 } .foot-action .action-btn { width: 100%; display: flex; justify-content: center } .foot-action .action-btn li { display: table-cell; width: 35%; padding: 0 15px; vertical-align: middle } .foot-action .action-btn li a { display: block; padding: 6px 0; border: 3px solid #fad92b; width: 100%; height: 100%; background: #fad92b; line-height: 1.6; text-align: center; border-radius: 5px; font-size: 16px; font-weight: 700; border-top-left-radius: 5px; border-top-right-radius: 5px } .foot-action .action-btn li.single a { line-height: 50px } .foot-action .action-btn li a span { font-size: 14px } .foot-action .action-btn li a:hover { border: 3px solid #dabb1a; color: #dabb1a; background: #fff09f; transition: 0.3s; text-decoration: none } .foot-action .action-btn li a i { margin-right: 8px } .foot-action .close-btn { width: 1100px; text-align: right; margin: 0 auto; font-size: 0 } .foot-action .close-btn span { width: 44px; height: 30px; background: #515151; display: inline-block; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor: pointer } .foot-action .close-btn span figure { display: block; width: 8px; height: 8px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-135deg); margin: 12px auto; transition: 0.3s } .foot-action .close-btn span.close-box figure { transform: rotate(45deg); margin: 14px auto; transition: 0.3s } @media screen and (max-width:767px) { .foot-action h3 {   display: block;   text-align: center;   color: #fff;   padding: 14px 0;   position: relative;   background: #515151 } .foot-action.close-box h3 i {   position: absolute;   right: 10px;   top: 50%;   transform: translateY(-50%);   transition: 0.3s } .foot-action.on h3 i {   position: absolute;   right: 10px;   top: 50%;   transform: translateY(-50%) rotate(180deg);   transition: 0.3s } .foot-action .foot-action-inner {   display: none;   border-top: 1px dotted #fff } .foot-action .action-btn li {   display: block } .foot-action .action-btn li + li {   margin-top: 10px } .foot-action .close-btn {   display: none } } .btn-pectin { margin-bottom: 60px } .btn-pectin a { width: 294px; height: 51px; line-height: 51px; display: flex; margin: 0 auto; justify-content: center; align-items: center; color: #000; border-radius: 25.5px; background-color: #fad92b; border: 2px solid #e4c522; transition: 0.3s; box-sizing: border-box; position: relative } .btn-pectin a:hover { text-decoration: none; background: #fff } .search-results h1.type_b { font-size: 26px; padding-bottom: 20px; line-height: 1.3; border-bottom: 3px solid #c8d3de; position: relative; margin-bottom: 40px; box-sizing: border-box; font-weight: 500 } .search-results h1.type_b:after { position: absolute; bottom: -3px; left: 0; content: ""; height: 3px; width: 78px; background: #fad92b } .search-results dl { padding: 0 15px } .search-results dl + dl { margin-top: 20px; padding: 20px 15px 0; border-top: 1px dotted #ccc } .search-results dl:last-child { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dotted #ccc } .search-results dt { font-size: 20px; margin-bottom: 12px; line-height: 1.4 } .search-results dt a { color: #00b4be } .search-results dd { font-size: 14px; line-height: 1.6; margin: 0; padding: 0 } @media screen and (max-width:767px) { .search-results dt {   font-size: 18px;   margin-bottom: 12px;   line-height: 1.4 } } @media screen and (min-width:768px) { #pickup h3.sub-ty {   font-size: 22px;   font-weight: 500;   margin-bottom: 30px } } @media screen and (max-width:767px) { #pickup h3.sub-ty {   font-size: 16px;   font-weight: 500;   margin-bottom: 20px } #pickup #pickup_inner ul.book {   width: 100% } } #pickup #pickup_inner ul.book { display: inline-block; flex-flow: none } #pickup .pB02 #pickup_inner ul.book li { width: 100% } #pickup #pickup_inner .cont_detail { border: #fad92b 3px solid; border-radius: 5px; padding: 25px } #pickup #pickup_inner h3 { margin: 0 0 25px 0 } #pickup #pickup_inner ul.book { padding-bottom: 0 } #pickup #pickup_inner .cont_detail { margin-top: 20px } .pickup_display_article_type2-1300 .pB01, .pB02 { display: none !important } .pickup_display_article_type2-1300 .pB02 { display: block !important } #pickup p.badge img { width: 116px } #pickup .pB01 #pickup_inner ul.book { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 0 auto; padding-bottom: 36px; width: calc(100% - 60px) } #pickup .pB01 #pickup_inner h3 { text-align: center; margin: 25px 0; font-size: 16px; font-weight: 700 } .pickup_display_type1 #pickup .pB01 .badge { left: 0 } .pickup_display_type3 #pickup .pB01 #pickup_inner ul.book li { width: 100% } @media screen and (max-width:520px) { #pickup p.badge img {   margin-top: 19px } #pickup .pB01 p.badge {   position: absolute;   top: -36px;   left: 0 } #pickup .pB01 p.badge img {   margin-top: 0 } } .intro__company dl dt { background: #eac709; padding: 20px; font-weight: 700; border-radius: 6px 6px 0 0; font-size: 1.2rem } .intro__company dl dd { background: #fdfdfd; padding: 20px 30px; box-sizing: border-box; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center } .intro__company dl dd div.txt { width: 70% } .intro__company dl dd div.img { width: 30%; box-sizing: border-box; padding: 0 30px } .intro__company dl dd a { color: #00b4bf; font-size: 16px } .intro__company .testLink { margin: 0 } .intro__company { margin-bottom: 100px } @media screen and (max-width:520px) { .intro__company {   padding: 0 10px } .intro__company dl dd div.txt {   width: 100% } .intro__company dl dd {   padding: 15px } .intro__company dl dd div.img {   width: 100%;   padding: 20px 0;   text-align: center } .intro__company dl dd div.img img {   width: auto;   max-width: 40% } } #header #sub-nav li#btn_contact.btn_mail a:before { background: url(../images/icon-pc.png) no-repeat; background-size: contain } .sns-btn .fb-like.fb_iframe_widget iframe, .sns-btn .fb-like.fb_iframe_widget table, .fb_iframe_widget span { min-width: 135px !important } #article-list .article ul.tag.tagList { align-items: flex-end; margin-top: 10px; align-content: flex-end } #article-list .article ul.tag.tagList li { height: auto; margin: 0 3px 3px 0 } #article-list .article ul.tag.tagList li a { font-size: 11px; display: block; padding: 4px 5px; height: auto; border-radius: 2px; background: #999 } @media screen\0 { .sns__twitter__btn {   display: none } } a.target_link { position: relative } a.target_link:after { content: ""; width: 16px; height: 16px; background: url(https://shokulab.unitecfoods.co.jp/images/article/icon-out-mizu.png) center center no-repeat; background-size: cover; display: inline-block; margin-left: .5rem } .info_article_type2-1300 { width: 100%; margin-top: 20px; padding-bottom: 64px } .info_article_type2-1300 ul { display: flex; flex-wrap: wrap } .info_article_type2-1300 ul li { width: 32%; margin: 0 2% 15px 0; padding-bottom: 15px; border-bottom: 1px solid #ccc } .info_article_type2-1300 ul li:nth-of-type(3n) { margin-right: 0 } .info_article_type2-1300 ul li:before { content: url(../../common/images/icon-arrow.png); width: 7px; height: 11px; position: absolute; top: 0; padding-right: 10px } .info_article_type2-1300 ul li { position: relative } .info_article_type2-1300 ul li a { font-size: .9rem; padding-left: 1em } @media screen and (max-width:520px) { .info_article_type2-1300 ul li {   width: 100%;   margin: 0 0 15px 0 } .info_article_type2-1300 ul {   padding: 0 5% } .event-info {   flex-wrap: wrap } .event-info dt.event-date {   width: 100%;   padding: 15px 20px 0;   border: none } .event-info dd.event-category {   position: static;   padding: 10px 10px 10px 20px;   width: 30%;   border-bottom: 1px solid #c8d3de } .event-info dd.event-title, .event-info dd.event-title.term {   width: 70%;   padding: 10px 20px 15px 0 } .info_article_type2-1300 {   padding-bottom: 10px } .event-info {   margin-bottom: 20px } } ul.ranking li p.column-title.column-title_center { display: flex; align-items: center } .useful__page__cnt div#btn-modoru.btn-modoru-useful a { background: #999; color: #fff; border-color: #999 } .useful__page__cnt .btn_flex { display: flex; align-items: center; justify-content: center; width: 100% } .useful__page__cnt div#btn-modoru { width: auto; margin: 40px 40px 0 } .useful__page__cnt #btn-modoru a.btn-round:before { left: -40px } .useful__page__cnt p.catalogue_title { font-size: 20px } @media screen and (max-width:520px) { .useful__page__cnt .btn_flex {   flex-wrap: wrap } .useful__page__cnt div#btn-modoru {   width: auto;   margin: 20px auto 0 } .useful__page__cnt #btn-modoru a {   position: relative } } #article-list.pectin .article .a_wrap { padding-bottom: 0; display: flex; flex-flow: column } #article-list.pectin .article .image_wrap a { height: 100% } #article-list.pectin .article .article-box { padding: 0; margin: auto; display: flex; flex-flow: column; justify-content: center } #article-list.pectin .article .article-box .article-title { text-align: center; margin: 14px auto } ul.ranking { counter-reset: number 0 number2 0 } ul.ranking li p.column-thumb.ranking-thumb::before { counter-increment: number 1; content: counter(number) ""; background: #fad92b; color: #000; width: 17px; height: 17px; position: absolute; font-size: 12px; text-align: center; padding: 2px; top: 0; left: 0; line-height: 1; z-index: 1 } ul.ranking li p.column-thumb.ranking-thumb:nth-of-type(2)::before { content: "2" } a.download_bnr { position: relative; display: flex; padding: 15px 25px; border: 3px #fad92b solid; border-radius: 10px; overflow: hidden; background: url(../../images/article/bg-pickup-small.jpg) #fff no-repeat center } a.download_bnr .text { display: flex; flex-flow: column } a.download_bnr .img { position: absolute; right: 0; top: 0; width: 45% } a.download_bnr .name { font-size: 28px; line-height: 1.2; font-weight: 700; margin-bottom: 1rem; text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; z-index: 1 } a.download_bnr .name p { font-size: 28px; line-height: 1.2; font-weight: 700; margin: 0; padding: 0 } a.download_bnr .btn { width: 289px; height: 26px; margin: auto auto 0 0; text-align: center; color: #fff; background: #00b4be; border-radius: 5px; font-size: 14px; display: flex; justify-content: center; align-items: center; box-shadow: 0 3px 0 0 #00a1aa } a.download_bnr .btn:after { display: inline-block; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-right: 5px; vertical-align: middle; border-color: #fff; content: ''; margin: 0 5px 0 0 } a.download_bnr:hover { opacity: .7; text-decoration: none } table.detail50, table.detail50 th, table.detail50 td { border: 1px solid #ccc } table.detail50 th { background: #ff9; text-align: left } table.detail50 th.title { text-align: center } table.detail50 td { background: #fff } table.detail50 th a { text-decoration: underline } table.detail50 th a:hover { text-decoration: none } a.download_bnr + .under-bnrBox { margin-top: 30px } @media screen and (max-width:520px) { a.download_bnr {   padding: 20px } a.download_bnr .img {   right: -65px;   top: 55%;   transform: translate(0, -50%);   width: 60% } a.download_bnr .name {   font-size: 24px;   margin-bottom: .5rem } a.download_bnr .btn {   width: 180px;   height: 24px;   font-size: 12px } table.detail50 th.title {   display: none } table.detail50 th, table.detail50 td {   display: block } .detail50 col {   width: 100% } } a.download_bnr .name div.balloon { position: relative; font-size: 60%; padding: 5px 10px; background: #fad92b; margin-bottom: 5px; border-radius: 17px; display: inline-block; text-shadow: none } a.download_bnr .name div.balloon::before { position: absolute; bottom: -8px; left: 25px; content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 5px 0 5px; border-color: #fad92b transparent transparent transparent } .pickup_display_type4 #pickup { padding: 0 } .pickup_display_type4 #pickup h2 { margin-bottom: 0 } .pickup_display_type4 #pickup .pickup_conts { padding: 40px; text-align: left } .pickup_display_type4 #pickup .pickup_flex { display: flex; gap: 20px 0; flex-wrap: wrap; align-items: center } .pickup_display_type4 #pickup .pickup_flex .pickup_txt { width: 51% } .pickup_display_type4 #pickup .pickup_flex .pickup_txt * { font-size: 14px; font-weight: 500 } .pickup_display_type4 #pickup .pickup_flex .pickup_txt * + * { margin-top: 1rem } .pickup_display_type4 #pickup .pickup_flex .pickup_txt ul * + * { margin-top: 0 } .pickup_display_type4 #pickup .pickup_flex .pickup_txt ul li { text-indent: -1rem; padding-left: 1rem } .pickup_display_type4 #pickup h3 { font-weight: 700; font-size: 18px; margin-bottom: 30px } .pickup_display_type4 #pickup h3 span { font-weight: 700; font-size: 26px } .pickup_display_type4 #pickup .pickup_flex .pickup_img { width: 49%; position: relative } .pickup_display_type4 #pickup .pickup_flex .pickup_img img { filter: drop-shadow(0 10px 5px rgba(0, 0, 0, .1)) } .pickup_display_type4 #pickup .pickup_flex .pickup_img .pickup_page { position: absolute; background: #00b4be; border: 2px #fff solid; border-radius: 100%; width: 130px; height: 130px; padding: 30px 32px 30px 0; text-align: right; font-size: 17.5px; font-weight: 700; color: #fff; letter-spacing: 1.2px; right: -10px; top: -60px; z-index: 1 } .pickup_display_type4 #pickup .pickup_flex .pickup_img .pickup_page span { font-size: 23px; letter-spacing: -1px } .pickup_display_type4 #pickup .pickup_flex .pickup_img .pickup_page span.number { font-size: 53px } .pickup_display_type4 #pickup a.btn-download { margin: 20px auto 0 0; width: 46.2% } #pickup a.btn-download span { padding: 0 20px 0 0; font-weight: 700 } @media screen and (max-width:520px) { .pickup_display_type4 #pickup .pickup_flex .pickup_txt {   width: 100% } .pickup_display_type4 #pickup .pickup_flex .pickup_img {   width: 100% } .pickup_display_type4 #pickup a.btn-download {   width: 100% } .pickup_display_type4 #pickup .pickup_flex .pickup_img .pickup_page {   width: 100px;   height: 100px;   top: -10px;   font-size: 16px;   padding: 25px 25px 25px 0 } .pickup_display_type4 #pickup .pickup_flex .pickup_img .pickup_page span {   font-size: 16px } .pickup_display_type4 #pickup .pickup_flex .pickup_img .pickup_page span.number {   font-size: 26px } } .contact_span { color: #FF1418; font-weight: 500 } .contact_ant { color: #FF1418; font-weight: 700; font-size: 22px; text-align: center } .useful_txt { margin-bottom: 30px } .writer_block * { box-sizing: border-box } .writer_block { margin: 40px auto; background: #fff; overflow: hidden; border-radius: 5px } .writer-title { width: 100%; background: #fad92b; font-size: 22px; padding: 18px 25px; margin-bottom: 0; font-weight: 700; letter-spacing: .2px } .writer-flex { display: flex; gap: 50px; flex-wrap: wrap } .writer-imgblock { width: 130px; text-align: center } .writer-textblock { width: calc(100% - 50px - 130px) } .writer-cont { padding: 30px 20px } .writer-img { border-radius: 50%; overflow: hidden; border: 1px solid #c4c4c4; position: relative; padding-top: 100% } .writer-img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; max-width: none; width: 100% } .writer-name { text-align: center; font-size: 16px; margin: 15px -10% 0; word-break: keep-all; width: 120%; line-height: 1.333 } .writer-name span { font-weight: 700; font-size: 18px } .honbun .writer-textblock p { font-weight: 500; margin: 0; padding: 0; letter-spacing: .5px; font-size: 16px; line-height: 1.75 } .writer-textblock small { font-weight: 500; margin: 20px 0 0; font-size: 13px; display: block } .writer-textlistitem { display: flex; width: 100%; flex-wrap: wrap; gap: 10px } .writer-textlistitem dt { width: calc(32% - 10px); font-size: 16px; font-weight: 600; line-height: 1.125; display: flex } .writer-textlistitem dt span { width: calc(100% - 28px) } .writer-textlistitem dd { width: 68%; line-height: 1.125; margin: 0 } dl.writer-textlist { margin: 25px 0 0; display: flex; flex-flow: column; gap: 10px } .writer-textlistitem dt::before { content: ""; display: inline-block; background-image: url(../images/writer-textlist-icon.png); width: 18px; height: 18px; background-position: center; background-size: contain; background-repeat: no-repeat; margin-right: 10px } @media screen and (max-width:520px) { .writer_block {   width: calc(100% - 20px) } .writer-title {   text-align: center } .writer-flex {   gap: 20px;   justify-content: center } .writer-cont {   padding: 30px } .writer-imgblock {   width: 100% } .writer-img {   width: 45%;   padding-top: 45%;   margin: 0 auto } .writer-textblock {   width: 100% } .writer-textlistitem {   gap: 8px } .writer-textlistitem dt {   width: 100% } .writer-textlistitem dd {   width: 100%;   padding-left: 28px } } .sns-btn.fb { max-width: 91px } div.download_bnr { position: relative; display: flex; padding: 15px 25px; border: 3px #fad92b solid; border-radius: 10px; overflow: hidden; background: url(../../images/article/bg-pickup-small.jpg) #fff no-repeat center } div.download_bnr .text { display: flex; flex-flow: column } div.download_bnr .img { position: absolute; right: 0; top: 0; width: 45% } div.download_bnr .name { font-size: 28px; line-height: 1.2; font-weight: 700; margin-bottom: 1rem; text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; z-index: 1 } div.download_bnr .name p { font-size: 28px; line-height: 1.2; font-weight: 700; margin: 0; padding: 0 } div.download_bnr .btn { width: 289px; height: 26px; margin: auto auto 0 0; text-align: center; background: #00b4be; border-radius: 5px; display: flex; justify-content: center; align-items: center; box-shadow: 0 3px 0 0 #00a1aa } div.download_bnr .btn a { color: #fff; font-size: 14px } div.download_bnr .btn a:hover { text-decoration: none } div.download_bnr .btn:after { display: inline-block; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-right: 5px; vertical-align: middle; border-color: #fff; content: ''; margin: 0 5px 0 0 } div.download_bnr:hover { opacity: .7; text-decoration: none } div.download_bnr + .under-bnrBox { margin-top: 30px } div.download_bnr + p { margin-top: 30px } .honbun .mokuji + div div.download_bnr { margin-top: 30px } @media screen and (max-width:520px) { div.download_bnr {   padding: 20px } div.download_bnr .img {   right: -65px;   top: 55%;   transform: translate(0, -50%);   width: 60% } div.download_bnr .name {   font-size: 24px;   margin-bottom: .5rem } div.download_bnr .btn {   width: 180px;   height: 24px } div.download_bnr .btn a {   font-size: 12px } } div.download_bnr .name div.balloon { position: relative; font-size: 60%; padding: 5px 10px; background: #fad92b; margin-bottom: 5px; border-radius: 17px; display: inline-block; text-shadow: none } div.download_bnr .name div.balloon::before { position: absolute; bottom: -8px; left: 25px; content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 5px 0 5px; border-color: #fad92b transparent transparent transparent } .corp_bnr { min-height: 190px; display: flex; border: 2px solid #fad92b; background-color: #fff; background-image: url(../images/corp_bnr.png); justify-content: space-between; background-repeat: no-repeat; background-position: bottom center } .corp_bnr:hover { text-decoration: none; opacity: .8 } .corp_bnr .text { padding: 30px 20px; display: flex; flex-flow: column; justify-content: center; width: calc(100% - 33%) } .corp_bnr .img { width: 33%; position: relative; overflow: hidden; max-width: 260px } .corp_bnr .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: none; min-height: 100%; min-width: 100% } .corp_bnr .name { font-size: 21px; color: rgb(17, 17, 17); font-weight: 700; line-height: 1.667 } .corp_bnr .summary { font-size: 14px; color: rgb(17, 17, 17); line-height: 2 } .corp_bnr .btn { background: #fed90b; padding: 9px; border-radius: 9999px; margin-top: 15px; text-align: center; max-width: 250px; font-size: 14px; color: rgb(34, 34, 34); position: relative } .corp_bnr .btn:before { top: 50%; right: 20px; transform: rotate(45deg) translateY(-50%); position: absolute; display: inline-block; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; margin-right: 5px; vertical-align: middle; border-color: #222; content: '' } @media screen and (max-width:520px) { .corp_bnr {   margin: 0 10px;   flex-wrap: wrap;   min-height: 0 } .corp_bnr .text {   width: 100%;   padding: 20px 15px;   position: relative } .corp_bnr .img {   height: 120px;   width: 100%;   max-width: 100% } .corp_bnr .img img {   width: 100% } .corp_bnr .summary {   font-size: 13px } .corp_bnr .btn {   position: absolute;   width: 100%;   right: 10px;   top: calc(100% + 60px);   z-index: 1;   box-shadow: 0 0 10px -5px #000 } .corp_bnr .name {   font-size: 16px } } .download_bnr + .corp_bnr { margin-top: 30px } .corp_bnr + .download_bnr { margin-top: 30px } .under-bnrBox { margin-top: 30px } .honbun a.download_bnr + h3 { margin-top: 50px } /* 260303 12月_SEO対策 */ .p-faq-custom-section { padding: 0 10px; max-width: 900px; margin: 0 auto 2em; } .p-faq-node { margin-bottom: 12px; border: 1px solid #eee; border-radius: 6px; overflow: hidden; } .p-faq-q { width: 100%; background-color: #fad92b; padding: 16px 25px; display: flex; align-items: center; font-size: 18px; font-weight: bold; cursor: pointer; position: relative; text-align: left; outline: none; border: 1px solid #c8d3de; box-sizing: border-box; border-radius: 4px; } .p-faq-node.is-active .p-faq-q { border-radius: 4px 4px 0 0; } .p-faq-q-icon { font-size: 30px; margin-right: 15px; color: #333; font-family: "Noto Sans JP"; line-height: 1.3; margin-bottom: 0.1em; } .p-faq-plus-minus { position: absolute; right: 17px; width: 18px; height: 2px; background-color: #333; } .p-faq-plus-minus::before { content: ""; position: absolute; width: 2px; height: 18px; background-color: #333; left: 8px; top: -8px; transition: transform 0.3s ease; } /* 開閉時のプラスマイナス切り替え */ .p-faq-node.is-active .p-faq-plus-minus::before { transform: rotate(90deg); opacity: 0; } .p-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fff; border: 1px solid #dddddd; border-top: none; border-radius: 0 0 4px 4px; } .p-faq-a-content { padding: 16px 25px; display: flex; align-items: flex-start; } .p-faq-a-icon { color: #00b4be; font-size: 30px; font-weight: bold; margin-right: 15px; line-height: 1.3; font-family: "Noto Sans JP"; } .p-faq-a-text { margin: 0; margin-top: 0.5em; line-height: 1.7; color: #000; flex: 1; } .p-faq-list { list-style: none; padding: 0; } .p-faq-list + .p-faq-list { margin: 10px 0 15px; } p + .p-faq-list { margin: 10px 0 15px; } .p-faq-list + p { margin: 10px 0 15px; } .p-faq-list li { margin-bottom: 15px; padding-left: 0; text-indent: 0; line-height: 1.7; } .p-faq-a-text p { margin: 0 0 5px 0; font-size: 16px; color: #000; } .p-faq-a-text strong { color: #000; display: inline-block; font-size: 1.05em; font-weight: bold; margin-bottom: 4px; } .p-faq-a-content > p, .p-faq-a-content > br { display: none !important; } .p-faq-a-text a { display: inline-block; color: #00b4be; text-decoration: underline; } .p-faq-a-text a:hover {    text-decoration: none; } .p-faq-a-text a.arrow-link { text-indent: -1em; padding-left: 1em; } .p-faq-a-text a.arrow-link:before { display: inline-block; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-right: 5px; vertical-align: middle; border-color: #00b4be; content: ""; margin: 0 5px 2px 0; } @media screen and (max-width:520px) { .p-faq-a-text p {   padding: 0; } .p-faq-q {   padding-right: 40px;   padding-left: 15px; } .p-faq-list li {   font-size: 16px; } .p-faq-a-content {   padding-left: 15px; } }