@charset "UTF-8"; /* Scss Document */ /* Scss Document */ /*----------------------------*/ /*-----------------*/ /* --------------------------------------------------------- */ /* VWはSPのみ利用 --------------------------------------------------------- */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ html { font-size: 62.5%; } a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } area { cursor: pointer; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } body { font-size: 1.6rem; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; background: url(../images/bg_gray.png) 0 0 repeat; } img { vertical-align: top; } @media (max-width: 768px) { .sp_none { display: none !important; } } .pc_none { display: none !important; } @media (max-width: 768px) { .pc_none { display: block !important; } } .pd_btm_20 { padding-bottom: 20px; } .pd_btm_30 { padding-bottom: 30px; } .pd_btm_40 { padding-bottom: 40px; } .pd_btm_50 { padding-bottom: 50px; } .pd_btm_60 { padding-bottom: 60px; } .pd_btm_80 { padding-bottom: 80px; } .pd_btm_90 { padding-bottom: 90px; } .pd_top_15 { padding-top: 1.5em; } .pd_top_25 { padding-top: 25px; } .pd_top_50 { padding-top: 50px; } .pd_lt_30 { padding-left: 30px; } .pd_lt_40 { padding-left: 40px; } .pd_lt_50 { padding-left: 50px; } .mg_left_10 { margin-left: 10px; } .mg_btm_50 { margin-bottom: 50px; } .ttl-small01 { text-align: left; } .ttl-large01 { font-weight: 500; text-align: center; padding: 0; } .ttl-big01 { font-weight: 500; text-align: center; padding: 0; } @media (max-width: 768px) { .over-img { max-width: 100%; height: auto; width: auto; } } /* ========================================================= common ========================================================= */ .f-bold { font-weight: bold; font-size: 1.6rem !important; } .Lay-wd { width: 100%; max-width: 960px; margin: 0 auto; background: #FFFFFF; padding: 2em 55px; } @media (max-width: 768px) { .Lay-wd { width: 100%; margin: 0 auto; padding: 1em 0; } } .Lay-wd-faq { width: 100%; max-width: 810px; margin: 0 auto; } @media (max-width: 768px) { .Lay-wd-faq { width: 94%; margin: 0 auto; padding: 1em 0; } } .lp-footer { background: #A2D38A; width: 100%; } .lp-footer .ft-inner { padding: 6em 0 2em 0; background: #A2D38A; } .lp-footer .sns { display: flex; gap: 2.5em; padding-bottom: 2em; padding-top: 2em; justify-content: center; } .lp-footer .sns a { border-radius: 50px; background: #000000; display: block; color: #FFF; width: 50px; height: 50px; padding-top: 10px; } .lp-footer .sns a fab { color: #FFF; } .lp-footer .copy { text-align: center; padding-top: 2em; } .btn-area { text-align: center; padding: 2em 0; } @media (max-width: 768px) { .btn-area { padding: 0em 0; } } .btn-area li { text-align: center; padding: 1em 0; } @media (max-width: 768px) { .btn-area li { width: 90%; margin: 0 auto; } } .btn-area li a:hover { opacity: 0.5; } .btn-area .btn-sample img { width: 500px; height: auto; } .btn-area .btn-price img { width: 300px; height: auto; } .ft-nav { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; } @media (max-width: 768px) { .ft-nav { display: block; } } .ft-nav div { width: 45%; gap: 2em; } @media (max-width: 768px) { .ft-nav div { gap: 1em; width: 100%; text-align: center; } } .ft-nav .itm01 { text-align: center; } .ft-nav .itm01 img { width: 60%; height: auto; } .ft-nav .item02 p { line-height: 2; } /*FAQ*/ .faq-block { background: #FFF; border-radius: 25px; box-shadow: 4px 4px 4px 4px #bbb; /* 影指定 */ margin: 2em 0; padding: 3em 4em; } @media (max-width: 768px) { .faq-block { padding: 2em 1.5em 1em 1.5em; } } .faq-block dl { max-width: 530px; width: 100%; margin: 0 auto; } @media (max-width: 768px) { .faq-block dl { max-width: 100%; width: 100%; } } .faq-block dl dt { position: relative; padding-left: 50px; font-size: 1.8rem; border-bottom: 1px solid #000; padding-bottom: 1em; margin-bottom: 1em; } .faq-block dl dt:before { content: url("../images/question.png"); position: absolute; top: 0; left: 0; vertical-align: middle; padding-right: 5px; } .faq-block dl dd { position: relative; padding-left: 50px; font-size: 1.6rem; padding-bottom: 1em; line-height: 2; } .faq-block dl dd:before { content: url("../images/answer.png"); position: absolute; top: 0; left: 0; vertical-align: middle; padding-right: 5px; } /*-----------------------------------------------------*/ .ttl-001 { text-align: center; padding: 1em 0 0 0; font-size: 3.0rem; font-weight: bold; } @media (max-width: 768px) { .ttl-001 { padding: 1em 0 0 0; } .ttl-001 img { width: 70%; height: auto; } } @media (max-width: 768px) { .img-wd img { max-width: 150px; width: 100%; height: auto; } } .radius-block { background: #FFF; border-radius: 25px; box-shadow: 4px 4px 4px 4px #bbb; /* 影指定 */ margin: 2em 1em; padding: 2.5em 0 1em 0; } .voice-inner { display: flex; justify-content: space-between; border-bottom: 1px solid #809DA6; padding-bottom: 2em; gap: 2em; } @media (max-width: 768px) { .voice-inner { display: block; } } @media (max-width: 768px) { .voice-inner img { width: 100%; height: auto; } } @media (max-width: 768px) { .voice-inner { display: block; } } .voice-inner p { line-height: 2; } .about-inner { display: flex; justify-content: space-between; padding-bottom: 2em; max-width: 720px; width: 100%; align-items: flex-start; gap: 2em; } @media (max-width: 768px) { .about-inner { display: block; } } .about-inner img { max-width: 300px; width: 100%; height: auto; } @media (max-width: 768px) { .about-inner img { max-width: 100%; width: 100%; } } .about-inner p { line-height: 2; } .voice-contents { padding: 1em 2.5em 1em 2.5em; } .marker-y { padding: 0 2px; background: linear-gradient(transparent 70%, #ffff7d 50%); } .ttl-voice { font-size: 2.8rem; text-align: center; padding: 0em 0 1em 0; font-weight: bold; } .ttl-about { font-size: 2.0rem; padding: 0em 0 .75em 0; font-weight: bold; } .text-cap { padding-top: 1em; display: block; font-size: 1.4rem; } .caution { max-width: 480px; width: 100%; text-align: center; border: 5px solid #D14D70; padding: 1.5em .75em; font-size: 1.2rem; margin: 0 auto; line-height: 2; margin-bottom: 4em; } @media (max-width: 768px) { .caution { width: 90%; margin: 0 auto; text-align: left; } } .main-img { padding: 0em 0 1em 0; } .main-img img { width: 100%; height: auto; } .flex-flow { padding: 1em 0; display: flex; gap: 1.5em; margin: 0 auto; justify-content: center; } @media (max-width: 768px) { .flex-flow { display: block; } } .flex-flow dt { text-align: left; width: 200px; } @media (max-width: 768px) { .flex-flow dt { width: 100%; text-align: center; } .flex-flow dt img { width: 60%; height: auto; } } .flex-flow dd { line-height: 2; font-size: 1.5rem; width: 300px; padding-top: 1.5em; } @media (max-width: 768px) { .flex-flow dd { width: 100%; text-align: center; } } .flex-flow2 { padding: 1em 0; display: flex; gap: 1.5em; margin: 0 auto; justify-content: center; } @media (max-width: 768px) { .flex-flow2 { display: block; } } .flex-flow2 dt { text-align: left; width: 200px; } @media (max-width: 768px) { .flex-flow2 dt { width: 100%; text-align: center; } .flex-flow2 dt img { width: 60%; height: auto; } } .flex-flow2 dd { line-height: 2; font-size: 1.5rem; width: 300px; } @media (max-width: 768px) { .flex-flow2 dd { width: 100%; text-align: center; padding-top: 1.5em; } } .flow-area { padding: 2em 0; } .sample-block { padding: 0 4em; } @media (max-width: 768px) { .sample-block { padding: 0 0em; } } .sample-block h4 { text-align: center; padding: 2em 0; } .sample-block h4 span { color: #89A778; font-size: 2.4rem; display: inline-block; padding: .5em .5em; border: solid 1px #89A778; line-height: 1.4; } @media (max-width: 768px) { .sample-block h4 span { font-size: 1.8rem; line-height: 1.6; width: 90%; margin: 0 auto; } } .sample-list { /*max-width: 640px;*/ width: 100%; margin: 0 auto; } @media (max-width: 768px) { .sample-list { padding: 0 2em; } } .sample-list li { font-size: 2.2rem; font-weight: bold; } @media (max-width: 768px) { .sample-list li { font-size: 1.6rem; } } .sample-list li:before { content: "◆"; display: inline-block; width: 20px; height: auto; margin-right: 10px; position: relative; top: 0; left: 0; } .sample-list li span { font-size: 1.6rem; display: block; text-indent: 2em; } @media (max-width: 768px) { .sample-list li span { font-size: 1.2rem; text-indent: 2.4em; } } /*--------------------------------------*/ .com-image { /*width: 360px;*/ } .com-text { /* width: 360px;*/ } .main-visual { margin: 0 auto; max-width: 960px; width: 100%; } .bg-fst { background-image: url("../images/bg-fst.png"); background-repeat: no-repeat; background-position: center bottom; } @media (max-width: 768px) { .bg-fst { background: none; } } .fst-con { padding: 3em 1em 4em 1em; text-align: center; margin-bottom: 4em; } @media (max-width: 768px) { .fst-con { padding: 1em 1em 0 1em; margin-bottom: 0em; text-align: left; } .fst-con br { display: none; } } .fst-con p { line-height: 2.6; } #advantage { max-width: 960px; width: 100%; margin: 0 auto; padding: 1em 0 80em 0; display: block; position: relative; background: #FFF; /*----------------------------------------------*/ /*----------------------------------------------*/ /*----------------------------------------------*/ /*----------------------------------------------*/ } @media (max-width: 768px) { #advantage { padding: 1em 0 0em 0; } } #advantage .sp-pd-ttl { display: none; } @media (max-width: 768px) { #advantage .sp-pd-ttl { text-align: center; display: block; margin: 0 auto; position: static; } #advantage .sp-pd-ttl span { font-weight: bold; font-size: 2.6rem; } #advantage .sp-pd-ttl img { margin: 0 auto; } } @media (max-width: 768px) { #advantage .ad-ttl { text-align: center; padding: .75em 0; /* text-align: center; display: block; margin: 0 auto; */ } } #advantage .sp-on-img { display: none; } @media (max-width: 768px) { #advantage .sp-on-img { padding: .5em 0; display: block; } #advantage .sp-on-img img { width: 100%; height: auto; vertical-align: baseline; } } #advantage .sp-on-img2 { display: none; } @media (max-width: 768px) { #advantage .sp-on-img2 { padding: 2em 0 .5em 0; display: block; } #advantage .sp-on-img2 img { width: 100%; height: auto; vertical-align: baseline; } } #advantage .ad-ttl01 { position: absolute; left: 100px; top: 0; z-index: 1; } @media (max-width: 768px) { #advantage .ad-ttl01 { position: static; } } #advantage .ad01-01 { position: absolute; top: 134px; right: 10px; z-index: 5; } @media (max-width: 768px) { #advantage .ad01-01 { position: static; } } #advantage .ad01-02 { position: absolute; right: -30px; top: 540px; z-index: 6; } @media (max-width: 768px) { #advantage .ad01-02 { position: static; } } #advantage .ad01-03 { position: absolute; left: 20px; top: 310px; z-index: 2; } @media (max-width: 768px) { #advantage .ad01-03 { position: static; } } #advantage .ad01-04 { position: absolute; left: 80px; top: 630px; z-index: 2; } @media (max-width: 768px) { #advantage .ad01-04 { position: static; } } #advantage .ad01-05 { position: absolute; right: -60px; top: 850px; z-index: 7; } @media (max-width: 768px) { #advantage .ad01-05 { position: static; } } #advantage .ad01-07 { position: absolute; right: 80px; top: 65px; z-index: 5; } @media (max-width: 768px) { #advantage .ad01-07 { position: static; } } #advantage .ad01-06 { position: absolute; left: 60px; top: 940px; z-index: 2; } @media (max-width: 768px) { #advantage .ad01-06 { position: static; } } #advantage .ad01-08 { position: absolute; left: -120px; top: 0px; z-index: 5; } @media (max-width: 768px) { #advantage .ad01-08 { position: static; } } #advantage .ad01-09 { position: absolute; right: -120px; top: -50px; z-index: 5; } @media (max-width: 768px) { #advantage .ad01-09 { position: static; } } #advantage .ad-ttl02 { position: absolute; right: 160px; top: 0; z-index: 3; } @media (max-width: 768px) { #advantage .ad-ttl02 { position: static; } } #advantage .ad02-01 { position: absolute; top: 180px; left: 30px; } @media (max-width: 768px) { #advantage .ad02-01 { position: static; } } #advantage .ad02-02 { position: absolute; right: 30px; top: 500px; } @media (max-width: 768px) { #advantage .ad02-02 { position: static; } } #advantage .ad02-03 { position: absolute; right: 0px; top: 280px; z-index: 3; } @media (max-width: 768px) { #advantage .ad02-03 { position: static; } } #advantage .ad02-04 { position: absolute; left: -80px; top: 500px; z-index: 5; } @media (max-width: 768px) { #advantage .ad02-04 { position: static; } } #advantage .ad02-05 { position: absolute; right: 30px; top: 870px; z-index: 6; } @media (max-width: 768px) { #advantage .ad02-05 { position: static; } } #advantage .ad02-07 { position: absolute; right: 80px; top: 80px; z-index: 5; } @media (max-width: 768px) { #advantage .ad02-07 { position: static; } } #advantage .ad02-06 { position: absolute; left: 0px; top: 720px; z-index: 5; } @media (max-width: 768px) { #advantage .ad02-06 { position: static; } } #advantage .ad02-08 { position: absolute; left: -60px; top: 50px; z-index: 5; } @media (max-width: 768px) { #advantage .ad02-08 { position: static; } } #advantage .ad02-09 { position: absolute; right: -65px; top: 0px; z-index: 5; } @media (max-width: 768px) { #advantage .ad02-09 { position: static; } } #advantage .f-small { background-size: 1rem !important; display: block; } #advantage .ad-ttl03 { position: absolute; left: 32%; top: 300px; z-index: 60; } @media (max-width: 768px) { #advantage .ad-ttl03 { position: static; } } #advantage .ad03-01 { position: absolute; top: 590px; right: 40px; } @media (max-width: 768px) { #advantage .ad03-01 { position: static; } } #advantage .ad03-02 { position: absolute; right: 30px; top: 500px; } @media (max-width: 768px) { #advantage .ad03-02 { position: static; } } #advantage .ad03-03 { position: absolute; left: 50px; top: 0px; z-index: 2; } #advantage .ad03-03 img { max-width: 545px; width: 100%; height: auto; } @media (max-width: 768px) { #advantage .ad03-03 { position: static; } } #advantage .ad03-04 { position: absolute; right: -40px; top: 360px; z-index: 2; } @media (max-width: 768px) { #advantage .ad03-04 { position: static; } } #advantage .ad03-05 { position: absolute; left: -35px; top: 500px; z-index: 2; } @media (max-width: 768px) { #advantage .ad03-05 { position: static; } } #advantage .ad03-06 { position: absolute; left: 20px; top: 700px; z-index: 5; } @media (max-width: 768px) { #advantage .ad03-06 { position: static; } } #advantage .ad03-08 { position: absolute; left: -120px; top: 80px; z-index: 5; } @media (max-width: 768px) { #advantage .ad03-08 { position: static; } } #advantage .ad03-09 { position: absolute; right: -50px; top: 20px; z-index: 5; } @media (max-width: 768px) { #advantage .ad03-09 { position: static; } } #advantage .ad-ttl04 { position: absolute; left: 20%; top: 0px; z-index: 2; } @media (max-width: 768px) { #advantage .ad-ttl04 { position: static; } } #advantage .ad04-01 { position: absolute; top: 280px; left: 200px; z-index: 1; } @media (max-width: 768px) { #advantage .ad04-01 { position: static; } } #advantage .ad04-02 { position: absolute; right: 30px; top: 500px; } @media (max-width: 768px) { #advantage .ad04-02 { position: static; } } #advantage .ad04-03 { position: absolute; right: 20px; top: -40px; z-index: 2; } @media (max-width: 768px) { #advantage .ad04-03 { position: static; } } #advantage .ad04-04 { position: absolute; left: 20px; top: 220px; z-index: 5; } @media (max-width: 768px) { #advantage .ad04-04 { position: static; } } #advantage .ad04-05 { position: absolute; right: 0px; top: 680px; z-index: 2; } @media (max-width: 768px) { #advantage .ad04-05 { position: static; } } #advantage .ad04-06 { position: absolute; left: 20px; top: 700px; z-index: 5; } @media (max-width: 768px) { #advantage .ad04-06 { position: static; } } #advantage .ad04-08 { position: absolute; left: -50px; top: 0px; z-index: 5; } @media (max-width: 768px) { #advantage .ad04-08 { position: static; } } #advantage .ad04-09 { position: absolute; right: -100px; top: -80px; z-index: 5; } @media (max-width: 768px) { #advantage .ad04-09 { position: static; } } #advantage .ad-ttl05 { position: absolute; left: 10%; top: 0; } @media (max-width: 768px) { #advantage .ad-ttl05 { position: static; } } #advantage .ad05-01 { position: absolute; top: 300px; right: 20%; } @media (max-width: 768px) { #advantage .ad05-01 { position: static; } } #advantage .ad05-02 { position: absolute; right: 30px; top: 500px; } @media (max-width: 768px) { #advantage .ad05-02 { position: static; } } #advantage .ad05-03 { position: absolute; right: 80px; top: 0px; z-index: 2; } @media (max-width: 768px) { #advantage .ad05-03 { position: static; } } #advantage .ad05-04 { position: absolute; right: 20px; top: 360px; z-index: 2; } @media (max-width: 768px) { #advantage .ad05-04 { position: static; } } #advantage .ad05-05 { position: absolute; left: -20px; top: 660px; z-index: 2; } @media (max-width: 768px) { #advantage .ad05-05 { position: static; } } #advantage .ad05-06 { position: absolute; left: 20px; top: 680px; z-index: 5; } @media (max-width: 768px) { #advantage .ad05-06 { position: static; } } #advantage .ad05-08 { position: absolute; left: -50px; top: -80px; z-index: 5; } @media (max-width: 768px) { #advantage .ad05-08 { position: static; } } #advantage .ad05-09 { position: absolute; right: -100px; top: -80px; z-index: 5; } @media (max-width: 768px) { #advantage .ad05-09 { position: static; } } #advantage .ad-block { position: relative; } @media (max-width: 768px) { #advantage .ad-block { position: static; display: block; background: #FFF; width: 94%; margin: 0 auto; padding: 1em 0; } } #advantage .ad-block .bg-pink { background-image: url("../images/bg-pink@2x.png"); border-radius: 50%; background-position: center center; } @media (max-width: 768px) { #advantage .ad-block .bg-pink { background: none; } } #advantage .ad-block .bg-orange { background-image: url("../images/bg-orange@2x.png"); border-radius: 50%; background-position: center center; } @media (max-width: 768px) { #advantage .ad-block .bg-orange { background: none; } } #advantage .ad-block .bg-blue { background-image: url("../images/bg-blue@2x.png"); border-radius: 50%; background-position: center center; } @media (max-width: 768px) { #advantage .ad-block .bg-blue { background: none; } } #advantage .ad-block .bg-green { background-image: url("../images/bg-green@2x.png"); border-radius: 50%; background-position: center center; } @media (max-width: 768px) { #advantage .ad-block .bg-green { background: none; } } #advantage .ad-block .bg-purple { background-image: url("../images/bg-purple@2x.png"); border-radius: 50%; background-position: center center; } @media (max-width: 768px) { #advantage .ad-block .bg-purple { background: none; } } #advantage .ad-block h3 { font-weight: bold; font-size: 2rem; } #advantage .ad-block .ttl-pink { color: #DE4D70; } #advantage .ad-block .ttl-orange { color: #EE802A; } #advantage .ad-block .ttl-blue { color: #3580AF; } #advantage .ad-block .ttl-green { color: #218364; } #advantage .ad-block .ttl-purple { color: #805B81; } #advantage .ad-block .wd430 { width: 450px; height: 450px; display: grid; place-items: center; padding: .5em 3em 0.5em 3em; } @media (max-width: 768px) { #advantage .ad-block .wd430 { width: 100%; height: 100%; display: block; padding: 1em; } #advantage .ad-block .wd430 br { display: none; } } #advantage .ad-block .wd380 { width: 380px; height: 380px; padding: .5em 1.5em 0.5em 1.5em; display: grid; place-items: center; } @media (max-width: 768px) { #advantage .ad-block .wd380 { width: 100%; height: 100%; display: block; padding: 1em; } #advantage .ad-block .wd380 br { display: none; } } #advantage .ad-block .text-inner { display: table-cell; vertical-align: middle; text-align: center; } #advantage .ad-block .text-inner p { line-height: 1.8; font-size: 1.6rem; /*letter-spacing: .05em;*/ } #advantage .ad-block .text-inner p span { font-size: 1.4rem; } @media (max-width: 768px) { #advantage .ad-block .text-inner { display: block; width: 100%; padding: 0 .5em; text-align: left; } #advantage .ad-block .text-inner p { line-height: 1.8; font-weight: bold; /*letter-spacing: .05em;*/ } #advantage .ad-block .text-inner p span { font-size: 1.4rem; } } .lp-wrap { width: 100%; margin: 0 auto; } /*.stripeA { background: repeating-linear-gradient(-35deg, #E5EBF1, #E5EBF1 20px, #fff 20px, #fff 40px); } .stripeB { background: repeating-linear-gradient(-35deg, #BCDFE7, #BCDFE7 20px, #fff 20px, #fff 40px); }*/ .stripeA { /*background: url(../images/bg_gray.png) 0 0 repeat;*/ } .stripeB { background-color: #BCDFE7; } .bg-blue { background: #BCDFE7; } .faq--wrap { max-width: 810px; width: 100%; margin: 0 auto; } .pos-static { position: static; display: block; padding: 1em 0; } @media (max-width: 768px) { .pos-static { padding: 0em 0; display: none; } } .pos-mg01 { margin-top: 1400px; } @media (max-width: 768px) { .pos-mg01 { margin-top: 2em; } } .pos-mg02 { margin-top: 1200px; } @media (max-width: 768px) { .pos-mg02 { margin-top: 2em; } } .pos-mg03 { margin-top: 1100px; } @media (max-width: 768px) { .pos-mg03 { margin-top: 2em; } } .bg-fff { background: #fff; max-width: 960px; width: 100%; margin: 0 auto; } #header { background: #A0D188; position: sticky; top: 0; /* 上部から配置の基準位置を決める */ left: 0; /* 左から配置の基準位置を決める */ height: 88px; width: 100%; z-index: 999; padding: .5em 0; } #header nav { max-width: 950px; width: 100%; margin: 0 auto; } #header .sp-logo { padding-top: 10px; } #header ul { height: 70px; display: flex; justify-content: space-between; align-items: center; } #header ul li { padding: 0 1em; } @media (max-width: 768px) { #header { height: 70px; padding: 0em 0; } .img-wd { padding: 1.5em 0; text-align: center; } .img-wd img { width: 200px; height: auto; } } @media (max-width: 768px) { .wrap--blue { background: #96C6E4; } .wrap--red { background: #FFBCCD; } .wrap--orange { background: #FFC680; } .wrap--green { background: #A7C98B; } .wrap--purple { background: #B1A8CC; } } .sp--wrapper { width: 800px; margin: 0 auto; } @media (max-width: 768px) { .sp--wrapper { width: 100%; display: block; padding: 2em 0; } } .f-lineh { line-height: 1.6 !important; } .sns2 { display: flex; gap: .5em; padding-top: 1em; } @media (max-width: 768px) { .sns2 { align-items: center; justify-content: center; } } .sns2 a { border-radius: 50px; background: #000000; display: block; color: #FFF; width: 30px; height: 30px; padding-top: 8px; padding-left: 8px; } @media (max-width: 768px) { .sns2 a { padding-top: 5px; padding-left: 8px; } } .sns2 a fab { color: #FFF; } .sp-kan { display: none; } .sp-bigf { font-weight: bold; } @media (max-width: 768px) { .sp-kan { display: flex; align-items: center; justify-content: space-between; } .sp--img img { max-width: 100px; width: 100%; height: auto; } .sp-brbr { display: block !important; } .sp-br { display: block; /* padding: .75em 0;*/ } .sp-bigf { font-size: 2.4rem; font-weight: bold; } .sp-only { display: block; text-align: center; font-size: 1.2rem; } .sp-lay01 { display: none; position: relative; } .sp-lay01 img { position: absolute; width: 120px; height: auto; top: -10px; right: -10px; } .sp-lay02 { position: relative; } .sp-lay02 img { position: absolute; width: 80px; height: auto; top: -50px; left: -50px; } .sp-img5 { padding-top: 1em; text-align: center; margin: 0 auto; display: inline-block; width: 80px; } .sp-img5 img { max-width: 80px; width: 100%; height: auto; } .sp-center { text-align: center; } .sp-inq-btn { text-align: right; } .sp-inq-btn img { width: 75%; height: auto; } } .mg-map { /* margin-top:-50px; padding-top:50px;*/ } .map-image img { width: 100%; height: auto; } @media (max-width: 768px) { .map-image img { width: 100%; height: auto; } }