@charset "UTF-8"; body { overflow-x: hidden; } * { position: relative; } /* トグルメニューアイコン */ .nav-menu-btn { background: #fff; right: 0; top: 0; width: 40px; height: 36px; } [aria-expanded=true] { background: none; } .top-section-heading { font-size: 42px; font-size: 4.2rem; font-family: 'Noto Serif JP', serif; font-weight: normal; } @media screen and (min-width: 480px) and (max-width: 1200px) { .top-section-heading { font-size: 5.25px; font-size: 3.36rem; } } @media screen and (max-width: 767px) { .top-section-heading { font-size: 25px; font-size: 2.5rem; margin-bottom: 20px; } } @media screen and (max-width: 767px) and (min-width: 480px) and (max-width: 1200px) { .top-section-heading { font-size: 3.125px; font-size: 2rem; } } .top-heading01 { position: relative; margin-bottom: 4em; } @media print, screen and (min-width: 768px) { .top-heading01 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 80%; } } .top-heading01 .top-section-heading { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media print, screen and (min-width: 768px) { .top-heading01 .top-section-heading { width: 45%; } } @media screen and (max-width: 767px) { .top-heading01 .top-section-heading { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .top-heading01 .top-section-lead { margin: 0; } .white-box { position: relative; } .white-box::before { display: block; content: ''; width: 80%; position: absolute; top: 0; bottom: 0; background: #fff; } .white-box.-left { left: 0; } .white-box.-right::before { right: 0; } @media screen and (max-width: 767px) { .btn-02 { width: 50%; } } .keyvisual { background: url(../../img/top/img_keyv01.jpg) no-repeat 50% 50%; background-size: cover; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; } @media screen and (max-width: 767px) { .keyvisual { height: 500px; background: url(../../img/top/img_keyv01_sp.jpg) no-repeat 50% 50%; background-size: cover; } } .keyvisual .logo-top img { width: 465px; } @media screen and (max-width: 767px) { .keyvisual .logo-top img { width: 80vw; } } .slick-dots { bottom: 6px; } .slick-dots li button::before { opacity: 1; } .slick-dots li.slick-active button::before { color: #fff; opacity: 1; } .header-logo { display: none; } section.sec01 dl dt { font-weight: bold; font-size: 20px; font-size: 2rem; } @media screen and (min-width: 480px) and (max-width: 1200px) { section.sec01 dl dt { font-size: 2.5px; font-size: 1.6rem; } } section.sec01 dl dd { font-size: 13px; font-size: 1.3rem; margin-top: 20px; } @media screen and (min-width: 480px) and (max-width: 1200px) { section.sec01 dl dd { font-size: 1.625px; font-size: 1.04rem; } } section.sec01 .img01 { margin-top: 4em; background: url(../../img/top/img01.jpg) no-repeat 50% 50%; background-size: cover; height: 382px; } @media print, screen and (min-width: 768px) { section.sec01 .img01 { margin-right: calc(50% - 50vw); } } @media screen and (max-width: 767px) { section.sec01 .img01 { height: 140px; margin-left: -10px; margin-right: -10px; } } section.sec02 { margin-top: 8em; margin-bottom: 6em; padding-top: 6em; padding-bottom: 6em; } section.sec03 ul.cat-list { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } section.sec03 ul.cat-list li { list-style: none; width: 25%; } @media screen and (max-width: 767px) { section.sec03 ul.cat-list li { width: 50%; } } section.sec03 ul.cat-list li .cat-list-item { padding: 0 10px; } @media screen and (max-width: 767px) { section.sec03 ul.cat-list li .cat-list-item { padding: 0 5px; } } section.sec03 ul.cat-list li .cat-list-item .thumb { display: block; content: ''; padding-bottom: 100%; } @media screen and (max-width: 767px) { section.sec03 ul.cat-list li .cat-list-item .thumb { padding-bottom: 62.5%; } } section.sec03 ul.cat-list li .cat-list-item .title { font-size: 18px; font-size: 1.8rem; margin-top: 15px; font-weight: bold; } @media screen and (min-width: 480px) and (max-width: 1200px) { section.sec03 ul.cat-list li .cat-list-item .title { font-size: 2.25px; font-size: 1.44rem; } } @media screen and (max-width: 767px) { section.sec03 ul.cat-list li .cat-list-item .title { font-size: 13px; font-size: 1.3rem; } } @media screen and (max-width: 767px) and (min-width: 480px) and (max-width: 1200px) { section.sec03 ul.cat-list li .cat-list-item .title { font-size: 1.625px; font-size: 1.04rem; } } section.sec03 ul.cat-list li .cat-list-item .lead { margin-top: 15px; } @media screen and (max-width: 767px) { section.sec03 ul.cat-list li .cat-list-item .lead { font-size: 11px; font-size: 1.1rem; } } @media screen and (max-width: 767px) and (min-width: 480px) and (max-width: 1200px) { section.sec03 ul.cat-list li .cat-list-item .lead { font-size: 1.375px; font-size: 0.88rem; } } @media print, screen and (min-width: 768px) { section.sec03 ul.cat-list li.cat01, section.sec03 ul.cat-list li.cat02, section.sec03 ul.cat-list li.cat03 { width: calc(100% / 3); } } @media print, screen and (min-width: 768px) { section.sec03 ul.cat-list li.cat01 .thumb, section.sec03 ul.cat-list li.cat02 .thumb, section.sec03 ul.cat-list li.cat03 .thumb { padding-bottom: 62.5%; } } section.sec03 ul.cat-list li.cat01 .thumb { background: url(../../img/top/cat01.jpg) no-repeat 50% 50%; background-size: cover; } section.sec03 ul.cat-list li.cat02 .thumb { background: url(../../img/top/cat02.jpg) no-repeat 50% 50%; background-size: cover; } section.sec03 ul.cat-list li.cat03 .thumb { background: url(../../img/top/cat03.jpg) no-repeat 50% 50%; background-size: cover; } section.sec03 ul.cat-list li.cat04 .thumb { background: url(../../img/top/cat04.jpg) no-repeat 50% 50%; background-size: cover; } section.sec03 ul.cat-list li.cat05 .thumb { background: url(../../img/top/cat05.jpg) no-repeat 50% 50%; background-size: cover; } section.sec03 ul.cat-list li.cat06 .thumb { background: url(../../img/top/cat06.jpg) no-repeat 50% 50%; background-size: cover; } section.sec03 ul.cat-list li.cat07 .thumb { background: url(../../img/top/cat07.jpg) no-repeat 50% 50%; background-size: cover; } section.sec04 { margin-top: 8em; margin-bottom: 6em; } section.sec04 .white { background: #fff; padding-top: 6em; padding-bottom: 6em; } @media screen and (max-width: 767px) { section.sec04 .white { text-align: center; padding-bottom: 2em; } } @media print, screen and (min-width: 768px) { section.sec04 .kiso-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-right: -120px; } } section.sec04 .kiso-img { z-index: 20; background: url(../../img/top/kiso_img.jpg) no-repeat 50% 50%; background-size: cover; content: ''; padding-bottom: 50%; } @media print, screen and (min-width: 768px) { section.sec04 .kiso-img { width: calc(50% + 120px); -webkit-transform: translate(-120px, -135px); -ms-transform: translate(-120px, -135px); transform: translate(-120px, -135px); } } @media screen and (max-width: 767px) { section.sec04 .kiso-img { padding-bottom: 60%; } } section.sec04 .kiso-body { z-index: 10; background: url(../../img/top/kiso_bg.jpg) no-repeat 50% 50%; background-size: cover; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media print, screen and (min-width: 768px) { section.sec04 .kiso-body { width: 60%; padding-right: 120px; } } @media screen and (max-width: 767px) { section.sec04 .kiso-body { padding-bottom: 4em; } } section.sec05 { margin-top: 8em; margin-bottom: 6em; padding-top: 6em; padding-bottom: 6em; } @media print, screen and (min-width: 768px) { section.sec05 .top-heading01 { margin-left: 30%; } } section.sec06 .top-section-heading::after { content: ''; height: 1px; width: calc( 100% - 4em); background: #333; position: absolute; top: 0.8em; right: 0; } section.sec06 .blog-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } section.sec06 .blog-list .blog-item { width: calc(100% / 3); } @media screen and (max-width: 767px) { section.sec06 .blog-list .blog-item { width: 50%; } } section.sec06 .blog-list .blog-item .entry-body { background: #fff; padding: 0 30px 30px; margin: 20px 10px; width: 100%; } @media screen and (max-width: 767px) { section.sec06 .blog-list .blog-item .entry-body { margin: 6px 3px; padding: 0 10px 10px; } } @media screen and (max-width: 767px) { section.sec06 .blog-list .blog-item .entry-body .entry-heading .cat { padding: 2px 10px; font-size: 10px; font-size: 1rem; } } @media screen and (max-width: 767px) and (min-width: 480px) and (max-width: 1200px) { section.sec06 .blog-list .blog-item .entry-body .entry-heading .cat { font-size: 1.25px; font-size: 0.8rem; } } @media screen and (max-width: 767px) { section.sec06 .blog-list .blog-item .entry-body .title { font-size: 12px; font-size: 1.2rem; } } @media screen and (max-width: 767px) and (min-width: 480px) and (max-width: 1200px) { section.sec06 .blog-list .blog-item .entry-body .title { font-size: 1.5px; font-size: 0.96rem; } } @media screen and (max-width: 767px) { section.sec06 .blog-list .blog-item .entry-body .description { font-size: 11px; font-size: 1.1rem; display: block; } } @media screen and (max-width: 767px) and (min-width: 480px) and (max-width: 1200px) { section.sec06 .blog-list .blog-item .entry-body .description { font-size: 1.375px; font-size: 0.88rem; } } section.sec06 .blog-list .blog-item .entry-body .more { margin-top: 25px; } section.sec06 .blog-list .blog-item .entry-body .more a { width: 100%; }