@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; } .img_center { display: block; margin-left: auto; margin-right: auto; } .clearfix:after { display: block; clear: both; height: 0px; line-height: 0px; visibility: hidden; content: "."; } .clearfix { display: block; /* for IE8 */ } /* 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; } .pc { display:block; } @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; } .pc { display:none; } } /* =================================================================== 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: #fff; } 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:#2C9207; line-height:30px; } header h1 a { color: #fff; } header nav { float: right; top: -15px; position: absolute; right: 0; display:none; } 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: 770px; background: url(../images/main_back.jpg) no-repeat center top; background-size: cover; } .fv .container { width: 1180px; margin: 0 auto; position: relative; top: 15%; } .fv .container:after { content: ""; display: block; clear: both; } .fv h1 { text-align: left; font-size: 48px; line-height: 1.4; color: #fff; font-weight: 700; letter-spacing: 2px; /* text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px, #000 1px -1px 5px, #000 -1px -1px 5px; */ } main p { font-size:23; color:#FFCC00; font-weight:bold; } h1 .red-h1 { color:#CC0000; font-size:46px; font-weight:bold; } .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-b { color: #333; font-size: 70px; font-weight: 900; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .fv { height: 265px; background: url(../images/main_back.jpg) no-repeat 48% top; background-size: cover; } .fv h1 { text-align: center; font-size: 18px; margin-bottom: 5px; } .fv span.sytle-b { color: #333; font-size: 27px; font-weight: 900; } .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: 5%; } 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 { background: url(../images/tori_bg.jpg) no-repeat center bottom; padding-top:120px; padding-bottom:100px; } .s1 h1 { font-size: 35px; letter-spacing: 2px; margin-bottom: 30px; line-height: 160%; text-align: center; } .s1 .tori { display:flex; } .s1 .tori .flbox { width:33%; text-align:center; } .s1 .tori .flbox img { margin-bottom:25px; } .s1 .tori .flbox .red-fl { font-size:27px; color:#CC0000; font-weight:bold; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s1 { background:none; background-color:#fff; padding-top:45px; padding-bottom:30px; } .s1 h1 { font-size: 22px; margin-bottom: 1.5em; } .s1 .row .column.column-60 { max-width: 100%; } h1 .red-h1 { color: #CC0000; font-size: 32px; font-weight: bold; } .s1 .tori { display: block; } .s1 .tori .flbox { width: 100%; text-align: center; } } /* =================================================================== s2 =================================================================== */ .s2 { background-color: #31333F; padding: 50px 0px; text-align:center; } .s2 h1 { margin: 20px 0 20px; letter-spacing: 2px; font-size: 30px; line-height: 1.9; color: #FFCC00; font-weight: bold; } .s2 .f-red { color: #F14426; background: url(../images/under-nami.jpg) center bottom no-repeat; padding-bottom: 20px; } .s2 p { font-size: 18px; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s2 { background-color: #31333F; padding: 20px 0; text-align: center; position: relative; height: auto; padding-top: 20px; } .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: 17px; } .s2 .f-red { color: #F14426; background: none; padding-bottom: 20px; } } /* =================================================================== s3 =================================================================== */ .s3 { padding-top:65px; } .s3 h1 { margin: 20px 0 20px; color: #333; font-weight:800; letter-spacing: 2px; font-size:35px; } .s3 .maebure .left { width:48%; float:left; } .s3 .maebure .left h2 { background-color:#CCCCCC; padding:20px 0px; text-align:center; font-size:21px; } .s3 .maebure .right { width:48%; float:right; } .s3 .maebure .right h2 { background-color:#CCCCCC; padding:20px 0px; text-align:center; font-size:21px; } .s3 .maebure div img { margin-bottom:20px; } .s3 .maebure div p { text-align:left; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s3 { background: none; background-color:#fff; text-align:center; padding-top:65px; } .s3 .maebure .left { width: 100%; float: none; } .s3 .maebure .right { width: 100%; float: none; } .s3 .area01 { background: url(../images/s3_area01_bg.jpg) center bottom no-repeat; background-size:cover; height:118px; width:100%; text-align:center; padding-top:12px; margin:0 auto; } .s3 .area01 p { font-size: 25px; font-weight: 800; letter-spacing: 2px; } } /* =================================================================== s4 =================================================================== */ .s4 { padding-top:60px; text-align:center; background: url(../images/s4-area01-bg.jpg) no-repeat center bottom; padding-bottom: 140px; } .s4 .grey-back { background-color:#31333F; padding: 50px 0px; text-align:center; } .s4 .grey-back h2 { font-size:26px; color:#FFCC00; font-weight:bold; margin-bottom:0px; } .s4 .area01 { padding-top:75px; padding-left:10%; padding-right:10%; } .s4 .area01 h3 { font-size: 2.6rem; padding-top:25px; } .s4 .area01 p { font-size: 1.8rem; text-align:left; } .s4 .area02 { padding-top:75px; display:flex; } .s4 .area02 .left { width:40%; } .s4 .area02 .right { width:60%; } .s4 .area02 .right .area02-text01 { font-size:19px; font-weight:bold; } .s4 .area02 .right .area02-text02 { font-size:45px; font-weight:bold; letter-spacing: 4px; } .s4 h1 { font-size: 46px; color:333; font-weight:800; } .s4 h4 { font-size: 35px; color:333; font-weight:800; } .s4 .merit { display: flex; } .s4 .merit dl { width: 22.75%; background-color: #C0DB8C; text-align: center; padding-top: 40px; padding-right: 15px; padding-bottom: 30px; padding-left: 15px; margin-left:3%; } .s4 .merit dl dt { font-size:25px; font-weight:bold; } @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; background: none ; background-color:#eee; padding-top:0px; } .s4 h1 { font-size: 31px; color: #333; font-weight: 800; } .s4 p { font-size: 1.8rem; text-align:left; } .s4 p br { display:none; } .s4 .grey-back h2 { font-size: 20px; color: #FFCC00; font-weight: bold; margin-bottom: 0px; padding: 0 20px; line-height: 1.5; text-align: left; } .s4 .area01 { padding-top: 75px; padding-left: 0; padding-right: 0; } .s4 h4 { font-size: 29px; color: #333; font-weight: 800; } .s4 .area02 { padding-top: 10px; display: block; } .s4 .area02 .left { width: 100%; } .s4 .area02 .right { width: 100%; } .s4 .area02 .right .area02-text02 { font-size: 45px; font-weight: bold; letter-spacing: 4px; text-align: center; } } /* =================================================================== s5 =================================================================== */ .s5 { background: url(../images/s5_bg.jpg) center top repeat-x; padding-bottom:100px; } .gentei{ position:absolute; top:-30px; left: 0; right: 0; margin: auto; } .s5 h1 { margin: 0px 0 70px; font-size: 40px; text-align: center; color: #333; letter-spacing: 2px; font-weight:800; padding-top: 50px; } .s5 h1 .yellow-h1 { font-size:73px; font-weight:bold; color:#FFCC00; } .s5 .area01 { width:1000px; margin:0 auto; padding-bottom: 20px; text-align:center; } .s5 .area02 { width:1000px; margin:0 auto; padding:40px 80px; background-color:#FFF; text-align:center; } .s5 .area02 p { width:70%; margin:0px auto 40px; } .s5 .area02 h5 { font-size:21px; font-weight:800; color:#339104; } .s5 .area02 ul { width:100%; display:flex; } .s5 .area02 ul li { width: 32%; margin-left: 2%; padding: 20px 10px 15px 10px; border: 4px solid #5085CE; border-radius: 10px; text-align: left; font-size: 1.6rem; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s5 { padding: 60px 0; } .s5 h1 { font-weight: bold; height: auto; line-height: 1.4; font-size: 30px; margin-bottom: 1.5em; } .s5 .area01 { width:100%; margin:0 auto; padding-bottom: 20px; } .s5 .area01 p { font-size:1.1rem; } .s5 .area02 { width: 100%; margin: 0 auto; padding: 40px 15px; background-color: #FFF; text-align: center; } .s5 .area02 ul { width:100%; display:block; } .s5 .area02 ul li { width: 100%; margin-left: 0%; padding:13px; border: 4px solid #5085CE; border-radius: 10px; text-align: left; font-size: 1.6rem; } .s5 h1 .yellow-h1 { font-size :16vw; } } /* =================================================================== s6 =================================================================== */ .s6 { padding: 0; text-align: center; position: relative; background-image: url(../images/s4_area01_bg.jpg); background-repeat:repeat; padding-bottom:2.5rem; } .s6 .grey-back { background-color:#31333F; padding: 50px 0px; text-align:center; } .s6 .grey-back h2 { font-size:26px; color:#FFCC00; font-weight:bold; margin-bottom:0px; } .s6 .container { width:1000px; } .s6 h4 { letter-spacing: 2px; text-align:center; 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; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s6 .container { width:100%; } .s6 h4 { letter-spacing: 2px; text-align: center; font-weight: 700; font-size: 29px; margin-bottom: 1rem; } .s6 h1 { font-size: 3.2rem; margin-bottom: 60px; } .s6 .nagare { display: block; } .s6 .nagare dl { width: 100%; text-align: center; margin-left: 0%; margin-bottom:50px; } } /* =================================================================== s11 =================================================================== */ .s11 { padding: 50px 0; background: #666; color: #fff; } .s11 .box { width: 1000px; padding: 40px; margin: 0 auto; } .s11 .box h2 { letter-spacing: 2px; font-size: 2.2rem; font-weight: bold; text-align: center; padding-bottom: 10px; border-bottom: 1px solid #fff; margin-bottom: 20px; } .s11 .box > p { text-align: center; font-size: 1.3rem; margin-bottom: 20px; } .s11 .box ul:after { content: ""; display: block; clear: both; } .s11 .box ul li { width: 400px; float: left; } .s11 .box ul li:last-child { float: right; } .s11 .box ul li dl { padding-bottom: 5px; border-bottom: 1px solid #fff; margin-bottom: 20px; } .s11 .box ul li dl:after { content: ""; display: block; clear: both; } .s11 .box ul li dl dt { float: left; font-size: 1.4rem; font-weight: bold; width: 50%; line-height: 2.4; } .s11 .box ul li dl dd { float: left; font-size: 1.5rem; font-weight: bold; } .s11 .box ul li dl dd a img { margin-right: 5px; } .s11 .box ul li p { font-size: 1.3rem; } .s11 .box .row .column { display: block; flex: 1 1 auto; margin-left: auto; max-width: 70%; width: 50%; margin-right: auto; } .footer-btn a h3 { background: #fff; display: block; padding: 15px 0; text-align: center; font-size: 16px; letter-spacing: 2px; font-weight: 600; border-radius: 100px; } .footer-btn a h3 { display: block; position: relative; padding: 0.8em; text-align: center; text-decoration: none; color: #fff; border: 1px solid #663399; background: #663399; overflow: hidden; z-index: 1 !important; } .footer-btn a h3:after { content: ""; position: absolute; top: 50%; left: 50%; height: 0; width: 100%; background : #fff; opacity: 0; transform: translateX(-50%) translateY(-50%) rotate(45deg); transition: 0.3s; z-index: -1; } .footer-btn a h3:hover { color: #663399; } .footer-btn a h3:hover:after { height: 500%; opacity: 1; } .footer-btn a h3:active:after { height: 500%; opacity: 1; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { .s11 { padding: 3em 0; background: #333; } .s11 .box { width: 95%; padding: 2em; margin: 0 auto; } .s11 .box h2 { font-size: 1.8rem; font-weight: bold; text-align: center; padding-bottom: 10px; border-bottom: 1px solid #fff; margin-bottom: 20px; } .s11 .box > p { text-align: left; font-size: 1.3rem; margin-bottom: 2em; } .s11 .box ul li { width: 100%; float: none; } .s11 .box ul li:last-child { float: none; } .s11 .box ul li dl { padding-bottom: 5px; border-bottom: 1px solid #fff; margin-bottom: 20px; } .s11 .box ul li dl dt { float: none; font-size: 1.3rem; font-weight: bold; width: 100%; line-height: 1.6; margin-bottom: 0.5em; } .s11 .box ul li dl dd { float: none; font-size: 1.8rem; font-weight: bold; } .s11 .box ul li dl dd a img { margin-right: 5px; } .s11 .box ul li p { font-size: 1.3rem; margin-bottom: 2em; } .s11 .box ul li:last-child p { margin-bottom: 0; } .s11 .box .row .column { display: block; flex: 1 1 auto; margin-left: auto; max-width: 100%; width: 100%; margin-right: auto; } .footer-btn span { font-size: 10px; } .footer-btn strong { display: block; } } .green { color:#339104; } .red { color:#F14426; } .bold { font-weight:bold; } .fs60 { font-size:60px; } .mb30 { margin-bottom:30px; } footer { width: 100%; background-color:#333; } footer .container { width: 1000px; margin: 0 auto; padding-top: 20px; height: 70px; } footer .container .left { float:left; color:#fff; margin: 0; } footer .container .right { float:right; color:#fff; font-size:9px; } .contactsp { position:relative; display:none; } /* =================================================================== # Responsive =================================================================== */ @media screen and (max-width:768px) { footer .container { width: 100%; margin: 0 auto; } footer .container .left { float: none; color: #fff; font-size: 1rem; text-align: center; margin: 0; } footer .container .right { float:none; color:#fff; font-size:10px; text-align:center; margin-bottom:0px; } .contactsp { position:relative; display:block; } .contactsp img { position: fixed; bottom:0; z-index:100; } }