﻿.topBox1{position:relative;width:100%;text-align:center;padding:50px 20px;background:url("../images/common/bg1.webp") repeat center;color:#FFF;z-index:2}.no-webp .topBox1{background:url("../images/common/bg1.png") repeat center}@media screen and (max-width: 768px){.topBox1{text-align:left;padding:50px 20px 10px}}.topBox1:before{background:url("../images/common/bg1.webp") repeat center;content:"";display:block;position:absolute;top:-385px;left:0;width:100%;height:390px;z-index:2;mask-image:url("../images/content/top_bg.webp");mask-repeat:no-repeat;mask-position:0 bottom;mask-size:100%;-webkit-mask-image:url("../images/content/top_bg.webp");-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 bottom;-webkit-mask-size:100%}.no-webp .topBox1:before{background:url("../images/common/bg1.png") repeat center}.no-webp .topBox1:before{mask-image:url("../images/content/top_bg.png");mask-repeat:no-repeat;mask-position:0 bottom;mask-size:100%;-webkit-mask-image:url("../images/content/top_bg.png");-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 bottom;-webkit-mask-size:100%}@media screen and (max-width: 768px){.topBox1:before{top:-98px;height:100px}}.topBox1 h2{font-family:'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:36px;font-weight:600;padding:0 0 50px}@media screen and (max-width: 768px){.topBox1 h2{font-size:24px;text-align:center;padding:0 0 20px}}.topBox1 p{padding:0 0 30px;line-height:250%}@media screen and (max-width: 768px){.topBox1 p{line-height:180%;font-size:15px}}.topBox1 .img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-transform:translate(0%, -50%);-moz-transform:translate(0%, -50%);-ms-transform:translate(0%, -50%);-o-transform:translate(0%, -50%);transform:translate(0%, -50%);width:650px;height:auto}@media screen and (max-width: 1320px){.topBox1 .img{width:550px}}@media screen and (max-width: 1120px){.topBox1 .img{width:450px}}@media screen and (max-width: 950px){.topBox1 .img{width:350px}}@media screen and (max-width: 768px){.topBox1 .img{width:250px;-webkit-transform:translate(-30%, -50%);-moz-transform:translate(-30%, -50%);-ms-transform:translate(-30%, -50%);-o-transform:translate(-30%, -50%);transform:translate(-30%, -50%)}}.topBox2{position:relative;padding:50px 0 100px;overflow:hidden}@media screen and (max-width: 1110px){.topBox2{padding:50px 20px 100px}}@media screen and (max-width: 768px){.topBox2{padding:30px 20px 50px}}.topBox2 .inner{position:relative;z-index:2}.topBox2 .inner .inBox{display:flex;justify-content:space-between;flex-wrap:wrap;padding:50px 0}@media screen and (max-width: 768px){.topBox2 .inner .inBox{padding:20px 0}}.topBox2 .inner .inBox .txBox{width:55%}@media screen and (max-width: 768px){.topBox2 .inner .inBox .txBox{width:100%;order:2}}.topBox2 .inner .inBox .txBox h3{font-family:'M PLUS Rounded 1c',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:24px;font-weight:600;text-align:center;color:#FFF;background:url("../images/common/bg1.webp") repeat center;padding:20px;border-radius:50px;margin:0 0 30px}.no-webp .topBox2 .inner .inBox .txBox h3{background:url("../images/common/bg1.png") repeat center}@media screen and (max-width: 768px){.topBox2 .inner .inBox .txBox h3{font-size:18px;padding:10px;margin:0 0 15px}}.topBox2 .inner .inBox .txBox p{padding:0 30px;line-height:220%}@media screen and (max-width: 768px){.topBox2 .inner .inBox .txBox p{padding:0.5em 10px;font-size:15px;line-height:200%}}.topBox2 .inner .inBox .imgBox{width:40%;text-align:center}@media screen and (max-width: 768px){.topBox2 .inner .inBox .imgBox{padding:0 0 30px;width:100%;order:1}}.topBox2 .inner .inBox.sec .txBox{order:2}.topBox2 .inner .inBox.sec .imgBox{order:1}.topBox2 .img1{position:absolute;top:-200px;left:-400px}@media screen and (max-width: 768px){.topBox2 .img1{top:150px;left:-100px;width:600px;height:auto}}.topBox2 .img2{position:absolute;bottom:0px;right:-400px}@media screen and (max-width: 768px){.topBox2 .img2{right:-100px;width:600px;height:auto}}.topBox3{position:relative;padding:0;overflow:hidden}.topBox3 h2{font-family:'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:60px;color:#434243;font-weight:500}@media screen and (max-width: 768px){.topBox3 h2{font-size:36px}}.topBox3 .inner{padding:20px 0;position:relative}@media screen and (max-width: 1110px){.topBox3 .inner{padding:20px}}.topBox3 .inner .btnBox{position:absolute;right:0;top:50%}@media screen and (max-width: 768px){.topBox3 .inner .btnBox{right:20px;top:35px}}.topBox3 .blog_slider{background-color:#efefef;padding:80px 0 50px}.topBox3 .blog_slider .slick-list{margin:0 0 50px}.topBox3 .blog_slider .slick-slide{padding:0 20px}.topBox3 .blog_slider .slick-slide a:hover .imgBox img{height:110%;-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out}.topBox3 .blog_slider .slick-slide .imgBox{height:220px;margin:0 0 20px;border-radius:20px;overflow:hidden;position:relative}.topBox3 .blog_slider .slick-slide .imgBox img{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:none;height:105%;width:auto}.topBox3 .blog_slider .slick-slide .txBox .time{font-size:12px;color:#616262}.topBox3 .blog_slider .slick-slide .txBox .cate{padding:5px 0 10px;display:flex;justify-content:flex-start}.topBox3 .blog_slider .slick-slide .txBox .cate span{margin:0 5px 3px 0;padding:2px 10px 0;border-radius:5px;font-size:10px;background-color:#f5c23f}.topBox3 .blog_slider .slick-slide .txBox .tx{font-size:15px}.topBox3 .blog_slider .slick-arrow{display:none !important}.topBox4{position:relative;padding:100px 0 0;overflow:hidden}@media screen and (max-width: 768px){.topBox4{padding:30px 0 0}}.topBox4 h2{font-family:'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:60px;color:#434243;font-weight:500}@media screen and (max-width: 768px){.topBox4 h2{font-size:36px}}.topBox4 .inner{padding:20px 0;position:relative;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}@media screen and (max-width: 1110px){.topBox4 .inner{padding:20px}}.topBox4 .inner .title{width:25%}@media screen and (max-width: 768px){.topBox4 .inner .title{width:100%}}@media screen and (max-width: 768px){.topBox4 .inner .btnBox{right:20px;position:absolute;top:30px}}.topBox4 .inner .newsArea{width:70%}@media screen and (max-width: 768px){.topBox4 .inner .newsArea{width:100%}}.topBox4 .inner .newsArea ul li{border-bottom:1px dotted #d2d2d2}.topBox4 .inner .newsArea ul li a{display:flex;justify-content:space-between;align-items:center;padding:30px 0}.topBox4 .inner .newsArea ul li a .imgBox{width:100px;height:100px;border-radius:20px;overflow:hidden;position:relative}@media screen and (max-width: 768px){.topBox4 .inner .newsArea ul li a .imgBox{width:70px;height:70px}}.topBox4 .inner .newsArea ul li a .imgBox img{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:none;height:105%;width:auto}.topBox4 .inner .newsArea ul li a .txBox{width:80%}@media screen and (max-width: 768px){.topBox4 .inner .newsArea ul li a .txBox{width:70%}}.topBox4 .inner .newsArea ul li a .txBox .time{font-size:12px;color:#616262;padding:0 0 10px}.topBox4 .inner .newsArea ul li a:hover .imgBox img{height:110%;-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out}.btnBox a{position:relative;display:inline-block;padding:8px 0 0 50px}@media screen and (max-width: 768px){.btnBox a{padding:8px 0 0 35px}}.btnBox a span{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;border-bottom:1px solid #000}@media screen and (max-width: 768px){.btnBox a span{font-size:14px}}.btnBox a:before{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;content:"";position:absolute;top:0;left:0;width:35px;height:35px;background-color:#24b6b5;border-radius:50%}@media screen and (max-width: 768px){.btnBox a:before{width:25px;height:25px;top:5px}}.btnBox a:after{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;content:"";position:absolute;top:10px;left:14px;background-color:#FFF;width:10px;height:13px;clip-path:polygon(0 0, 0% 100%, 100% 50%)}@media screen and (max-width: 768px){.btnBox a:after{left:9px}}.btnBox a:hover span{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;border-color:#24b6b5}.btnBox a:hover:before{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;left:5px}.btnBox a:hover:after{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;left:19px}@media screen and (max-width: 768px){.btnBox a:hover:after{left:14px}}
