#main_mv{position: relative;height: 650px;} #main_mv .mv img{object-fit: cover;width: 100%!important; height: 650px!important} #main_mv h2{position: absolute;width: 80%;z-index: 2; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} #main_mv .mvilla{position: absolute;left: 0;right: 0;margin: auto;bottom: -10%; z-index: 2} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #main_mv{position: relative;height: 360px;} #main_mv .mv img{object-fit: cover;width: 100%!important; height: 360px!important} #main_mv h2{position: absolute;width: 80%;} #main_mv h2 img{width: 100%} #main_mv .mvilla img{width: 90%} } .mvslider{ width: 100%;} .mvslider .items{ position: relative; overflow: hidden; width: 100%; padding-bottom: 70%;} .mvslider .item{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease-in-out;} .mvslider .current{ opacity: 1;} @media screen and (max-width: 768px) {/*スマホのスタイル*/ .mvslider .items{ padding-bottom: 100%;} } #main_area{background: url("../images_n/area_bg.png");padding: 100px 0 80px;text-align: center;} #main_area h2{font-size: 5rem;font-weight: bold; letter-spacing: 0.1em;color: #fff} #main_area .txt{font-size: 2rem;font-weight: bold; letter-spacing: 0.1em;color: #fff} #main_area .map{padding: 70px 0} .copy{font-size: 1.3rem;padding: 12px 0;text-align: left;color: #000} #main_area h3{font-size: 2.3rem;font-weight: bold; letter-spacing: 0.1em;padding: 12px 0 0;color: #000} #main_area ul li.col3{flex-grow: 3;text-align: center;padding:2%;margin-bottom:0px} #main_area ul li.col3.area1{background: #9fa3b9} #main_area ul li.col3.area2{background: #e88b83} #main_area ul li.col3.area3{background: #f8bb1a} #main_area ul li.col3.area4{background: #926ea7} #main_area ul li.col3.area5{background: #a29c5a} #main_area ul li.col3{} #main_area ul li img{width: 100%;height: 260px;object-fit: cover} #main_area a{display: block;border: 1px solid #000;background: #fff;color: #000;padding: 10px 0;border-radius: 30px;font-size: 1.3rem;font-weight: bold;margin-top: 12px;position: relative;} #main_area a::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 10px; width: 7px; height: 7px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); } #main_area ul li.col3:nth-child(1), #main_area ul li.col3:nth-child(4){border-left: none} #main_area a:hover{opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;filter: alpha(opacity=50);-ms-filter: "alpha(opacity=50)"} #main_area a { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } @media screen and (max-width: 768px) {/*スマホのスタイル*/ #main_area{padding: 60px 0 20px;} #main_area h2{font-size: 2rem} #main_area .map area{display: none} #main_area ul li.col3{width: 100%} #main_area ul li.col3{border-left: none; padding-bottom: 30px; } #main_area ul li img{height: 160px;} } #main_news{padding: 80px 0 80px;text-align: center;} #main_news .scroll { overflow: auto; height: 180px; padding-right: 30px; -webkit-overflow-scrolling:touch} #main_news h2{font-size: 3rem;font-weight: bold; letter-spacing: 0.1em;font-family: 'Fira Sans Condensed', sans-serif;margin-bottom: 30px} #main_news dl{margin-top: 10px;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap:wrap;align-items: center;justify-content: space-between;-webkit-justify-content: space-between;border-bottom: 1px solid #ececec;padding-bottom: 10px;} #main_news dl dt{width: 10%;text-align: left;font-weight: bold} #main_news dl dd{width: 88%;text-align: left;} #main_news .bnt{margin-top: 60px} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #main_news{padding: 40px 0;} #main_news .scroll {height: 230px;} #main_news dl dt{width: 100%;text-align: left;} #main_news dl dd{width: 96%;text-align: left;margin-left: 3%} #main_news .bnt{width: 70%;margin: auto} #main_news .bnt .col3{margin-top: 20px; width: 100%} } #main_kikan{background: url("../images_n/kikan_bg.png");padding: 80px 0 80px;text-align: center;} #main_kikan h2{font-size: 4rem;font-weight: bold; letter-spacing: 0.1em;color: #A30505} #main_kikan .txt{font-size: 2rem;font-weight: bold; letter-spacing: 0.1em;margin-bottom: 30px} #main_kikan h3{font-size: 2rem;font-weight: bold; letter-spacing: 0.1em;border-bottom: 1px solid #000;padding-top: 12px; padding-bottom: 8px;margin-bottom: 8px} #main_kikan li p{font-size: 1.5rem;} #main_kikan li img{width: 100%;height: 150px;object-fit: cover} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #main_kikan{padding: 40px 0;} #main_kikan h2{font-size: 2rem} #main_kikan .txt, #main_kikan h3{font-size: 1.7rem;} #main_kikan li p{font-size: 1.3rem;} #main_kikan .col5{width: 48%;padding-bottom: 20px} } #main_program{background: url("../images_n/bg_program.jpg");background-size: cover; padding: 80px 0 80px;text-align: center;} #main_program h2{font-size: 4rem;line-height: 1.4; font-weight: bold; letter-spacing: 0.1em;color: #A30505;margin-bottom: 10px} #main_program .txt{font-size: 2rem;font-weight: bold; letter-spacing: 0.1em;margin-bottom: 30px} #main_program h3{font-size: 2rem;font-weight: bold; letter-spacing: 0.1em;border-bottom: 1px solid #000;padding-top: 12px; padding-bottom: 8px;margin-bottom: 8px} #main_program li p{font-size: 1.5rem;text-align: left} #main_program .slider .slick-slide{ height:auto!important; } #main_program .slider .slick-arrow{ z-index:2!important; } #main_program .slider .slick-next{ right:0!important; } #main_program .slider .slick-prev{ left:0!important; } #main_program .slider .slick-slide{ margin-right: 1vw!important; margin-left: 1vw!important; } #main_program .slick-arrow:before{ content:""!important;} #main_program .slick-arrow:before{ content:""!important; width: 100%!important; height: 100%!important; position: absolute; top: 0; left: 0;} #main_program .slick-next:before{ background: url("../images_n/arrow_r.png")!important; background-size: contain!important;} #main_program .slick-prev:before{ background: url("../images_n/arrow_l.png")!important; background-size: contain!important;} #main_program .slick-arrow{ z-index:2!important; width:60px!important; height:60px!important;} #main_program .slick-next{ right:-30px!important;} #main_program .slick-prev{ left:-30px!important;} #main_program .slick-arrow:before{ opacity:1!important;} #main_program li img{width: 100%;height: 230px;object-fit: cover} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #main_program{padding: 40px 0;} #main_program h2{font-size: 2rem} #main_program .txt, #main_program h3{font-size: 1.5rem;} #main_program .slider{width: 80%;margin: auto} #main_program li img{width: 100%;height: 190px;object-fit: cover} } #main_colum{background: url("../images_n/colum_bg.jpg");padding: 80px 0 80px;text-align: center;} #main_colum h2{font-size: 4rem;line-height: 1.4; font-weight: bold; letter-spacing: 0.1em;color: #A30505;margin-bottom: 30px;position: relative} #main_colum h2 span{font-size: 6rem} #main_colum h2 .illa{position: absolute;right: 20%;top: 0px} #main_colum h3{font-size: 2rem;font-weight: bold; letter-spacing: 0.1em;padding-top: 12px;} #main_colum li img{width: 100%;height: 230px;object-fit: cover} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #main_colum{padding: 40px 0;} #main_colum h2{font-size: 2rem} #main_colum h2 span{font-size: 4rem} #main_colum h2 .illa{right: 5%;top: 0px} #main_colum .txt, #main_colum h3{font-size: 1.5rem;} #main_colum .col3{width: 48%;padding-bottom: 20px} #main_colum li img{width: 100%;height: 150px;object-fit: cover} } .btmore{width: 76%;margin: 60px auto 0;border: 1px solid #000;padding: 10px 0} .btmore a{display: block;font-size: 1.8rem;font-weight: bold;letter-spacing: 0.1em;position: relative} .btmore a::after { /* くの字の表示設定 */ content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 10px; width: 7px; /* くの字を山なりに見た時、左側の長さ */ height: 7px; /* くの字を山なりに見た時、右側の長さ */ border-top: 1px solid #000; /* くの字を山なりに見た時、左側の太さと色 */ border-right: 1px solid #000; /* くの字を山なりに見た時、右側の太さと色 */ transform: rotate(45deg); /* くの字の向き */ } @media screen and (max-width: 768px) {/*スマホのスタイル*/ .btmore{width: 90%;margin: 40px auto 0;} .btmore a{font-size: 1.4rem;} } #main_voice{padding: 80px 0 80px;} #main_voice h2{font-size: 4rem;line-height: 1.4; font-weight: bold; letter-spacing: 0.1em;margin-bottom: 30px;display:inline-block;border-bottom: 1px dotted #000;border-top: 1px dotted #000;padding: 10px 30px;position: relative} #main_voice h2 .illa{position: absolute;right: -100px;top: 0px} #main_voice .txt{font-size: 2rem;font-weight: bold; letter-spacing: 0.1em;margin-bottom: 30px;color: #A30505;position: relative;display: inline-block;padding: 0 45px;} #main_voice .txt:before, #main_voice .txt:after {content: '';position: absolute;top: 50%;display: inline-block;width: 44px;height: 2px;background-color: #A30505;} #main_voice .txt:before {-webkit-transform: rotate(60deg);transform: rotate(60deg);left:0;} #main_voice .txt:after {-webkit-transform: rotate(-60deg);transform: rotate(-60deg);right: 0;} #main_voice h3{font-size: 1.5rem;font-weight: bold; letter-spacing: 0.1em;padding-top: 12px;text-align: left;} #main_voice .photo{position: relative;margin-bottom: 30px} #main_voice .photo:after {content: '';position: absolute;bottom:-30px;left: -20px;background: url("../images_n/illa_post2.svg") no-repeat center center;background-size: contain;width: 124px;height: 76px;} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #main_voice{padding: 40px 0;} #main_voice h2{font-size: 2rem;display: block;text-align: left} #main_voice h2 .illa{position: absolute;right: 0px;top: -10px} #main_voice .txt{font-size: 1.3rem;} #main_voice h3{font-size: 1.3rem;} #main_voice .txt:before, #main_voice .txt:after {width: 26px;} #main_voice .col3{width: 48%;padding-bottom: 30px} #main_voice h3{padding-top: 6px;} #main_voice .photo:after {left: 0px;width:80px;height: 50px;} } #main_point{background: #A30505;padding: 60px 0 80px;text-align: center;color: #fff} #main_point h2{font-size: 4rem;font-weight: bold; letter-spacing: 0.1em;} #main_point .txt{font-size: 2rem;font-weight: bold;letter-spacing: 0.1em;margin-bottom: 0px} #main_point h3{font-size: 1.8rem;font-weight: bold; letter-spacing: 0.1em;padding: 12px 0;} #main_point li{margin-top: 30px} #main_point li p{text-align: left;} #main_point .btmore{border: 1px solid #fff} #main_point .btmore a{color: #fff} #main_point .btmore a::after { /* くの字の表示設定 */ border-top: 1px solid #fff; /* くの字を山なりに見た時、左側の太さと色 */ border-right: 1px solid #fff; /* くの字を山なりに見た時、右側の太さと色 */ } @media screen and (max-width: 768px) {/*スマホのスタイル*/ #main_point{padding: 40px 0;} #main_point h2{font-size: 2rem} #main_point .txt{font-size: 1.3rem;} #main_point h3{font-size: 1.3rem;} #main_point .col5{width: 48%;padding-bottom: 20px} }