@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Lato:400,700); @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css); /* =================================================================== Setting =================================================================== */ html { color: #000; background: #FFF; line-height: 1.6; text-align: left; font-size: 65.5%; } body { font-size: 1.5rem; margin: 0; font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; overflow-x: hidden; } img { max-width: 100%; height: auto; } /* Link set ------------------------------------------------------------------- */ a { color: #000; text-decoration: none; transition: 0.3s ease-in-out; } a img { transition: 0.3s ease-in-out; } a:hover { color: #666; } /* Block set ------------------------------------------------------------------- */ main { margin: 0 auto; } main section { margin: 0 auto; position: relative; } main section .container { width: 1080px; margin: 0 auto; } main:after, main section:after, main section .container { content: ""; display: block; clear: both; } /* JS set ------------------------------------------------------------------- */ .fadein { opacity: 0.1; transform: translate(0, 50px); transition: all 500ms; } .fadein.scrollin { opacity: 1; transform: translate(0, 0); } ul li.fadein:nth-of-type(2) { transition-delay: 300ms; } ul li.fadein:nth-of-type(3) { transition-delay: 600ms; } ul li.fadein:nth-of-type(4) { transition-delay: 900ms; } ul li.fadein:nth-of-type(5) { transition-delay: 1200ms; } ul li.fadein:nth-of-type(6) { transition-delay: 1500ms; } /* =================================================================== # Responsive =================================================================== */ .m { display: none; } br.sp-on { display: none; } @media screen and (max-width:768px) { body { font-size: 1.3rem; } main section .container { width: 100%; padding: 0 1.5em; } .m { display: block; } br.sp-on { display: block; } } /* =================================================================== Header =================================================================== */ header { height: 30px; line-height: 30px; padding: 15px 0; margin: auto; box-sizing: content-box; position: fixed; z-index: 999999; left: 0; right: 0; background: #2D9208; } header:after { content: ""; display: block; clear: both; } header #logo { float: left; margin-right:15px; } header h1 { float: left; width: 50%; font-size: 13px; letter-spacing: 1px; color:#fff; line-height:30px; } header h1 a { color: #fff; } header nav { float: right; top: -15px; position: absolute; right: 0; } header nav ul:after { content: ""; display: block; clear: both; } header nav ul li { float: left; margin-left: 20px; } header nav ul li:first-child { margin-left: 0; } header nav ul li a { color: #fff; font-size: 1.1rem; text-decoration: underline; } header nav ul li a:hover { background: #CCFF00; color: #FFF; text-decoration: none; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { header { width: 100%; height: auto; line-height: inherit; padding: 1em 0; text-align: center; position: relative; } header #logo { float: none; margin-right: 0px; } header img { display: block; margin: 0 auto 10px; } header h1 { float: none; width: 100%; margin-bottom: 0; } header nav { display:none; } .container { width: auto; padding: 0 20px; } .row .column { margin-bottom: 20px; } } /* =================================================================== fv =================================================================== */ .fv { height: 637px; background: url(../images/main_back.jpg) no-repeat center; background-size: cover; } .fv .container { width: 1180px; margin: 0 auto; position: relative; top: 20%; } .fv .container:after { content: ""; display: block; clear: both; } .fv h1 { text-align: left; font-size: 36px; line-height: 1.4; color: #2D9208; font-weight: 500; letter-spacing: 2px; /* text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px, #000 1px -1px 5px, #000 -1px -1px 5px; */ } .fv h2 { text-align: left; font-size: 22px; line-height: 1.6; color: #FFF; font-weight: 500; letter-spacing: 2px; text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px, #000 1px -1px 5px, #000 -1px -1px 5px; } .fv h3 { text-align: left; font-size: 20px; line-height: 1.6; color: #FFF; font-weight: 500; letter-spacing: 2px; text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px, #000 1px -1px 5px, #000 -1px -1px 5px; } .fv span.sytle-g { color: #2D9208; font-size: 65px; font-weight: 900; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .fv { height: 300px; background: url(../images/main_backsp.jpg) no-repeat center bottom; background-size: 100%; margin-bottom: 0; padding: 0px 10px 0; } ul.main_list li { font-size: 18px; } .fv h1 { text-align: center; font-size: 20px; margin-bottom: 5px; } .fv .container { width: 100%; } .fv h2 { text-align: center; font-size: 16px; line-height: 150%; } .fv h3 { text-align: center; font-size: 13px; line-height: 150%; } .fv span.sytle-g { font-size: 25px; } .fv .container { top: 15%; } header h1 { font-size: 16px; } } @media screen and (max-width:320px) { .fv h1 { text-align: center; font-size: 18px; margin-bottom: 5px; } .fv h2 { text-align: center; font-size: 14px; line-height: 200%; } .fv span.sytle-g { font-size: 20px; } header h1 { font-size: 12px; } } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { main section > div > h1 { font-size: 3rem; } .no1 { order: 1!important; } } /* =================================================================== s1 =================================================================== */ .s1 { height: 562px; background: url(../images/main_back2.jpg) no-repeat center top; background-size: 100%; padding-top:155px; } .s1 h1 { font-size: 35px; letter-spacing: 2px; margin-bottom: 30px; line-height: 160%; text-align: center; } .s1 .black-back { width: 313px; margin: 0 auto; padding: 20px; background: #333; } .s1 .tecspc { width:900px; height: 367px; margin:0 auto; background: url(../images/tecspc_bg_2.jpg) no-repeat center; position: relative; z-index: 10; padding: 260px 60px 0px 60px; } .s1 .tecspc p { color:#fff; font-size: 18px; font-weight:700; } h2.title-style01 { background: url(../images/title-back.png) center 22px repeat-x; text-align: center; } h2.title-style01 span { display: inline-block; background: #fff; text-align: center; margin: 0 auto; font-size: 20px; padding: 0 20px; } .item-box img { display: block; margin: 0 auto; } .s1 .eos-style p { color: #fff; font-size: 14px; } .s1 .img-back { background: url(../images/s1_ph.jpg) no-repeat center; background-size: cover; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s1 { height: 431px; background: url(../images/main_back2.jpg) no-repeat center top; background-size: 290%; padding-top: 77px; } .s1 h1 { font-size: 22px; margin-bottom: 1.5em; } .s1 .row .column.column-60 { max-width: 100%; } .s1 .black-back { width: 100%; } .s1 .tecspc { width:100%; height: 228px; margin:0 auto; background: url(../images/tecspc_bgsp_2.jpg) no-repeat center; background-size:contain; position: relative; z-index: 10; padding: 115px 15px 0px 15px; } .s1 .tecspc p { font-size: 12px; } } /* =================================================================== s2 =================================================================== */ .s2 { background: url(../images/s2_bg.jpg) center repeat-x; padding: 60px 0; text-align: center; position: relative; height:790px; padding-top: 145px; } .s2:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #f9fbfa; } .s2 h1 { margin: 20px 0 20px; letter-spacing: 2px; font-size: 36px; line-height: 1.4; color: #2D9208; font-weight: 500; } .s2 .f-red { color: #FF0004; } .s2 p { font-size: 18px; } .s2 div .komari { width: 932px; margin:0 auto; } .s2 div .komari ul { display: flex; flex-wrap: wrap; width: 100%; } .s2 div .komari ul li { width: 49%; background-color: #fff; height: 60px; line-height: 60px; text-align: left; float: left; background-image: url(../images/check.png); background-repeat: no-repeat; background-position: left top; padding-left: 50px; font-size: 17px; } .s2 div .komari ul li:nth-child(even) { margin-left:2%; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s2 { background: none; background-color: #eee; padding: 0; text-align: center; position: relative; height: 1094px; padding-top: 52px; } .s2:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #eee; } .s2 h1 { margin-bottom: 1.5em; } .s2 div > figure { margin-bottom: 5em; width: 99.5vw; margin-right:calc(((100vw - 100%) / 2) * -1); margin-left:calc(((100vw - 100%) / 2) * -1); } .s2 h2 { font-size: 20px; } .s2 div .komari { width: 100%; margin:0 auto; } .s2 h1 { font-size: 33px; } .s2 div .komari ul li { width: 100%; background-color: #fff; height: 60px; line-height: 60px; text-align: left; float: left; background-image: url(../images/check.png); background-repeat: no-repeat; background-position: left top; padding-left: 50px; font-size: 17px; } .s2 div .komari ul li:nth-child(even) { margin-left:0%; } } /* =================================================================== s3 =================================================================== */ .s3 { } .s3 h1 { margin: 20px 0 20px; color: #73C051; letter-spacing: 2px; } .s3 .area01 { background-image: url(../images/s3_area01_bg.jpg); background-repeat:repeat-x; height:218px; text-align:center; padding-top:32px; margin-bottom: 95px; } .s3 .coupon { padding-top: 42px; margin-bottom: 0px; } .s3 .area01 h2 { font-size:37px; font-weight:700; letter-spacing:3px; color:#fff; } .s3 .coupon h1 { font-size:47px; font-weight:700; letter-spacing:3px; color:#fff; } .s3 .area02 { text-align: center; width: 1000px; margin: 0 auto; } .s3 .area02 h1 { margin: 20px 0 20px; color: #73C051; letter-spacing: 2px; } .s3 .area02 h3 { letter-spacing: 2px; background-color:#75C01F; line-height:82px; text-align:center; color:#fff; font-weight:800; font-size:32px; width:1000px; margin:0px auto 20px auto; } .s3 .area02 h4 { letter-spacing: 2px; text-align:center; color:#2D9800; font-weight:700; font-size:33px; margin-bottom:1rem; } .s3 .area02 ul { display:flex; flex-wrap: wrap; width:100%; } .s3 .area02 ul li { width:23.5%; margin-left:2%; } .s3 .area02 ul li:first-child { margin-left:0; } .s3 .area02 ul li:nth-child(5n) { margin-left:0; } .s3 .area02 ul li:nth-child(9n) { margin-left:0; } .s3 .area02 ul li:nth-child(10n) { margin-left:2%; } .s3 div > figure { margin-bottom: 60px; } .s3 h2 { font-weight: 600; } .s3 h2, .s3 h3 { color: #73C051; font-size: 22px; letter-spacing: 2px; } .s3 .area02 .repair ul { display:flex; flex-wrap: wrap; width:100%; } .s3 .area02 .repair ul li { width:48%; margin-left:2%; } .s3 .coupon-wrap { width:100%; background-color:#75C01F; } .s3 .coupon-wrap .coupon-inner { width:850px; margin:0 auto; padding-top:50px; padding-bottom:100px; } .s3 .coupon-wrap .coupon-inner p { color:#fff; font-size:1.8rem; margin:30px 0px; } .s3 .coupon-wrap .coupon-inner .coupon-caution { padding:20px; background-color:#fff; } .s3 .coupon-wrap .coupon-inner .coupon-caution p { color:#333; font-size:1.2rem; margin:0; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s3 h2, .s3 h3 { font-size: 20px; } .s3 .area01 { background-image: url(../images/s3_area01_bg.jpg); background-repeat: repeat-x; height: 129px; text-align: center; padding-top: 32px; margin-bottom: 50px; } .s3 .area01 img { width:90% } .boder-area th, .boder-area td { display: block; } .s3 .area02 { text-align: center; width: 100%; margin: 0 auto; } .s3 .area02 h1 { font-size:2.1rem; font-weight:900; } .s3 .area02 p br { display:none; } .s3 .area02 h3 { letter-spacing: 2px; background-color: #75C01F; line-height: 35px; text-align: center; color: #fff; font-weight: 600; font-size: 22px; width: 100%; margin: 0px auto 20px auto; padding: 15px 18px; } .s3 .area02 ul li { width: 49%; margin-left: 0%; } .s3 .area02 ul li:nth-child(10n) { margin-left:0%; } .s3 .area02 ul li:nth-child(even) { margin-left:2%; } .s3 .coupon-wrap .coupon-inner { width:100%; margin:0 auto; padding-top:50px; padding-bottom:100px; } .s3 .coupon { background-image: url(../images/s3_area01_bg.jpg); background-repeat: repeat-x; height: 85px; text-align: center; padding-top: 14px; margin-bottom: 0px; } .s3 .coupon h1 { font-size:17px; font-weight:700; letter-spacing:3px; color:#fff; } .s3 .coupon-wrap .coupon-inner { width: 100%; margin: 0 auto; padding-top: 0px; padding-bottom: 0px; } .s3 .coupon-wrap .coupon-inner p { color: #fff; font-size: 1.5rem; margin: 30px 0px; padding: 0px 20px; } .s3 .coupon-wrap .coupon-inner .coupon-caution p { color: #333; font-size: 1.0rem; margin: 0; padding: 0; } .s3 .area02 .repair ul li { width: 100%; margin-left: 0; } } /* =================================================================== s4 =================================================================== */ .s4 { padding: 70px 0; text-align: center; position: relative; background-image: url(../images/s4_area01_bg.jpg); background-repeat:repeat; } .s4 h4 { letter-spacing: 2px; text-align:center; color:#2D9800; font-weight:700; font-size:33px; margin-bottom:1rem; } .s4 .area01 { display:flex; flex-wrap: wrap; width:100%; } .s4 .area01 dl { display: flex; flex-wrap: wrap; width: 46%; margin: 2%; text-align: center; background-color: #FFF; border: 5px solid #77B71E; padding: 30px; box-sizing:border-box; border-radius: 20px; } .s4 .area01 dl dt { font-weight:800; margin: 1rem auto; font-size:1.8rem; } .s4 .area01 dl dd { font-size:1.6rem; } .s4 .area01 dl dd img { margin-bottom:15px; } @media (min-width: 768px) {/* PCのときはページの真ん中の600x600領域 */ .popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 { width: 600px; height: 600px; padding: 30px; } .popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label { left: 50% !important; top: 50% !important; margin-left: 270px !important; margin-top: -310px !important; } .popupModal5 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup6 { width: 600px; height: 600px; padding: 30px; } .popupModal5 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label { left: 50% !important; top: 50% !important; margin-left: 270px !important; margin-top: -310px !important; } } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s4 { margin-bottom: 0em; } .s4 h1 { margin-bottom: 1.5em; } .s4 h2, .s4 h3 { font-size: 20px; } .s4 h3 { margin: 15px 0; } .s4 .area01 dl { display: flex; flex-wrap: wrap; width: 100%; margin: 2%; text-align: center; background-color: #FFF; border: 5px solid #77B71E; padding: 20px; box-sizing: border-box; border-radius: 20px; } .s4 .area01 dl dt { font-weight: 800; margin: 1rem auto; font-size: 1.5rem; } } /* =================================================================== s5 =================================================================== */ .s5 { padding: 100px 0; background: #75C01F; } .s5 h1 { margin: 20px 0 20px; font-size: 40px; text-align: center; color: #fff; letter-spacing: 2px; } .s5 .area01 { background: #fff; width:1000px; margin:0 auto; padding-bottom: 20px; } .s5 .area01 .big { font-size:76px; font-weight:900; color:#333; } .s5 p { text-align: center; font-size: 18px; color: #333; margin-bottom: 40px; } .s5 .area01 ul { display:flex; } .s5 .area01 ul li{ width:50%; } .btn { background: #ddd; padding: 10px; margin: 10px auto; width: 90%; text-align: center; } p.contact-p { font-size: 14px; letter-spacing: 1px; line-height: 180%; } .s5 .coupon { padding-top: 42px; margin-bottom: 0px; background-color: #75C01F; } .s5 .coupon h1 { font-size:47px; font-weight:700; letter-spacing:3px; color:#fff; } .s5 .coupon-wrap { width:100%; background-color:#75C01F; } .s5 .coupon-wrap .coupon-inner { width:850px; margin:0 auto; padding-top:50px; padding-bottom:100px; } .s5 .coupon-wrap .coupon-inner p { color:#fff; font-size:1.8rem; margin:30px 0px; } .s5 .coupon-wrap .coupon-inner .coupon-caution { padding:20px; margin: 60px 0 0; background-color:#fff; } .s5 .coupon-wrap .coupon-inner .coupon-caution p { color:#333; font-size:1.2rem; margin:0; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s5 { padding: 30px 0; background: #75C01F; } .s5 h1 { font-weight: bold; height: auto; line-height: 1.4; font-size: 30px; margin-bottom: 1.5em; } .s5 h1 br { display: block; } .s5 h2 { font-size: 1.6rem; font-weight: bold; margin-bottom: 1em; } .s5 .area01 { background: #fff; width:100%; margin:0 auto; padding:0px 10px 20px 10px; } .s5 .area01 p br { display:none; } .s5 .area01 .big { font-size: 25px; } .s5 .coupon { padding-top: 42px; margin-bottom: 0px; background-color: #75C01F; } .s5 .coupon h1 { font-weight: bold; height: auto; line-height: 1.4; font-size: 30px; margin-bottom: 1.5em; } .s5 .coupon-wrap { width:100%; background-color:#75C01F; } .s5 .coupon-wrap .coupon-inner { width: 100%; margin:0 auto; padding-top:0; padding-bottom:0; } } /* =================================================================== s6 =================================================================== */ .s6 { padding: 70px 0; text-align: center; position: relative; background-image: url(../images/s4_area01_bg.jpg); background-repeat:repeat; } .s6 .container { width:1000px; } .s6 h4 { letter-spacing: 2px; text-align:center; color:#2D9800; font-weight:700; font-size:33px; margin-bottom:1rem; } .s6 h5 { letter-spacing: 2px; text-align: center; color: #000; font-weight: 700; font-size: 18px; line-height: 36px; margin-bottom: 1rem; text-align: left; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #2D9208; } footer { width: 100%; border-top-width: 5px; border-top-style: solid; border-top-color: #2D9208; } footer .container { width:1000px; margin:0 auto; } footer .container .left { float:left; color:#2D9208; } footer .container .right { float:right; color:#2D9208; font-size:9px; } .contactsp { position:relative; display:none; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s6 .container { width:100%; } .s6 h4 { letter-spacing: 2px; text-align: center; color: #2D9800; font-weight: 700; font-size: 29px; margin-bottom: 1rem; } footer .container { width: 100%; margin: 0 auto; } footer .container .left { float: none; color: #2D9208; font-size: 1rem; text-align:center; } footer .container .right { float:none; color:#2D9208; font-size:9px; text-align:center; margin-bottom:0px; } .contactsp { position:relative; display:block; } .contactsp img { position: fixed; bottom:0; z-index:100; } } .bnr01 { width: 100%; max-width: 850px; margin: 0px auto 0; } .bnr01:hover { opacity: 0.6; transition: all 0.2s; } @media screen and (max-width:768px) { .bnr01 { width: 100%; max-width: 850px; margin: 40px auto 30px; } .bnr01:hover { opacity: 0.6; transition: all 0.2s; } }