/* Theme Name: i-STAFF-OPTIMIZED Theme URI: Version: 1.3 */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Normalize 2.0 Layout --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 Normalize Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css --------------------------------------------------------------*/ /*! normalize.css 2011-09-22T17:42 UTC - http://github.com/necolas/normalize.css */ /* ============================================================================= HTML5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;} audio, canvas, video { display: inline-block; *display: inline; *zoom: 1;} audio:not([controls]) { display: none;} [hidden] { display: none;} /* ============================================================================= Base ========================================================================== */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} body { margin: 0;} body, button, input, select, textarea { font-family: sans-serif;} /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted;} b, strong { font-weight: bold;} blockquote{ margin: 1em 40px;} dfn { font-style: italic;} mark{ background: #ff0; color: #000;} pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em;} pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word;} q { quotes: none;} q:before, q:after { content: ''; content: none;} small { font-size: 75%;} sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup { top: -0.5em;} sub { bottom: -0.25em;} /* ============================================================================= Lists ========================================================================== */ nav ul, nav ol { list-style: none; list-style-image: none;} /* ============================================================================= Embedded content ========================================================================== */ img { border: 0; -ms-interpolation-mode: bicubic;} svg:not(:root) { overflow: hidden;} /* ============================================================================= Figures ========================================================================== */ figure { margin: 0;} /* ============================================================================= Forms ========================================================================== */ form { margin: 0;} fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} legend { border: 0; *margin-left: -7px;} button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;} button, input { line-height: normal;} button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible;} input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0;} input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;} textarea { overflow: auto; vertical-align: top;} input[type="search"]:focus { outline: none;} /* ============================================================================= Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0;} /*-------------------------------------------------------------- 2.0 Accessibility --------------------------------------------------------------*/ /* -------------------------------------------------- reset -------------------------------------------------- */ * { margin: 0; padding: 0;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, form, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; /*font: inherit;*/ vertical-align: baseline; } img{ vertical-align: bottom;} ul{ list-style: none;} ul li{ list-style-type: none;} em { font-style: normal;} /* font-style -------------------------------------------------- */ body { font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight: 500; font-size: 15px; *font-size:small; *font:x-small; line-height: 1.55; } input, textarea {　font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;} .min { font-family: "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;} ::selection{ background: #feffaf; color: #000;} ::-moz-selection{ background: #feffaf; color: #000;} a { color:#2a6bc6; text-decoration:none;} a:link { color:#2a6bc6;} a:visited{ color:#2a6bc6;} a:hover { color:#2a6bc6;} a:active { color:#2a6bc6;} .red { color:#ff0000; } .sp{ display: none;} @media only screen and (max-width: 769px) { .sp{ display: block;} } /* utility -------------------------------------------------- */ .fL{float:left;} .fR{float:right;} .cf{zoom: 1; clear: both;} .cf:after{ content: ''; display: block; clear: both;} /* Header -------------------------------------------------- */ #hd{ position: absolute; width: 100%; top: 0; z-index: 100; transition: 0.6s linear;} #hd.fix{ position: fixed; top: 0; background: rgba(255,255,255,0.95); animation-name: slideIn; animation-timing-function: ease-in; animation-iteration-count: 1; animation-duration: .5s; } @keyframes slideIn { 0% { top: -56px;} 100% { top: 0;} } .inner-hd{ position: relative; width: 90%; max-width: 1160px; margin: auto; padding: 30px 0 10px;} .inner-hd .logo-hd { position: relative; float: left; font-weight: normal; width: 182px; padding-top: 25px; z-index: 10;} .inner-hd .logo-hd span { display: block; position: absolute; top: -5px; color: #fff; width: 280px; line-height: 1;} .inner-hd .logo-hd a{ display: block;} .inner-hd .logo-hd img { width: 182px;} #gNav { position: relative; padding-top: 52px; padding-left: 220px;} #gNav ul { font-size: 0;} #gNav ul li { display: inline-block; font-size: 15px; margin-right: 38px;} #gNav ul li:last-child{ margin-right: 0;} #gNav ul li a { color: #fff;} #gNav ul li.menuTel, #gNav ul li.consul{ display: none;} .sNav { position: absolute; top: 0; right: 0;} .sNav li { position: absolute; top: 0; } .sNav li.tel{ right: 140px; padding-top: 15px; width: 190px; color: #fff; font-size: 14px; text-align: center;} .sNav li.tel a, .sNav li.tel span.telno { color: #fff; font-size: 23px; font-weight: 700;} /* .sNav li.tel a{ display: none;} */ .sNav li.tel span.telno { display: block;} .sNav li.tel span.taiou{ display: block; width: 75%; margin: auto; padding: 2px 0; font-size: 13px; border: solid 1px #fff;} .sNav li.tel span.taiou br{ display: none;} .sNav li.entry { right: 0; display: block; width: 110px; height: 100px;} .sNav li.entry a { display: block; box-sizing: border-box; height: 100px; padding-top: 30px; background: #f14444; color: #fff; text-align: center; transition: 0.6s linear; } .sNav li.entry a:hover{ opacity: .6;} #hd.fix .inner-hd{ padding: 10px 0;} #hd.fix .sNav li.tel{ padding-top: 0px;} #hd.fix .sNav li.entry a{ height: 95px; padding-top: 25px;} .menu { display: none; width: 35px; height: 40px; position: absolute; right: 0; top: 30px; z-index: 10001;} .menu span{ display: block; width: 100%; height: 3px; background: #fff; position: absolute; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; transition: all .4s } .menu:after{ content: 'MENU'; position: absolute; bottom: 0; width: 100%; color: #fff; font-size: 10px; text-align: center;} .menu.active:after{ content: 'CLOSE';} #hd.fix .menu span{ background: #222;} #hd.fix .menu:after{ color: #222;} .menu span:nth-of-type(1) { top: 0px;} .menu span:nth-of-type(2) { top: 10px;} .menu span:nth-of-type(3) { top: 20px;} .menu.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-315deg); transform: translateY(10px) rotate(-315deg); } .menu.active span:nth-of-type(2) { opacity: 0; } .menu.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(315deg); transform: translateY(-10px) rotate(315deg); } #hd.fix .inner-hd .logo-hd span, #hd.fix #gNav li a, #hd.fix .sNav li.tel, #hd.fix .sNav li.tel a, #hd.fix .sNav li.tel span.telno{ color: #222;} #hd.fix .sNav li.tel span.taiou{ border: solid 1px #222; color: #222;} #hd.fix #gNav.open li a{ color: #fff;} #hd.fix #gNav li a:hover{ color: #2a6bc6; font-weight: 700;} @media only screen and (max-width: 1160px) { #gNav{ display: none; opacity: 0; transition: 1s linear; position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100vh; margin: 0; padding: 0; overflow-y: scroll; background: rgba(35,93,174,0.9); } #gNav.open {display: block; opacity: 1; z-index: 1000; animation-duration: 0.8s; animation-name: fade-in; -moz-animation-duration: 0.8s; -moz-animation-name: fade-in; -webkit-animation-duration: 0.8s; -webkit-animation-name: fade-in; } #gNav ul{ width: 90%; margin: auto; padding: 40px 0 60px;} #gNav ul li { display: block; margin: 0 0 50px; font-size: 28px; text-align: center;} #gNav ul li.menuTel { display: table; box-sizing: border-box; width: 80%; margin: 0 0 50px; padding: 20px 0; border: solid 1px #fff; color: #fff; line-height: 1.4;} #gNav ul li.menuTel span.taiou{ display: table-cell; width: 30%; text-align: center; vertical-align: middle;} #gNav ul li.menuTel span.tel { display: table-cell; width: 68%; text-align: center; border-left: solid 1px #fff; background: url(/img/icn-tel.png) no-repeat 8% 50%;} #gNav ul li.menuTel span.tel a, #gNav ul li.menuTel span.tel span.num{ color: #fff; font-size: 40px;} /* #gNav ul li.menuTel span.tel a{ display: none;} */ #gNav ul li.menuTel span.tel em{ display: block; font-size: 18px;} #gNav ul li.consul{ display: block; width: 70%; height: 100px; margin: auto; background: #fe4343; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; color: #fff; font-size: 30px; line-height: 100px; text-align: center; } .sNav li.tel { right: 70px; padding-top: 20px; padding-left: 75px;} .sNav li.tel span.telno { font-size: 18px;} .sNav li.tel span.taiou { width: 65px; position: absolute; left: 0; top: 20px;} .sNav li.tel span.taiou br{ display: block;} .sNav li.entry{ display: none;} .menu { display: block;} #hd.fix .sNav li.tel{ padding-top: 10px;} } @media only screen and (max-width: 769px) { .inner-hd{ width: 95%; padding: 15px 0 10px;} .inner-hd .logo-hd span { font-size: 9px; letter-spacing: -0.05rem} #gNav ul li { font-size: 20px;} #gNav ul li.menuTel { width: 85%; margin: 0 0 30px; padding: 8px 0; font-size: 12px;} #gNav ul li.menuTel span.taiou{ font-size: 14px;} #gNav ul li.menuTel span.tel { background-size: 20px auto;} #gNav ul li.menuTel span.tel a, #gNav ul li.menuTel span.tel span.num{ font-size: 20px;} /* #gNav ul li.menuTel span.tel a { display: block;} #gNav ul li.menuTel span.tel span.num { display: none;} */ #gNav ul li.menuTel span.tel em{ display: block; font-size: 14px;} #gNav ul li.consul{ height: 60px; font-size: 16px; line-height: 60px;} .sNav li.tel { right: 50px; padding-top: 15px; padding-left: 70px;} .sNav li.tel span.taiou { width: 50px; position: absolute; left: 0; top: 15px; font-size: 9px;} /* .sNav li.tel a { display: block;} .sNav li.tel span.telno { display: none;} */ .menu { top: 12px;} #hd.fix .menu.active span{ background: #fff;} #hd.fix .menu.active:after{ color: #fff;} } @media only screen and (max-width: 481px) { .inner-hd .logo-hd { width: auto} .inner-hd .logo-hd { padding-top: 12px;} .inner-hd .logo-hd span { top: 0; width: 160px; font-size: 8px; letter-spacing: -0.05rem} .inner-hd .logo-hd img { width: 100px;} #gNav ul { padding: 15px 0 20px;} #gNav ul li { margin: 0 0 30px; font-size: 16px; text-align: center;} #gNav ul li.menuTel { width: 85%; margin: 0 0 30px; padding: 8px 0; font-size: 12px;} #gNav ul li.menuTel span.taiou{ width: 30%; font-size: 12px;} #gNav ul li.menuTel span.tel { width: 68%; background-size: 20px auto;} #gNav ul li.menuTel span.tel a, #gNav ul li.menuTel span.tel span.num{ font-size: 18px;} #gNav ul li.menuTel span.tel em{ display: block; font-size: 12px;} #gNav ul li.consul{ height: 60px; font-size: 16px; line-height: 60px;} .sNav li.tel { right: 10px; padding-top: 10px; padding-left: 10px; font-size: 9px} .sNav li.tel a { font-size: 17px; font-weight: bold; } .sNav li.tel span.taiou { width: 35px; font-size: 7px; top: 10px;} } @media only screen and (max-width: 376px) { .inner-hd .logo-hd span { font-size: 7px;} .inner-hd .logo-hd img { width: 100px;} #gNav ul li.menuTel span.tel { background-size: 18px auto;} #gNav ul li.menuTel span.tel a, #gNav ul li.menuTel span.tel span.num{ font-size: 16px;} .sNav li.tel { right: 15px; padding-left: 10px; font-size: 7px; line-height: 1.4;} .sNav li.tel a { font-size: 13px;} .sNav li.tel span.taiou { width: 30px; font-size: 7px; top: 8px;} } @keyframes fade-in { 0% { display: none; opacity: 0;} 1% { display: block; opacity: 0;} 100% { display: block; opacity: 1;} } @-moz-keyframes fade-in { 0% { display: none; opacity: 0;} 1% { display: block; opacity: 0;} 100% { display: block; opacity: 1;} } @-webkit-keyframes fade-in { 0% { display: none; opacity: 0;} 1% { display: block; opacity: 0;} 100% { display: block; opacity: 1;} } /* footer -------------------------------------------------- */ #ft { padding: 45px 0 100px; background: #2b3340; border-top: solid 1px #454c57;} #ft .inner{ width: 95%; max-width: 1160px; margin: auto;} #ft .inner dl{ float: left; box-sizing: border-box; width: 600px; position: relative; padding-left: 260px; color: #fff;} #ft .inner dt{ position: absolute; left: 0;} #ft .inner dd a{ display: none;} #ft ul { margin-bottom: 5px; padding-top: 20px; color: #fff; font-size: 13px; text-align: right;} #ft ul li { display: inline; margin-right: 12px; padding-right: 12px; border-right: solid 1px #fff;} #ft ul li:last-child { border: none; margin-right: 0; padding-right: 0;} #ft ul li a{ color: #fff;} #ft address{ color: #fff; font-size: 13px; font-style: normal; text-align: right;} @media only screen and (max-width: 960px) { #ft .inner dl{ width: 380px; padding-left: 200px; color: #fff;} } @media only screen and (max-width: 769px) { #ft .inner dl{ width: 90%; margin: 0 auto;} #ft .inner dl dt img{ width: 85%;} #ft .inner dl dd{ font-size: 22px;} /* #ft .inner dd span.num{ display: none;} #ft .inner dd a{ display: block; color: #fff; text-decoration: underline;} */ #ft ul { clear: both; margin-bottom: 20px; padding-top: 40px; font-size: 18px; text-align: center;} #ft ul li { display: inline; margin-right: 12px; padding-right: 12px; border-right: solid 1px #fff;} #ft ul li:last-child { border: none; margin-right: 0; padding-right: 0;} #ft address{ font-size: 18px; text-align: center;} } @media only screen and (max-width: 481px) { #ft { padding: 45px 0;} #ft .inner dl{ padding-left: 160px;} #ft .inner dl dt { left: 10px;} #ft .inner dl dd { font-size: 14px;} #ft ul { padding-top: 20px; font-size: 12px;} #ft address{ font-size: 12px;} } /* parts -------------------------------------------------- */ .ttl { font-size: 45px; font-weight: normal; line-height: 1.4; text-align: center;} .read{ font-size: 18px; text-align: center;} .btn { padding: 50px 0 0; font-size: 20px; text-align: center;} .btn a{ transition: 0.6s linear; position: relative; display: block; width: 90%; max-width: 590px; height: 80px; margin: auto; background: #fe4343; line-height: 80px; color: #fff; } .btn a:after{ content: ''; width: 15px; height: 15px; position: absolute; top: 50%; right: 5%; margin-top: -8px; border-top: solid 1px #fff; border-right: solid 1px #fff; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .btn a:hover{ opacity: 0.5;} .btn a span{ display:inline-block; position: relative;} .btn a span:before, .btn a span:after { content: ''; width: 4px; height: 4px; position: absolute; top: 20px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; } .btn a span:before{ left: 20%;} .btn a span:after { right: 20%;} @media only screen and (max-width: 769px) { .btn { padding: 20px 0 0;} } @media only screen and (max-width: 481px) { .ttl { font-size: 28px;} .read{ font-size: 12px;} .btn { font-size: 18px;} .btn a:after{ margin-top: -8px;} } /* Contents -------------------------------------------------- */ .kv{ width: 100%; padding-top: 280px; background: url(/wp-content/uploads/2021/10/kv.jpg) no-repeat 50% 0%; } .kv .inner{ width: 90%; max-width: 1160px; margin: auto; padding-bottom: 80px;} .kv .inner h2 { color: #fff; font-size: 45px; font-weight: normal; line-height: 1.4;} .kv .inner h2 em { font-size: 60px;} .kv .inner h2 span{ display: block; font-size: 60px;} .kv .inner p { color: #fff; font-size: 30px;} .kv .inner .btn a{ display: block; width: 390px; height: 70px; margin: 0; background: #fe4343; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; color: #fff; font-size: 23px; line-height: 70px; text-align: center; } .kv .signboard { padding: 85px 0 60px; background: rgba(35,93,174,.9); color: #fff;} .kv .signboard h2{ font-size: 45px; text-align: center; font-weight: normal; line-height: 1.2; margin-bottom: 30px;} .kv .signboard p { font-size: 20px; text-align: center; margin-bottom: 20px;} .kv .signboard ul{ width: 98%; max-width: 1160px; margin: auto; font-size: 0; text-align: center;} .kv .signboard ul li { display: inline-block; box-sizing: border-box; width: 49%; max-width: 580px; padding: 5px 0 5px 40px; background: url(/img/icn-check.png) no-repeat 5px 40%; background-size: auto 20px; font-size: 18px; } .kv .signboard ul li span{ display: block; text-align: left;} @media only screen and (min-width: 1500px) { .kv { background-size: 100% auto;} } @media only screen and (max-width: 1499px) { .kv { background-size: auto 100%;} } @media only screen and (max-width: 960px) { .kv .inner h2 { font-size: 35px;} .kv .inner h2 em { font-size: 50px;} .kv .inner h2 span{ font-size: 50px;} .kv .signboard {} .kv .signboard h2{ font-size: 35px;} .kv .signboard ul li{ display: inline-block; box-sizing: border-box; width: 45%; font-size: 16px;} } @media only screen and (max-width: 769px) { .kv{ padding-top: 280px;} .kv .inner p { margin-bottom: 40px;} .kv .signboard { padding: 60px 0 50px;} .kv .signboard ul{ width: 80%;} .kv .signboard ul li{ display: block; width: 100%;} } @media only screen and (max-width: 481px) { .kv{ padding-top: 180px;} .kv .inner h2 { font-size: 22px;} .kv .inner h2 em { font-size: 28px;} .kv .inner h2 span{ font-size: 32px;} .kv .inner p { margin-bottom: 30px; font-size: 17px;} .kv .inner .btn a{ display: block; width: 80%; height: 60px; line-height: 60px;} .kv .signboard { padding: 40px 0;} .kv .signboard h2{ font-size: 28px; margin-bottom: 20px;} .kv .signboard p { font-size: 14px; margin-bottom: 20px;} .kv .signboard ul{ width: 90%;} .kv .signboard ul li{ display: block; width: 100%;} } #merit{ padding: 60px 0 80px; background: url(/wp-content/uploads/2021/10/bg-merit.jpg) no-repeat 50% 0;} #merit h2.ttl { margin-bottom: 10px;} #merit h2 img { margin: 0 5px; height: 45px; vertical-align: middle;} #merit h3 { margin-bottom: 20px; font-size: 22px; line-height:1.2; text-align: center;} #merit h3 img { margin: 0 5px; height: 22px; vertical-align: middle;} #merit .read { margin-bottom: 55px;} #merit ul{ text-align: center;} #merit ul li{ display: inline-block; width: 18%; max-width: 228px; margin: 0 2px; vertical-align: top;} #merit ul li dl dt { padding: 30px 0; background: rgba(42, 107, 198, 0.13); color: #2a6bc6; font-size: 22px;} #merit ul li dl dt span{ display: block; color: #09d4ff; font-size: 10px;} #merit ul li dl dd.fig img { width: 100%;} #merit ul li dl dd.txt { height: 280px; padding: 45px 0 0; background: #272c34; color: #fff;} #merit ul li dl dd.txt span { display: block; box-sizing: border-box;} #merit ul li dl dd.txt span.stl { margin-bottom: 40px; font-size: 16px; font-weight: 700; text-align: center;} #merit ul li dl dd.txt span.note{ width: 85%; margin: auto; padding-left: 25px; margin-bottom: 5px; background: url(/img/icn-check2.png) no-repeat 0 4px; background-size: 15px auto; font-size: 14px; text-align: left; } @media only screen and (max-width: 1500px) { #merit{ background-size: 100% auto;} } @media only screen and (max-width: 1499px) { #merit{ background-size: auto 100%;} } @media only screen and (max-width: 960px) { #merit ul li dl dt { padding: 20px 0; font-size: 18px;} #merit ul li dl dt span{ margin-bottom: 10px;} #merit ul li dl dd.fig img { width: 100%;} #merit ul li dl dd.txt { padding: 30px 0 0;} #merit ul li dl dd.txt span.stl { margin-bottom: 30px; font-size: 14px;} #merit ul li dl dd.txt span.note{ padding-left: 18px; background-size: 10px auto; font-size: 12px;} } @media only screen and (max-width: 769px) { #merit{ padding: 60px 0 50px;} #merit ul li{ display: block; width: 90%; max-width: 90%; margin: 0 auto 20px;} #merit ul li dl dt { font-size: 40px;} #merit ul li dl dt span{ font-size: 16px;} #merit ul li dl dd.fig img.pc { display: none;} #merit ul li dl dd.txt { height: auto; padding: 45px 0px;} #merit ul li dl dd.txt span.stl { font-size: 32px;} #merit ul li dl dd.txt span.note{ padding-left: 30px; background-size: 20px auto; font-size: 24px;} #merit ul li dl dd.txt span.stl br, #merit ul li dl dd.txt span.note br{ display: none;} } @media only screen and (max-width: 641px) { #merit ul li dl dd.txt span.stl { font-size: 26px;} #merit ul li dl dd.txt span.note{ font-size: 20px;} } @media only screen and (max-width: 481px) { #merit h2 img { height: 30px;} #merit h3 { margin-bottom: 15px; font-size: 15px;} #merit h3 img { height: 15px;} #merit .read { margin-bottom: 30px;} #merit ul li dl dt { font-size: 26px;} #merit ul li dl dd.txt span.stl { font-size: 18px;} #merit ul li dl dd.txt span.note{ padding-left: 20px; background-size: 15px auto; font-size: 14px;} } #reason { padding: 50px 0 80px; background: #eff3f8;} #reason .ttl { margin-bottom: 50px;} #reason h2 img { height: 40px; margin: 0 5px; vertical-align: text-bottom;} #reason h2 span{ color: #2a6bc6; font-size: 70px;} #reason .bloc { width: 94%; max-width: 1400px; margin: 0 auto;} #reason .bloc .fig, #reason .bloc .box{ position: relative; display: inline-block; width: 50%; height: 600px; box-sizing: border-box; padding: 40px; vertical-align: middle; color: #fff; } #reason .bloc .box .inner { display: table; height: 100%; padding: 0 50px; background: rgba(255,255,255,0.1);} #reason .bloc .box .inner div { display: table-cell; vertical-align: middle;} #reason .bloc .box img.icn{ width: 100px; position: absolute; top: 0;} #reason .bloc .box h3{ margin-bottom: 45px; font-size: 35px; font-weight: normal; line-height: 1.4; text-align: center;} #reason .bloc .box p { margin-bottom: 30px; font-size: 18px;} #reason .bloc .box p em { font-weight: 700;} #reason .bloc .box:before{ content: ''; width: 0; height: 0; position: absolute; border: 10px solid transparent; top: 50%; margin-top: -10px;} #reason .reason1 .box{ background: #2a6bc6;} #reason .reason1 .box:before{ border-right: 20px solid #2a6bc6; left: -30px;} #reason .reason1 .box img.icn{ left: 0;} #reason .reason1 .fig{ background: url(/wp-content/uploads/2021/10/reason1.jpg) no-repeat 50% 50%; background-size: auto 100%;} #reason .reason2 .box{ background: #272c34;} #reason .reason2 .box:before{ border-left: 20px solid #272c34; right: -30px;} #reason .reason2 .box img.icn{ right: 0;} #reason .reason2 .fig{ background: url(/wp-content/uploads/2021/10/reason2.jpg) no-repeat 50% 50%; background-size: auto 100%;} #reason .reason3 .box{ background: #2a6bc6;} #reason .reason3 .box:before{ border-right: 20px solid #2a6bc6; left: -30px;} #reason .reason3 .box img.icn{ left: 0;} #reason .reason3 .fig{ background: url(/wp-content/uploads/2021/10/reason3.jpg) no-repeat 50% 50%; background-size: auto 100%;} #reason .reason4 .box{ background: #272c34;} #reason .reason4 .box:before{ border-left: 20px solid #272c34; right: -30px;} #reason .reason4 .box img.icn{ right: 0;} #reason .reason4 .fig{ background: url(/wp-content/uploads/2021/10/reason4.jpg) no-repeat 50% 50%; background-size: auto 100%;} #reason .reason5 .box{ background: #2a6bc6;} #reason .reason5 .box:before{ border-right: 20px solid #2a6bc6; left: -30px;} #reason .reason5 .box img.icn{ left: 0;} #reason .reason5 .fig{ background: url(/wp-content/uploads/2021/10/reason5.jpg) no-repeat 50% 50%; background-size: auto 100%;} @media only screen and (max-width: 960px) { #reason .bloc .fig, #reason .bloc .box{ height: 500px; padding: 20px;} #reason .bloc .box img.icn{ width: 80px;} #reason .bloc .box h3{ margin-bottom: 40px; font-size: 22px;} #reason .bloc .box p { margin-bottom: 20px; font-size: 16px;} } @media only screen and (max-width: 769px) { #reason { padding: 60px 0 50px;} #reason .bloc { width: 100%;} #reason .bloc .fig{ float: none; width: 100%; background-size: 100% auto;} #reason .bloc .box{ float: none; display: block; width: 100%; height: auto; box-sizing: border-box; padding: 30px;} #reason .bloc .box .inner { display: block; height: auto; padding: 40px;} #reason .bloc .box img.icn{ width: 100px;} #reason .bloc .box h3{ font-size: 36px;} #reason .bloc .box p { font-size: 26px;} #reason .bloc .box h3 br{ display: none;} #reason .bloc .box:before{ top: -50px; border: 30px solid transparent;} #reason .reason1 .box:before{ border-bottom: 30px solid #2a6bc6; left: 50%; margin-left: -30px;} #reason .reason2 .box:before{ border-bottom: 30px solid #272c34; left: 50%; margin-left: -30px;} #reason .reason3 .box:before{ border-bottom: 30px solid #2a6bc6; left: 50%; margin-left: -30px;} #reason .reason4 .box:before{ border-bottom: 30px solid #272c34; left: 50%; margin-left: -30px;} #reason .reason5 .box:before{ border-bottom: 30px solid #2a6bc6; left: 50%; margin-left: -30px;} } @media only screen and (max-width: 641px) { #reason .bloc .box img.icn{ width: 80px;} #reason .bloc .box h3{ font-size: 30px;} #reason .bloc .box p { font-size: 20px;} #reason .bloc .box h3 br{ display: none;} } @media only screen and (max-width: 481px) { #reason .ttl { margin-bottom: 30px;} #reason h2 img { height: 26px;} #reason h2 span{ font-size: 50px;} #reason .bloc .fig{ height: 300px;} #reason .bloc .box{ padding: 30px 20px;} #reason .bloc .box .inner { padding: 25px;} #reason .bloc .box img.icn{ width: 60px;} #reason .bloc .box h3{ margin-bottom: 25px; font-size: 18px;} #reason .bloc .box p { font-size: 14px;} } #pricePlan { padding: 60px 0 80px; background: url(/wp-content/uploads/2021/10/bg-plan.jpg) no-repeat 50% 0;} #pricePlan .ttl{ margin-bottom: 10px;} #pricePlan .read { margin-bottom: 70px;} #pricePlan .note { font-size: 18px; font-weight: 700; text-align: center;} #pricePlan .planMenu { width: 95%; max-width: 1000px; margin: 0 auto 40px; background: url(/img/bg-plan-waku.png) no-repeat 50% 50%; background-size: 100% 100%;} #pricePlan .planMenu h3 { width: 280px; margin: -20px auto 0; padding: 5px 0; border: solid 1px #dbdbdb; font-size: 18px; text-align: center;} #pricePlan .planMenu ul { padding: 20px 0 40px; text-align: center; font-size: 0;} #pricePlan .planMenu ul li{ display: inline-block; width: 46%; margin: 0 10px; font-size: 15px; font-weight: 700;} #pricePlan .planMenu ul li span { display: block;} #pricePlan .planMenu ul li span.time{ font-size: 20px;} #pricePlan .planMenu ul li span.note{ font-size: 12px; font-weight: normal;} @media only screen and (max-width: 960px) { #pricePlan { background-size: auto 100%;} } @media only screen and (max-width: 1500px) { #pricePlan { background-size: 100% auto;} } @media only screen and (max-width: 1499px) { #pricePlan { background-size: auto 100%;} } @media only screen and (max-width: 769px) { #pricePlan { padding: 60px 0 50px;} #pricePlan .planMenu { background: url(/img/bg-plan-waku-sp.png) no-repeat 50% 50%; background-size: 100% 100%;} #pricePlan .planMenu ul { margin-bottom: 30px;} #pricePlan .planMenu ul li:first-child{ width: 40%; margin: 0;} #pricePlan .planMenu ul li:last-child { width: 58%; margin: 0;} #pricePlan .planMenu ul li span.time{ font-size: 24px;} } @media only screen and (max-width: 481px) { #pricePlan .note { width: 90%; margin: auto; font-size: 15px;} #pricePlan .planMenu ul li:first-child{ letter-spacing: -0.06rem;} #pricePlan .planMenu ul li span.time{ font-size: 13px;} #pricePlan .planMenu ul li span.note{ font-size: 10px;} } .plan ul { margin-bottom: 60px; font-size: 0; text-align: center;} .plan ul li { display: inline-block; width: 22%; max-width: 280px; margin: 0 5px; font-size: 18px;} .plan ul li dl { padding-bottom: 20px; background: #2b3340; color: #fff;} .plan ul li dl dt { position: relative; padding: 40px 0 35px; overflow: hidden;} .plan ul li dl dt span{ display: block; margin-bottom: 5px; font-size: 26px;} .plan ul li dl dd.txt { position: relative; padding: 50px 0 30px; font-size: 18px;} .plan ul li dl dd.txt:before{ content: ''; width: 0; height: 0; position: absolute; top: 0; left: 50%; margin-left: -10px; border: 10px solid transparent; } .plan ul li dl dd.price{ margin-bottom: 10px; font-size: 15px;} .plan ul li dl dd.price span{ font-size: 22px;} .plan ul li dl dd.price em { font-size: 18px;} .plan ul li dl dd.entry { font-size: 16px;} .plan ul li dl dd.entry a{ position: relative; display: block; width: 90%; height: 60px; margin: auto; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; color: #fff; line-height: 60px; transition: 0.6s linear; } .plan ul li dl dd.entry a:after{ content: ''; width: 10px; height: 10px; position: absolute; top: 40%; right: 15%; border-top: solid 1px #fff; border-right: solid 1px #fff; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .plan ul li dl dd.entry a:hover{ opacity: 0.6;} .plan ul li.basicPlan { width: 24%; max-width: 290px;} .plan ul li.lightPlan dl dt { background: #b79d57;} .plan ul li.basicPlan dl dt { padding: 60px 0 50px; background: #57b174;} .plan ul li.basicPlan dl dt:before{ content: '人気プラン'; display: block; width: 120px; height: 20px; line-height: 20px; position: absolute; top: 12px; left: -38px; background: #ff1515; -moz-transform: rotate(-40deg); -webkit-transform: rotate(-40deg); transform: rotate(-40deg); color: #fff; font-size: 10px; } .plan ul li.premiumPlan dl dt{ background: #2a6bc6;} .plan ul li.customPlan dl dt { background: #b55ab1; line-height: 1.3;} .plan ul li dl dt span{ display: block; margin-bottom: 5px; font-size: 26px;} .plan ul li.lightPlan dl dd.txt:before { border-top: 10px solid #b79d57;} .plan ul li.basicPlan dl dd.txt:before { border-top: 10px solid #57b174;} .plan ul li.premiumPlan dl dd.txt:before{ border-top: 10px solid #2a6bc6;} .plan ul li.customPlan dl dd.txt { padding: 31px 0 20px; font-size: 14px;} .plan ul li.customPlan dl dd.txt:before { border-top: 10px solid #b55ab1;} .plan ul li.lightPlan dl dd.price { color: #f3e7c6;} .plan ul li.basicPlan dl dd.price { color: #c6eed3;} .plan ul li.premiumPlan dl dd.price{ color: #c3dcfe;} .plan ul li.customPlan dl dd.price{ color: #fad0f8;} .plan ul li.lightPlan dl dd.entry a { background: #b79d57;} .plan ul li.basicPlan dl dd.entry a { background: #57b174;} .plan ul li.premiumPlan dl dd.entry a{ background: #2a6bc6;} .plan ul li.customPlan dl dd.entry a { background: #b55ab1;} @media only screen and (max-width: 960px) { .plan ul li dl dt { padding: 30px 0; font-size: 16px;} .plan ul li dl dt span{ font-size: 22px;} .plan ul li dl dd.txt{ font-size: 14px;} .plan ul li.basicPlan dl dt { padding: 50px 0 40px;} .plan ul li.customPlan dl dd.txt{ padding: 33px 0 22px; font-size: 11px;} .plan ul li dl dd.entry a{ width: 80%; height: 40px; line-height: 40px;} } @media only screen and (max-width: 769px) { .plan ul { width: 90%; margin: auto;} .plan ul li, .plan ul li.basicPlan { display: block; width: 100%; max-width: 100%; margin: 0 auto 20px;} .plan ul li dl { padding-bottom: 30px;} .plan ul li dl dt { padding: 30px 0; font-size: 26px;} .plan ul li dl dt span{ font-size: 36px;} .plan ul li dl dd.txt { padding: 50px 0 20px; font-size: 22px;} .plan ul li dl dd.txt br{ display: none;} .plan ul li dl dd.price{ margin-bottom: 10px; font-size: 20px;} .plan ul li dl dd.price span{ font-size: 30px;} .plan ul li.customPlan dl dd.txt { width: 90%; margin: auto; padding: 30px 0 20px; font-size: 22px;} .plan ul li dl dd.entry { font-size: 26px;} .plan ul li dl dd.entry a{ height: 100px; line-height: 100px;} } @media only screen and (max-width: 641px) { .plan ul li dl dd.entry a{ height: 80px; line-height: 80px;} } @media only screen and (max-width: 481px) { .plan ul li dl dt { font-size: 20px;} .plan ul li dl dt span{ font-size: 30px;} .plan ul li dl dd.txt { font-size: 15px;} .plan ul li.customPlan dl dd.txt { font-size: 15px;} .plan ul li dl dd.price{ font-size: 13px;} .plan ul li dl dd.price em { font-size: 16px;} .plan ul li dl dd.entry { font-size: 20px;} .plan ul li dl dd.entry a{ height: 60px; line-height: 60px;} } #voice{ padding: 60px 0 80px; background: #eff3f8;} #voice .ttl { margin-bottom: 10px;} #voice .read{ margin-bottom: 60px;} #voice ul { text-align: center; font-size: 0;} #voice ul li { display: inline-block; box-sizing: border-box; width: 50%; max-width: 680px; height: 800px; padding: 55px; background: #fff; vertical-align: top; font-size: 15px; } #voice ul li.premium{ background: #2a5294; color: #fff;} #voice ul li.custom { background: #7f497d; color: #fff;} #voice ul li dl { width: 200px; padding-bottom: 20px; float: left; margin-top: -55px; margin-left: -55px; margin-right: 45px; margin-bottom: 15px; color: #fff; text-align: center; } #voice ul li dl dt img { width: 100%;} #voice ul li dl dd.plan{ font-size: 18px; font-weight: 700; padding: 20px 0 10px;} #voice ul li dl dd.name{ font-size: 11px;} #voice ul li dl dd.name span, #voice ul li dl dd.name em { font-size: 13px;} #voice ul li dl dd.name span{ display: block;} #voice ul li.basic dl { background: #57b174;} #voice ul li.premium dl{ background: #2a6bc6;} #voice ul li.custom dl { background: #b55ab1;} #voice ul li.light dl { background: #b79d57;} #voice ul li p{ text-align: left;} #voice ul li p.topic{ margin-bottom: 25px; font-size: 26px; text-decoration: underline;} #voice ul li p.comment{ font-size: 18px; font-weight: 700; margin-bottom: 10px;} #voice ul li p.txt { line-height: 1.8; margin-bottom: 10px;} #voice ul li p.txt em{ font-weight: 700;} #voice ul li p.line { position: relative; text-indent: 100px;} #voice ul li p.line:before{ content: ''; width: 85px; height: 1px; background: rgba(0,0,0,0.18); position: absolute; top: 12px; left: 0;} #voice ul li span.tag { position: relative; display: block; width: 200px; height: 38px; line-height: 38px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; color: #fff; } #voice ul li span.tag:after{ content: ''; width: 0; height: 0; position: absolute; bottom: -8px; left: 20%; border: 10px solid transparent;} #voice ul li span.intro{ margin: 0 0 20px 180px;} #voice ul li span.reco { margin: 0 0 20px;} #voice ul li.basic span.tag { background: #57b174;} #voice ul li.basic span.tag:after { border-right: solid 10px #57b174;} #voice ul li.premium span.tag{ background: #2a6bc6;} #voice ul li.premium span.tag:after{ border-right: solid 10px #2a6bc6;} #voice ul li.custom span.tag { background: #b55ab1;} #voice ul li.custom span.tag:after{ border-right: solid 10px #b55ab1;} #voice ul li.light span.tag { background: #b79d57;} #voice ul li.light span.tag:after { border-right: solid 10px #b79d57;} @media only screen and (max-width: 960px) { #voice ul li { height: 800px; padding: 35px;} #voice ul li span.tag { width: 180px;} #voice ul li dl { margin-top: -35px; margin-left: -35px; margin-right: 35px;} #voice ul li p.topic{ margin-bottom: 20px; font-size: 18px;} #voice ul li p.comment{ font-size: 18px; font-weight: 700; margin-bottom: 10px;} #voice ul li p.txt { line-height: 1.6;} #voice ul li p.line { text-indent: 80px;} #voice ul li p.line:before{ width: 60px;} } @media only screen and (max-width: 769px) { #voice{ padding: 60px 0 50px;} #voice ul { width: 90%; margin: auto;} #voice ul li { display: block; width: 100%; max-width: 100%; height: auto; padding: 50px 30px;} #voice ul li dl { width: 260px; margin-top: -50px; margin-left: -30px; margin-right: 30px; margin-bottom: 15px;} #voice ul li span.intro{ display: inline-block; margin: 0 0 20px; margin-left: -200px;} #voice ul li p.topic{ margin-bottom: 20px; font-size: 36px;} #voice ul li p.comment{ font-size: 26px;} #voice ul li p.txt { font-size: 26px; line-height: 1.6;} #voice ul li p.line { text-indent: 80px;} #voice ul li p.line:before{ width: 60px;} } @media only screen and (max-width: 641px) { #voice ul li { display: block; width: 100%; max-width: 100%; height: auto; padding: 30px 20px;} #voice ul li dl { width: 260px; margin-top: -30px; margin-left: -20px; margin-right: 30px; margin-bottom: 15px;} #voice ul li span.intro{ display: inline-block; margin: 0 0 20px; margin-left: -100px;} #voice ul li p.topic{ margin-bottom: 20px; font-size: 26px;} #voice ul li p.comment{ font-size: 22px;} #voice ul li p.txt { font-size: 18px;} #voice ul li p.line { text-indent: 80px;} #voice ul li p.line:before{ width: 60px;} } @media only screen and (max-width: 481px) { #voice ul { width: 95%;} #voice ul li { display: block; width: 100%; max-width: 100%; height: auto; padding: 15px;} #voice ul li dl { width: 140px; margin-top: -14px; margin-left: -15px; margin-right: 20px; margin-bottom: 15px;} #voice ul li dl dd.plan{ font-size: 15px; padding: 10px 0;} #voice ul li dl dd.name{ font-size: 10px;} #voice ul li dl dd.name span, #voice ul li dl dd.name em { font-size: 12px;} #voice ul li span.tag { width: 140px; height: 30px; line-height: 30px; font-size: 14px;} #voice ul li span.intro{ display: inline-block; margin: 0 0 20px; margin-left: -50px;} #voice ul li p.topic{ margin-bottom: 15px; font-size: 20px;} #voice ul li p.comment{ font-size: 16px;} #voice ul li p.txt { font-size: 14px;} #voice ul li p.line { text-indent: 50px;} #voice ul li p.line:before{ width: 40px;} } #step{ padding: 60px 0 80px; background: #2a6bc6; color: #fff;} #step ul { padding-top: 60px; text-align: center;} #step ul li { display: inline-block; width: 200px; padding-right: 40px; background: url(/img/arw.png) no-repeat 95% 60px; vertical-align: top;} #step ul li:last-child{ padding-right: 0; background: none;} #step ul li dl dt{ padding: 30px 0; font-size: 18px;} @media only screen and (max-width: 960px) { #step ul { padding-top: 40px;} #step ul li { width: 14%; padding-right: 40px; background: url(/img/arw.png) no-repeat 95% 60px;} #step ul li img{ width: 100%;} #step ul li dl dt{ padding: 20px 0; font-size: 13px;} #step ul li dl dd{ font-size: 12px;} } @media only screen and (max-width: 769px) { #step{ padding: 60px 0 50px;} #step ul { padding-top: 60px; text-align: center;} #step ul li { display: block; width: 100%; padding-right: 0px; background: none; margin-bottom: 30px;} #step ul li img { width: 200px;} #step ul li dl dt{ padding: 30px 0 10px; font-size: 32px;} #step ul li dl dd{ width: 80%; margin: auto; font-size: 26px;} } @media only screen and (max-width: 641px) { #step ul li dl dt{ font-size: 32px;} #step ul li dl dd{ font-size: 22px;} } @media only screen and (max-width: 641px) { #step ul li dl dt{ font-size: 21px;} #step ul li dl dd{ font-size: 14px;} } #faq { padding: 60px 0 80px; background: #eff3f8;} #faq .inner{ width: 95%; max-width: 1160px; margin: auto; padding-top: 50px;} #faq ul { width: 48%; text-align: center; font-size: 0;} #faq ul li{ width: 100%; max-width: 560px; margin: 0 0 40px; font-size: 15px;} #faq ul li dl { text-align: left;} #faq ul li dl dt { position: relative; margin-bottom: 25px; padding-left: 60px; background: url(/img/icn-q.png) no-repeat 20px 2px; font-size: 18px; font-weight: 700; } #faq ul li dl dd { position: relative; width: 100%; background: #fff;} #faq ul li dl dd:before { content: ''; width: 0; height: 0; position: absolute; top: -20px; left: 0; border: 20px solid transparent; border-left: solid 20px #fff; } #faq ul li dl dd span{ display: block; box-sizing: border-box; width: 100%; padding: 20px 30px;} @media only screen and (max-width: 769px) { #faq { padding: 50px 0;} #faq .ttl{ margin-bottom: 20px;} #faq .inner{ width: 100%; max-width: 100%; padding-top: 30px; border-top: solid 1px #ccc;} #faq ul { float: none; width: 90%; max-width: 90%; margin: auto;} #faq ul li{ width: 100%; max-width: 100%;} #faq ul li dl dt span{ display: block; width: 25px; height: 25px; position: absolute; right: 3%; top: 0; background: #2a6bc6; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #faq ul li dl dt span:before, #faq ul li dl dt span:after{ content: ''; display: block; width: 16px; height: 4px; background: #fff; position: absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -2px; } #faq ul li dl dt span:after{ transition: .8s ease-in-out; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } #faq ul li dl dt.open span:after{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } #faq ul li dl dd{ height: auto;} } @media only screen and (max-width: 481px) { #faq ul li{ margin: 0 0 20px;} #faq ul li dl dt { margin-bottom: 10px; padding-left: 30px; padding-right: 50px; background-position: 0 2px; font-size: 16px;} #faq ul li dl dd { font-size: 14px;} } #contact{ padding: 60px 0 80px; background: #2b3340;} #contact .ttl { margin-bottom: 50px; color: #fff;} #contact p.txt { margin-bottom: 50px; color: #fff; line-height: 2; text-align: center;} #contact .inner{ width: 90%; max-width: 920px; box-sizing: border-box; margin: auto; padding: 65px 80px 70px; background: #363d4a;} #contact .inner ul li{ margin-bottom: 18px;} #contact .inner ul li:last-child{ margin-bottom: 30px;} #contact .inner dl{ position: relative; padding-left: 270px;} #contact .inner dl dt{ position: absolute; left: 0; top: 10px; color: #fff;} #contact .inner dl dt span{ color: #fe4343;} #contact .inner input[type="text"], #contact .inner input[type="email"], #contact .inner input[type="tel"]{ box-sizing: border-box; width: 100%; padding: 10px 20px;} #contact .inner input.short{ width: 60%;} #contact .inner select{ width: 60%; height:45px; line-height: 45px; text-indent:20px;} #contact .inner textarea{ box-sizing: border-box; width: 100%; height: 190px; padding: 10px 20px;} #contact .inner input[type="submit"]{ width: 220px; height: 48px; line-height: 48px; margin-left: 280px; border: solid 1px #fff; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; color: #fff; background: #323845; transition: 0.6s linear; } #contact .inner input[type="submit"]:hover{ background: #fff; color: #323845;} @media only screen and (max-width: 769px) { #contact{ padding: 60px 0;} #contact .ttl { margin-bottom: 30px;} #contact p.txt { width: 90%; margin: 0 auto 30px; font-size: 24px; line-height: 1.6; text-align: left;} #contact .inner{ padding: 50px 30px;} #contact .inner dl{ padding-left: 0px;} #contact .inner dl dt{ position: relative; left: 0; top: 0; font-size: 24px;} #contact .inner input[type="submit"]{ width: 100%; height: 100px; line-height: 100px; margin: 0 auto; font-size: 26px;} } @media only screen and (max-width: 641px) { #contact p.txt { font-size: 18px;} #contact .inner input[type="submit"]{ height: 80px; line-height: 80px; font-size: 20px;} } @media only screen and (max-width: 481px) { #contact p.txt { font-size: 14px;} #contact .inner{ padding: 30px 20px;} #contact .inner dl dt{ font-size: 18px;} #contact .inner input[type="text"], #contact .inner input[type="email"], #contact .inner input[type="tel"]{ width: 100%; padding: 5px 10px;} #contact .inner select{ height:35px; line-height: 35px; text-indent:10px;} #contact .inner textarea{ padding: 5px 10px;} #contact .inner input[type="submit"]{ height: 60px; line-height: 60px;} } .ctn{ padding: 200px 0;} .ctn .inner { width: 90%; max-width: 920px; margin: auto;} .ctn .ttl { margin: 0 auto 50px;} .ctn p.note{ text-align: center;} @media only screen and (max-width: 481px) { .ctn{ padding: 120px 0;} } #legal ul{ width: 100%; margin:0 auto 50px; border:solid 1px #ccc;} #legal ul li { border-bottom:solid 1px #ccc;} #legal ul li:last-child{ border-bottom: none;} #legal ul li dl{ position:relative; padding: 10px 10px 10px 200px;} #legal ul li dt{ box-sizing: border-box; position:absolute; left: 0px; top: 0; padding: 10px; width: 180px; background: #efefef;} #legal ul li dd{ padding-left: 20px; background: #fff;} @media only screen and (max-width: 481px) { #legal ul li dl{ padding: 0;} #legal ul li dt{ position:relative; width: 100%;} #legal ul li dd{ padding: 10px;} } #policy p { margin-bottom: 20px;} #policy ul{ margin-bottom: 20px;} #policy ol li{ list-style-type: none;} #terms p.txt{ margin-bottom: 30px;} #terms ul { margin-bottom: 30px;} #terms ul li{ margin-bottom: 20px;} #terms ul li span{ display: block; margin-bottom: 5px; font-weight: 700;} #terms ul li ul { width: 90%; margin: auto; padding: 20px 0;} #terms ul li ul li { margin-bottom: 5px; list-style-type: disc;} #terms ul li ol{ width: 95%; margin: auto;} #terms ul li ol > li { margin-bottom: 5px; list-style-type: decimal;} #terms p.write { margin-bottom: 50px; text-align: right;} .page .entry-header{ display: none !important;} .error-404{ text-align:center;} .error-404 p{ margin-bottom: 40px;} .search-form{} .search-field{ height: 45px; line-height: 45px; vertical-align:middle;} .search-submit{ width: 100px; height: 45px; line-height: 45px; vertical-align:middle;} .search-submit .icon-search{ width:30px; height: 40px; vertical-align:middle;} .entry-meta { display: none; } .arrow1{ width: 30px; height: 30px; border: 5px solid; border-color: transparent transparent #565656 #565656; transform: rotate(-45deg); } /* フィールド非表示 */ #contact_type { display: none; } /* 追加CSS（ヘッダー） */ #gNav ul li a:hover { font-weight: 700; } /* トップページのみ追加 */ .home .sNav li.tel .telno a { display: inline; } @media only screen and (max-width: 1160px){ .home .sNav li.tel .telno a { font-size: 17px; font-weight: bold; } } .home #gNav ul li.menuTel span.tel .num a { display: inline-block; font-weight: bold; } .home #gNav ul li.menuTel span.tel .num a:hover { font-weight: 400; color: #fff; } .home .btn a { transition: 0.2s linear !important; } .home .btn a:hover { opacity: 1; transform: translateY(3px); } .home .btn-download { padding-top: 20px; } .home .btn.btn-download a { box-sizing: border-box; background: #fff; border: 3px solid #fe4343; color: #fe4343; line-height: 74px; } .home .btn.btn-download a:after { border-top: solid 1px #fe4343; border-right: solid 1px #fe4343; } @media only screen and (max-width: 481px){ .home .kv .inner .btn a{ font-size: 17px; } } /* 資料ダウンロード */ .sp_only { display: none; } .download { padding: 200px 0; } .download .inner { width: 90%; max-width: 1000px; margin: auto; } .download .page_top { text-align: center; } .download .page_top h2{ font-size: 40px; letter-spacing: 0.05em; } .download .page_top h3{ margin-bottom: 50px; font-size: 18px; } .download .page_top h4{ margin-bottom: 10px; font-size: 35px; } .download .page_top h4 img{ width: auto; height: 36px; margin: 0 5px; vertical-align: text-bottom; } .download .page_top p{ margin-bottom: 80px; font-size: 18px; } .download .main { display: flex; align-items: flex-start; } .download .content_left { width: 45%; } .download .thumbnail { max-width: 490px; } .download .thumbnail img { width: 100%; height: auto; } .download .summary h4 { margin: 60px 0 20px; font-size: 19px; text-indent: -1.3em; padding-left: 1.3em; } .download .list_box { padding: 25px 20px; background: #F5F5F5; } .download .list_box p { margin-bottom: 10px; font-weight: bold; } .download .list_box ul { font-size: 16px; } .download .list_box ul li{ text-indent :-1em; padding-left: 1em; } .download .content_right { width: 55%; margin-left: 40px; } .download form ul { padding: 50px 40px 0; background: #F5F5F5; } .download .content_right input { width: 100%; margin-bottom: 8px; border: none; padding: 10px 15px; box-sizing: border-box; } .download .submit_btn input{ transition: 0.6s linear; } .download .submit_btn { display: inline-block; } .download .submit_btn input:hover { opacity: 0.5; } .download .content_right input.wpcf7-submit { width: 220px; height: 48px; margin: 30px auto; display: block; background-color: #FE4343; color: #fff; } .download .content_right ul li:not(:first-child) { margin-top: 25px; } .download dl dt { margin-bottom: 5px; } .download dl dt span { color: #FE4343; } .download textarea { width: 100%; height: 170px; border: none; box-sizing: border-box; padding: 5px 10px; } .download .message { line-height: 13px; color: #FE4343; font-size: 13px; } .download .inv-recaptcha-holder { position: relative; bottom: 205px; left: 40px; } .download .submit_btn { width: 100%; } .download .wpcf7 form .wpcf7-response-output { color: unset; } @media (max-width: 768px) { .sp_only { display: block; } .download { padding: 120px 0; } .download .main { display: block; } .download .page_top h2{ font-size: 35px; } .download .page_top h3{ margin-bottom: 40px; } .download .page_top h4{ margin-bottom: 0; font-size: 23px; } .download .page_top h4 img{ height: 24px; } .download .page_top p{ margin-bottom: 50px; font-size: 12px; } .download .summary h4 { margin: 50px 0 10px; font-size: 18px; } .download .content_left { width: 100%; max-width: 490px; margin: 0 auto; margin-bottom: 50px; } .download .thumbnail img { width: 100%; } .download .content_right { width: 100%; max-width: 490px; margin: 0 auto; box-sizing: border-box; } .download .list_box p { font-size: 13px; } .download .list_box ul { font-size: 14px; } .download .content_right ul { padding: 40px 20px 0; } .download .content_right ul li:not(:first-child) { margin-top: 20px; } .download .inv-recaptcha-holder { width: 220px; } .download .content_right input.wpcf7-submit { width: 100%; } .download .inv-recaptcha-holder { left: 20px; bottom: 200px; } .download .message { font-size: 11px; } } /* 20220126 ファーストビュー改修 */ /* .tel-sp { display: none; } */ .tel-pc { display: none; } .hd-sp-new .sNav { top: 10px; right: 0; display: flex; } .hd-sp-new .sNav li.tel-sp { position: relative; top: 0; right: 0; padding: 0; width: auto; } #hd.fix.hd-sp-new .sNav li.tel-sp { padding: 0; } #hd.fix.hd-sp-new .sNav li.tel-sp a { color: #fff; } .hd-sp-new li.tel-sp .tel-btn a { display: inline-block; box-sizing: border-box; width: 240px; height: 50px; padding: 6px 10px 5px; padding-left: 50px; border-radius: 5px; box-shadow: 0px 2px 12px -5px rgb(0 0 0 / 30%); background: #2a6bc6 url(/img/icn-tel02-wh.png) no-repeat top 11px left 14px / 32px auto; font-size: 18px; color: #fff; text-align: right; line-height: 1.4; } .hd-sp-new li.tel-sp .tel-btn a { display: flex; flex-direction: column; justify-content: space-between; transition: 0.6s linear; } .hd-sp-new li.tel-sp .tel-btn a:hover { opacity: .6; } .hd-sp-new li.tel-sp .tel-btn a span { display: inline-block; text-align: center; color: #fff !important; line-height: 1; letter-spacing: 0.05em; } .hd-sp-new li.tel-sp .tel-btn .time { font-size: 14px; font-weight: normal; } .hd-sp-new li.entry { position: relative; width: auto; height: auto; margin-left: 10px; } .hd-sp-new li.entry a { width: 240px; height: 50px; box-sizing: border-box; padding: 11px 24px 10px 18px; border-radius: 5px; box-shadow: 0px 2px 12px -5px rgb(0 0 0 / 30%); font-size: 18px; font-weight: bold; } #hd.fix.hd-sp-new .sNav li.entry a { position: relative; height: 50px; padding: 11px 24px 10px 18px; } .hd-sp-new .sNav li.entry a:after { content: ''; width: 12px; height: 12px; position: absolute; top: 18px; right: 12px; border-top: solid 2px #fff; border-right: solid 2px #fff; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hd-sp-new #gNav { position: absolute; right: 0; bottom: 10px; padding: 0; text-align: right; } .hd-sp-new #gNav li { margin-right: 0; } .hd-sp-new #gNav li + li { margin-left: 38px; } .hd-sp-new #gNav.open li + li { margin-left: 0; } .hd-sp-new #gNav ul li.consul { margin: auto; } .hd-sp-new #gNav ul li a { color: #323232; font-size: 17px; font-weight: bold; transition: .25s color; } .hd-sp-new #gNav ul li a:hover { color: #2a6bc6; } .hd-sp-new #gNav.open ul li a { color: #fff; } .hd-sp-new .inner-hd, #hd.fix.hd-sp-new .inner-hd { padding: 15px 0; } body:not(.home) .hd-sp-new { background: rgba(255,255,255,0.95) !important; box-shadow: 0px 5px 10px -5px rgb(0 0 0 / 30%); } #hd.hd-sp-new.fix { box-shadow: 0px 5px 10px -5px rgb(0 0 0 / 30%); } .hd-sp-new .inner-hd .logo-hd { padding: 0; } .hd-sp-new .inner-hd .logo-hd span { position: relative; top: 0; color: #323232; font-size: 16px; } .hd-sp-new .inner-hd .logo-hd img { width: 220px; } .hd-sp-new .inner-hd .logo-hd a { padding-top: 12px; } .hd-sp-new .inner-hd .logo-hd .taiou-sp { display: none; } .kv.kv-new { display: block; padding: 0; background: unset; } .kv.kv-new .kv-upper { background: url(/img/img_kv-new_pc02.jpg) no-repeat center / cover; } .kv.kv-new .kv-inner { width: 90%; max-width: 1160px; margin: auto; } .kv.kv-new .kv-cont { width: 65%; margin: 0; margin-left: auto; max-width: unset; box-sizing: border-box; padding: 170px 0 80px; text-align: center; } .kv-new .kv-cont .kv-ttl { color: #1B2F50; font-size: 32px; font-weight: bold; text-align: center; text-shadow: 0 0 10px rgb(255 255 255 / 30%); } .kv-new .kv-cont .kv-ttl span:first-of-type { font-size: 32px; } .kv-new .kv-cont .kv-ttl span:last-of-type { display: block; padding-top: 10px; font-size: 48px; line-height: 1; } .kv-new .kv-cont .no1-pic { display: flex; justify-content: space-between; width: 100%; max-width: 580px; margin: 30px auto; } .kv-new .kv-cont .no1-pic li { width: calc((100% - 40px) / 3); } .kv-new .kv-cont .no1-pic li img { width: 100%; height: auto; } .kv-new .kv-cont .kv-catch { max-width: 580px; margin: 20px auto 40px; background: #2a6bc6; font-size: 28px; font-weight: bold; color: #fff; text-shadow: 0 0 10px rgb(0 0 0 / 30%); } .kv-new .btn-wrapper { display: flex; justify-content: space-between; } .kv-new .btn-wrapper .btn { width: calc(50% - 10px); padding: 0; } .kv-new .kv-cont .btn a { width: 100%; margin: 0 auto; box-shadow: 0px 5px 10px -5px rgb(0 0 0 / 30%); border-radius: 50px; font-size: 20px; font-weight: bold; } .kv-new .kv-cont .btn-download a { box-sizing: border-box; border: 4px solid #fe4343; background: #fff; color: #fe4343; line-height: 74px; } .kv-new .kv-cont .btn-download a::after { border-color: #fe4343; } /* キャンペーン表示 */ .caption.caption-new { max-width: 420px; top: unset; bottom: 0; left: 10px; display: inline-block; transition: 1s transform; } .caption.caption-new:hover { cursor: pointer; } .caption.caption-new.hide { transform: translateY(120px); } .caption-new .caption-body { width: 380px; float: unset; display: inline-block; border: 4px solid #2a6bc6; border-radius: 10px 10px 0 0; box-sizing: border-box; } .caption-new .caption-body-inner { padding: 0; } .caption-new .caption-btn { float: unset; display: inline-block; position: absolute; bottom: 0; background: rgba(255, 255, 255, 0.85); width: 25px; height: 90px; color: #296dc6; font-weight: bold; font-size: 14px; padding: 9px 2px 7px 10px; } .caption-new .limited { border: 2px solid #2a6cc6; border-radius: 2px; position: absolute; top: -25px; left: 10px; width: 180px; padding: 5px 0; background: #fff; line-height: 1; color: #2a6cc6; font-weight: bold; z-index: 1; } .caption-new .limited::before { content: "今だけ限定!!" } .caption-new.hide .limited::before { content: "こちらをクリック!!" } .caption-new .limited::after { position: absolute; left: 50%; bottom: -12px; content: ""; display: block; width: 0; height: 0; border: 6px solid transparent; border-top: 8px solid #fff; transform: translateX(-50%); z-index: 2; } .caption-new .caption-ttl { background: #2a6cc6; color: #fff; font-size: 20px; line-height: 1.4; padding: 8px 0; margin-bottom: 10px; } .caption-new .cp-cv-btn a { position: relative; background: #84C13A; padding: 8px 20px; border-radius: 30px; margin: 8px auto 12px; color: #fff; font-weight: bold; width: calc(100% - 30px); display: block; line-height: 1; box-sizing: border-box; letter-spacing: 0.05em; transition: .25s opacity; } .caption-new .cp-cv-btn a::after { content: ""; display: inline-block; border-right: 2px solid #fff; border-bottom: 2px solid #fff; width: 7px; height: 7px; transform: rotate(45deg); position: absolute; right: 15px; top: 10px; } .caption-new .caption-txt { font-size: 18px; line-height: 1.4; color: #333; } .txt-blue { color: #296dc6; font-weight: bold; } .txt-red { color: #fe4343; font-weight: bold; } @media only screen and (max-width: 1160px) { .hd-sp-new .menu { top: 10px; right: 10px; width: 42px; padding: 5px; border: 1px solid #222; border-radius: 5px; box-sizing: border-box; box-shadow: 0px 2px 12px -5px rgb(0 0 0 / 30%); } .hd-sp-new .menu.active { border-color: #fff; } .hd-sp-new .menu span { width: 60%; left: 50%; background: #222; transform: translateX(-50%); } .hd-sp-new .menu.active span { background: #fff; } .hd-sp-new .menu:after { left: 50%; bottom: 3px; display: block; width: auto; color: #222; line-height: 1; transform: translateX(-50%); } .hd-sp-new .menu.active:after { color: #fff; } .hd-sp-new .menu span:nth-of-type(1) { top: 5px; } .hd-sp-new .menu span:nth-of-type(2) { top: 12px; } .hd-sp-new .menu span:nth-of-type(3) { top: 19px; } .hd-sp-new .menu.active span:nth-of-type(1) { -webkit-transform: translateY(7px) rotate(-315deg); transform: translate(-50%, 7px) rotate(-315deg); } .hd-sp-new .menu.active span:nth-of-type(3) { -webkit-transform: translateY(-7px) rotate(315deg); transform: translate(-50%, -7px) rotate(315deg); } .hd-sp-new .inner-hd .logo-hd { width: auto; } .hd-sp-new .inner-hd .logo-hd a { padding-top: 7px; } .hd-sp-new .inner-hd .logo-hd img { width: 160px; height: auto; } .hd-sp-new .inner-hd .logo-hd span { width: 300px; font-size: 15px; } .hd-sp-new .sNav li.tel-sp { right: 60px; } .hd-sp-new .menu { top: 15px; } .hd-sp-new .inner-hd, #hd.fix.hd-sp-new .inner-hd { padding: 10px 0; } } @media only screen and (max-width: 768px) { /* ヘッダー */ .tel-pc { display: none; } .hd-sp-new .inner-hd .logo-hd .taiou-sp { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: unset; left: 115px; bottom: -1px; width: 34px; height: auto; margin: 0; padding: 2px 0 1px; border: solid 1px #222; font-size: 10px; color: #222; text-align: center; line-height: 1.2; } .hd-sp-new { height: 60px; background: #fff; color: #222; } .hd-sp-new .inner-hd { padding: 8px 10px; box-sizing: border-box; width: 100%; height: 100%; } #hd.fix.hd-sp-new .inner-hd { padding: 8px 10px; } .hd-sp-new .inner-hd .logo-hd { width: auto; } .hd-sp-new .inner-hd .logo-hd a { padding-top: 9px; } .hd-sp-new .inner-hd .logo-hd img { width: 110px; height: auto; } .hd-sp-new .inner-hd .logo-hd span { width: 200px; font-size: 10px; } .hd-sp-new .sNav { right: 10px; } .hd-sp-new .sNav li.tel-sp { right: 48px; } .hd-sp-new li.tel-sp .tel-btn .telno { display: none; } .hd-sp-new li.tel-sp .tel-btn a { width: auto; height: 40px; padding: 5px 10px 4px; padding-left: 45px; background: #2a6bc6 url(/img/icn-tel02-wh.png) no-repeat top 7px left 8px / 30px auto; font-size: 11px; text-align: right; line-height: 1.4; } .hd-sp-new .menu { top: 10px; } .hd-sp-new #gNav ul { padding-top: 10px; } .kv.kv-new { padding-top: 60px; } .kv.kv-new .kv-upper { background: url(/img/img_kv-new_sp03.jpg) no-repeat left top 20px / cover; } .kv.kv-new .kv-inner { width: 100%; } .kv.kv-new .kv-cont { display: flex; flex-direction: column; width: 100%; padding: 5px 0 30px; } .kv-new .kv-cont .kv-ttl span:first-of-type { font-size: 20px; } .kv-new .kv-cont .kv-ttl span:first-of-type::before, .kv-new .kv-cont .kv-ttl span:first-of-type::after { content: ""; width: 26px; height: 25px; display: inline-block; background: url(/img/icn-crown.png) no-repeat center / contain; vertical-align: text-bottom; } .kv-new .kv-cont .kv-ttl span:first-of-type::before { margin-right: 5px; } .kv-new .kv-cont .kv-ttl span:first-of-type::after { margin-left: 5px; } .kv-new .kv-cont .kv-ttl span:last-of-type { padding-top: 0; font-size: 36px; line-height: 1.2; } .kv-new .kv-cont .no1-pic { box-sizing: border-box; padding-right: 5%; margin: 15px auto 30px; flex-direction: column; align-items: flex-end; } .kv-new .kv-cont .no1-pic li { width: 25%; margin-bottom: 10px; } .kv-new .kv-cont .kv-catch { width: 100%; max-width: unset; font-size: 22px; line-height: 2; margin: 10px 0 0; order: 1; } .kv-new .kv-cont .btn-wrapper { flex-direction: column; padding: 0 5%; } .kv-new .kv-cont .btn-wrapper .btn { width: 100%; margin-bottom: 10px; } .kv-new .kv-cont .btn a { font-size: 20px; line-height: 65px; height: 65px; } .kv-new .kv-cont .btn-download a { line-height: 56px; } .caption.caption-new { display: none; } .caption-sp.caption-new .caption-body { width: calc(100% - 30px); display: block; margin-top: 40px; border-radius: 10px; } .caption-sp.caption-new .limited { font-size: 20px; } .caption-sp.caption-new .caption-body-inner { position: relative; } .caption-sp.caption-new .caption-ttl { padding: 18px 0 12px; margin-bottom: 15px; font-size: 22px; } .caption-sp.caption-new .caption-txt { font-size: 20px; } .caption-sp.caption-new .cp-cv-btn a { font-size: 20px; width: calc(100% - 20px); margin: 12px auto 18px; } .caption-sp.caption-new .cp-cv-btn a::after { top: 12px; } } /* トップページレイアウト調整 */ .renewal { color: #333; } .renewal .ttl { font-size: 40px; } .renewal .kv .signboard { padding: 60px 0; } .renewal .min { font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight: bold; } .renewal .kv .signboard h2 { font-size: 40px; font-weight: bold; } .renewal .kv .signboard p { margin-bottom: 12px; font-size: 22px; } .renewal #merit h2 img { height: 44px; vertical-align: -8px; } .renewal #merit h3 { margin-bottom: 12px; } .renewal #merit h3 img { margin: 0 5px 0 12px; height: 25px; vertical-align: text-bottom; } .renewal #merit ul li dl dt { padding: 24px 0; font-size: 20px; font-weight: bold; } .renewal #merit ul li dl dt span { font-size: 12px; font-weight: bold; } .renewal #merit ul li dl dd.txt { height: 250px; padding: 30px 0; } .renewal #merit ul li dl dd.txt span.stl { margin-bottom: 20px; } .renewal #reason h2 span { font-size: 60px; margin: 0 3px; vertical-align: -2px; } .renewal #reason h2 img { height: 40px; } .renewal #reason .bloc .box h3 { font-weight: bold; letter-spacing: 0.05em; margin-bottom: 20px; } .renewal #reason .bloc .box .inner { padding: 0 30px; } .renewal #reason .bloc .box p { margin-bottom: 20px; } .renewal .security-content .ttl { margin-bottom: 10px; } .renewal .security-tle { display: inline-block; text-decoration: none; border-bottom: 2px solid; color: #296dc6; font-size: 22px; margin-bottom: 12px; } .renewal #pricePlan .ttl { margin-bottom: 30px; } .renewal .plan-spec ul li dl dt span { font-weight: bold; } .renewal .btn-new a { font-weight: bold; } .renewal .btn-new a:after { top: 45%; right: 4%; border-top: solid 2px #fff; border-right: solid 2px #fff; } .renewal #pricePlan .planMenu-spec h3 { width: 100%; max-width: 540px; font-size: 28px; } .renewal #pricePlan .planMenu-spec ul li { margin: 20px auto 50px; color: #2a6cc6; font-size: 24px; } .renewal #pricePlan .planMenu-spec ul li span.time { font-size: 30px; padding-left: 15px; } .renewal #pricePlan .planMenu-spec ul li span.note { color: #333; font-size: 20px; } .renewal #pricePlan .planMenu-spec ul li span.note2 { margin-top: 10px; font-size: 14px; } .renewal #pricePlan .planMenu h3 { border: solid 2px #296dc6; color: #296dc6; font-size: 20px; } .renewal #pricePlan .planMenu { margin: 0 auto; } .renewal #pricePlan .planMenu ul li { color: #296dc6; font-size: 18px; } .renewal #pricePlan .planMenu ul li span.time { color: #333; font-size: 24px; } .renewal #pricePlan .planMenu ul li span.note { color: #333; } .renewal #pricePlan .read { font-size: 20px; font-weight: bold; } .renewal .plan ul li dl dt span { font-weight: bold; line-height: 1.2; } .renewal .plan ul li dl dt span { margin-bottom: 10px; } .renewal .plan ul li.customPlan dl dt span { margin-bottom: 0; } .renewal .plan ul li.customPlan dl dt { padding: 40px 0; } .renewal .plan ul li.customPlan dl dd.txt { padding: 60px 0 110px !important; } .renewal .plan ul li dl dd.entry a { font-weight: bold; } .renewal .plan ul li dl { padding-bottom: 30px; } .renewal .plan ul li dl dd.pricelimit { margin-bottom: 15px; } .renewal .plan ul li dl dd.txt { padding: 35px 0 20px; } .renewal #pricePlan .note { font-size: 22px; } .renewal #contact .ttl { margin-bottom: 15px; } .renewal #voice ul li span.tag { font-weight: bold; } .renewal #voice ul li span.reco { margin: 60px 0 20px; } .renewal #step ul li dl dt { font-weight: bold; font-size: 20px; padding: 30px 0 10px; } .renewal .btn a { font-weight: bold; } .renewal .btn a:after, .renewal .btn.btn-download a:after { border-width: 2px; } .renewal #contact .inner dl dt { font-weight: bold; } .renewal #contact .inner input[type="submit"] { font-weight: bold; letter-spacing: 0.2em; border-width: 2px; line-height: 44px; } .renewal #voice ul li p.txt-intro { padding-left: 200px; } @media only screen and (max-width: 768px) { .pc_only { display: none; } .renewal .ttl { font-size: 28px; } .renewal .read { padding: 0 10px; } .renewal .kv .signboard p { font-size: 18px; } .renewal .kv .signboard h2 { font-size: 28px; } .renewal .kv .signboard { padding: 30px 0; } .renewal #merit { padding: 40px 0; } .renewal #merit h2 img { height: 40px; vertical-align: -4px; } .renewal #merit h3 { margin-bottom: 30px; font-size: 20px; line-height: 1.4; } .renewal #merit h3 img { height: 20px; margin-right: 2px; } .renewal #merit ul li dl dt span { font-size: 14px; margin-bottom: 0; } .renewal #merit ul li dl dd.txt { height: auto; } .renewal #merit ul li dl dt { font-size: 26px; } .renewal #reason h2 { line-height: 1.2; } .renewal #reason h2 img { height: 30px; vertical-align: -4px; } .renewal #reason h2 span { font-size: 48px; vertical-align: 0; } .renewal #reason .bloc .box .inner div > p:last-of-type { margin: 0; } .renewal #reason .bloc .box .inner { padding: 0 30px 35px; } .renewal .security-content { padding: 50px 0 60px; } .renewal .security-pic { display: block; text-align: center; } .renewal .security-pic .img-set1 { float: unset; } .renewal .security-tle { margin: 0 auto 10px; } .renewal .security-1 { display: flex; flex-direction: column; margin-bottom: 20px; } .renewal .plan-spec ul li.test-plan dl dt { padding: 25px 0; } .renewal .plan-spec ul li dl dt span { margin-bottom: 0; } .renewal .plan-spec ul li dl dd.txt { padding: 30px 0 15px; } .renewal #pricePlan .plan-content .note { padding: 0; } .renewal .btn-new { padding: 25px 0 0; } .renewal #reason .bloc .box h3 { margin: 35px 0 15px; font-size: 20px; } .renewal #pricePlan .planMenu-spec h3 { font-size: 22px; line-height: 1.2; } .renewal #pricePlan .planMenu-spec ul li span.note { font-size: 16px; font-weight: bold; padding: 0; } .renewal #pricePlan .planMenu-spec ul li span.time { font-size: 26px; line-height: 1; } .renewal #pricePlan .planMenu h3 { width: 240px; } .renewal #pricePlan .planMenu ul li span.time { margin: 5px 0 10px; font-size: 20px; line-height: 1.4; } .renewal #pricePlan .planMenu ul li { font-size: 16px; } .renewal #pricePlan .planMenu ul { padding-bottom: 25px; margin-bottom: 0; } .renewal #pricePlan .read { margin: 10px 0 30px; } .renewal #pricePlan .planMenu-spec { padding: 50px 15px 5px; margin-bottom: 15px; box-sizing: border-box; } .renewal #pricePlan .planMenu-spec ul li span.note2 { font-size: 12px; } .renewal #pricePlan .planMenu-spec ul li { margin: 20px 0 30px; width: 100%; } .renewal #pricePlan .planMenu { padding-top: 50px; } .renewal .plan ul li.customPlan dl dd.txt { padding: 30px 0 20px !important; } .renewal #pricePlan .note { font-size: 18px; padding: 0 10px; box-sizing: border-box; margin: 20px 0 0; } .renewal #contact .inner dl dt { font-size: 17px; margin-bottom: 5px; } .renewal #voice .read { margin-bottom: 30px; } .renewal #voice ul li span.reco { margin: 30px 0 15px; } .renewal #step ul { padding-top: 30px; } .renewal #step ul li img { width: 150px; } .renewal #step ul li dl dt { position: relative; font-size: 24px; padding: 15px 0 5px; margin-bottom: 20px; } .renewal #step ul li dl dt::before { content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: 100px; border-bottom: 2px solid #fff; transform: translateX(-50%); } .renewal #voice ul li p.txt-intro { padding-left: 270px; } } @media only screen and (max-width: 641px) { } @media only screen and (max-width: 481px) { .renewal #voice ul li p.txt-intro { padding-left: 150px; } } /* フッター修正 */ #ft.ft-new .inner { display: flex; justify-content: space-between; } #ft.ft-new .inner dt { top: 5px; } #ft.ft-new .ft-nav { display: flex; justify-content: flex-end; width: 480px; } #ft.ft-new .ft-nav-list { padding: 0; display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; } #ft.ft-new .ft-nav-list + .ft-nav-list { margin-left: 30px; } #ft.ft-new .ft-nav-list li { border: none; padding: 0; margin: 0; margin-bottom: 10px; } #ft.ft-new .ft_cont { display: flex; flex-direction: column; justify-content: space-between; } #ft.ft-new dl.ft_cont dd > span { display: inline-block; } #ft.ft-new dl.ft_cont dd > span.office { margin: 20px 0 2px; font-size: 16px; font-weight: bold; } #ft .ft-nav-list li a { padding: 5px 0; transition: .25s opacity; } #ft .ft-nav-list li a:hover { opacity: 0.7; } #ft.ft-new .inner.cf::after { content: none; } #ft.ft-new dl.ft_cont { /* width: 650px; */ flex: 1; padding-left: 210px; } @media only screen and (max-width: 1000px) and (min-width: 769px) { #ft.ft-new .ft-nav { flex-direction: column; } #ft.ft-new .ft-nav-list + .ft-nav-list { margin-left: 0; } #ft.ft-new .inner { align-items: flex-start; } } @media only screen and (max-width: 768px) { #ft.ft-new .ft-nav { width: 100%; } #ft.ft-new .ft-nav-list + .ft-nav-list { margin-left: 30px; } #ft.ft-new .ft_cont { padding: 0; padding-top: 50px; width: 90%; margin: 0 auto; } #ft.ft-new dl.ft_cont { width: 90%; padding-left: 0; } #ft.ft-new .ft_cont dt { top: 0; left: 2px; } #ft.ft-new .inner { flex-direction: column; } #ft.ft-new .ft-nav { flex-direction: column; margin-bottom: 30px; margin-top: -20px; padding-top: 10px; padding-left: 20px; border-left: 1px solid #fff; } #ft.ft-new .ft-nav-list + .ft-nav-list { margin: 0; } #ft.ft-new .ft-nav-list { margin: 0; } #ft.ft-new .inner dl dd { font-size: 14px; } } /* 20220609追加 */ .notice_privacy { color: #fff; text-align: center; margin-bottom: 20px; } .notice_privacy a { padding: 0 5px; color: #fe4343; transition: opacity .25s; } .notice_privacy a:hover { opacity: 0.7; } .wpcf7 form .wpcf7-response-output { color: #fff; } .download .notice_privacy { color: #333; } .download .notice_privacy a { color: #2a6bc6; } /* 20240425追加 */ /* ファーストビュー改修 */ .kv.kv-new .kv-inner { width: 95%; max-width: 1300px; margin: auto; } .kv.kv-new { /* padding-top: 50px; */ } .kv.kv-new .kv-upper { background: url(/img/kv-new_pc02_new.jpg) no-repeat center / cover; } .kv.kv-new .kv-cont { width: 64%; margin: 0; margin-right: auto; padding: 100px 0 150px; } .kv-new .kv-cont .no1-pic { width: 100%; max-width: 100%; margin: 0 auto; } .kv-ttl { font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif; margin-top: 20px; } .kv-new .kv-cont .kv-ttl span:first-of-type { font-size: 28px; text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); margin-top: 60px; } .kv-new .kv-cont .kv-ttl span:nth-of-type(2) { display: block; font-size: 56px; text-shadow: 0 0 5px rgba(179, 210, 255, 0.6); margin-top: 8px; } .kv-new .kv-cont .kv-ttl span:last-of-type { font-size: 56px; text-shadow: 0 0 5px rgba(179, 210, 255, 0.6); padding: 0; margin-top: 8px; } .kv-new .kv-cont .kv-catch { max-width: 100%; color: #3a6bc0; background: #ffffff; text-shadow: none; box-shadow: 0 0 8px rgba(32, 52, 96, .4); padding: 8px 0; margin: 30px 0; } .kv .signboard { background: rgba(35, 93, 174, 0); overflow: visible; position: relative; z-index: 0; } .kv .signboard::before { background: #466db1; content: ''; position: absolute; left: 0; top: -90px; clip-path: polygon(0 calc(0% + 4vw), 100% 0, 100% 100%, 0 100%); z-index: -1; width: 100%; height: 125%; } .kv .signboard-inner { margin: 0 auto; } .kv .signboard-inner ul li { text-align: left; } @media only screen and (max-width: 1160px) { .kv.kv-new .kv-upper { background: url(/img/kv-new_pc02_new.jpg) no-repeat 80% 5% / cover; } } @media only screen and (max-width: 768px) { .kv.kv-new .kv-upper { background: url(/img/kv-new_sp02_new.jpg) no-repeat center / cover; } .kv.kv-new { padding: 0; display: block; background: unset; } .kv.kv-new .kv-cont { display: flex; width: 100%; padding: 0; } .kv-new .kv-cont .kv-ttl { margin: 0; display: flex; flex-direction: column; } .kv-new .kv-cont .no1-pic { padding: 0 5%; margin: 20px auto; align-items: flex-start; order: 3; } .kv-new .kv-cont .no1-pic li { width: 40% !important; margin-bottom: 8px; } .kv-new .kv-cont .kv-ttl span:first-of-type::before, .kv-new .kv-cont .kv-ttl span:first-of-type::after { background: none; } .kv-new .kv-cont .kv-ttl span:first-of-type { display: inline-block; font-size: 14px; text-shadow: none; padding: 10px 15px; margin: 75px auto 0; background: #eef6ff; position: relative; box-sizing: border-box; } .kv-new .kv-cont .kv-ttl span:first-of-type::before { display: inline-block; position: absolute; top: -8px; left: 6px; content: "”"; font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif; color: #d1def2; font-size: 48px; line-height: 1; transform: rotate(180deg); } .kv-new .kv-cont .kv-ttl span:first-of-type::after { display: inline-block; position: absolute; bottom: -8px; right: 6px; content: "”"; font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif; color: #d1def2; font-size: 48px; line-height: 1; } .kv-new .kv-cont .kv-ttl span:nth-of-type(2) { display: block; font-size: 24px; text-shadow: none; margin-top: 24px; } .kv-new .kv-cont .kv-ttl span:last-of-type { font-size: 36px; text-shadow: 0 0 4px rgba(255, 255, 255, 0.8); padding: 0; margin-top: 8px; } .kv-new .kv-cont .kv-catch { font-size: 16px; } .kv .signboard { background: rgba(35, 93, 174, .9); color: #fff; } .kv .signboard::before { content: none; } .kv-new .kv-cont .kv-catch { padding: 8px 0; margin: 15px 0; } } @media only screen and (max-width: 481px) { .kv.kv-new .kv-upper { background: url(/img/kv-new_sp02_new.jpg) no-repeat center -40px / cover; } .kv-new .kv-cont .no1-pic li { width: 50% !important; margin-bottom: 8px; } } /* 加筆分 */ .kv.kv-new .kv-upper { padding-top: 50px; } .kv-new .kv-cont .kv-ttl span { text-shadow: 0 0 0.5em rgba(255, 255, 255, 1) !important; } .kv-new .kv-cont .kv-catch { background: rgb(255 255 255 / 95%); box-shadow: 0 0 0.25em rgba(32, 52, 96, 0.25); padding: 0.25em; margin: 1.5em 0; } .kv-new .kv-cont .kv-ttl span:first-of-type { font-size: min(2.3vw, 28px); margin-top: 2em; } .kv-new .kv-cont .kv-ttl span:nth-of-type(2), .kv-new .kv-cont .kv-ttl span:last-of-type { font-size: min(4.3vw,56px); } .kv-new .kv-cont .kv-catch { font-size: min(2.3vw, 28px); } .caption.caption-new { left: unset; right: 10px; } .caption-new .caption-body { border-color: #1ca8c3; } .caption-new .limited { color: #1ca8c3; border-color: #1ca8c3; } .caption-new .caption-ttl { background: #1ca8c3; } .caption-new .caption-btn { color: #1ca8c3; display: none; } .caption-new .caption-txt .txt-blue { color: #1ca8c3; } /* タブレット用調整 */ @media only screen and (max-width: 1000px){ .kv.kv-new .kv-upper { background: url(/img/kv-new_pc02_new.jpg) no-repeat right 35% bottom / cover; } .kv-new .btn-wrapper .btn { width: 100%; margin-bottom: 1rem; } .kv-new .btn-wrapper { flex-wrap: wrap; } } @media only screen and (max-width: 768px){ .kv.kv-new { overflow: hidden; } .kv.kv-new .kv-upper { background: url(/img/kv-new_sp02_new.jpg) no-repeat bottom right -1.5rem / 120vw auto; } .kv-new .kv-cont .kv-ttl { order: 1; } .kv-new .kv-cont .no1-pic { margin: 1.5rem auto .5rem; order: 2; } .kv-new .kv-cont .kv-catch { order: 3; } .kv-new .kv-cont .btn-wrapper { order: 4; } .kv-new .kv-cont .kv-catch { order: 5; } .kv.kv-new .kv-upper { padding-top: 70px; } .kv.kv-new .kv-inner { width: 100%; } .kv-new .kv-cont .kv-ttl span:first-of-type { width: 95%; margin-top: 0; padding: 0.75em 0.25em; font-size: 13px; } .kv-new .kv-cont .kv-ttl span:nth-of-type(2) { margin-top: 0.5em; } .kv-new .kv-cont .kv-ttl span:last-of-type { text-shadow: 0 0 0.5em rgba(255, 255, 255, 1); margin-top: 0.15em; } .kv-new .kv-cont .no1-pic li { margin-bottom: 1rem; } } @media only screen and (min-width: 480px) and (max-width: 768px) { .kv.kv-new .kv-upper { background: url(/img/kv-new_sp02_new.jpg) no-repeat bottom 20% right / cover; } .kv-new .kv-cont .kv-ttl span:last-of-type br { display: none; } .kv-new .kv-cont .kv-ttl span:nth-of-type(2), .kv-new .kv-cont .kv-ttl span:last-of-type { font-size: min(5.7vw, 56px); } .kv-new .kv-cont .kv-catch { font-size: min(3.4vw, 28px); } .kv-new .kv-cont .kv-ttl span:first-of-type { font-size: min(3.4vw, 28px); } } @media only screen and (max-width: 481px) { .kv.kv-new .kv-upper { /* background: url(/img/kv-new_sp02_new.jpg) no-repeat bottom -1rem right -1.5rem / 120vw auto; */ } .kv-new .kv-cont .kv-ttl span:nth-of-type(2), .kv-new .kv-cont .kv-ttl span:last-of-type { font-size: 26px; line-height: 1.25; } .kv-new .kv-cont .kv-ttl span:last-of-type { font-size: 36px; } .kv-new .kv-cont .kv-catch { font-size: 18px; margin: 0.5em 0 1.5em; } .kv-new .kv-cont .kv-ttl span:first-of-type { font-size: 14px; } } /* 20250717 サガテレビロゴ追加 */ .hd-sp-new .inner-hd .logo-hd-img { display: flex; align-items: flex-end; gap: 16px; } .hd-sp-new .inner-hd .logo-hd .logo-hd-img .hd-saga-logo { height: 45px; width: auto; } .hd-sp-new #gNav ul li a { color: #323232; font-size: 16px; font-weight: bold; transition: .25s color; } .hd-sp-new #gNav li+li { margin-left: 30px; } .hd-sp-new .inner-hd .logo-hd { width: auto; } #ft.ft-new .inner dt { display: flex; flex-direction: column; gap: 16px; } @media only screen and (max-width: 768px) { .hd-sp-new li.tel-sp .tel-btn .time { display: none; } .hd-sp-new .inner-hd .logo-hd-img { gap: 10px; padding-top: 6px; } .hd-sp-new .inner-hd .logo-hd a { padding-top: 0; } .hd-sp-new .inner-hd .logo-hd .logo-hd-img .hd-saga-logo { height: 26px; } .hd-sp-new .inner-hd .logo-hd span { font-size: 11px; } .hd-sp-new .inner-hd .logo-hd img { width: 120px; } /*全国対応可マーク*/ .hd-sp-new .inner-hd .logo-hd .taiou-sp { display: none; } /*電話ボタン*/ .hd-sp-new li.tel-sp .tel-btn a { width: 44px; height: 40px; padding: 0; background-position: center; } /*footer*/ #ft.ft-new .inner dt { position: relative; margin-bottom: 20px; flex-direction: row; } #ft.ft-new dl.ft_cont { padding-top: 0; } .ft_con .ft_cont_img { display: flex; flex-wrap: wrap; width: 60%; gap: 1em; } .ft_con .ft_cont_img .ft-logo-istaff{ width: 25%; } #ft .inner dl dt img { width: 100%; } #ft .inner dl dt img.ft-logo-saga-tv { height: 33px; } }