@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

/*===============================
  Base
===============================*/
.mincho {
    font-family: 'Noto Serif JP', serif;
}
img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
ul::after {
    display: none;
}
@media screen and (min-width: 769px) {
.wrapper {
    min-width: 1200px;
}
.main_inner {
    max-width: 1200px;
    margin: 0 auto;
}
a {
    transition: 0.4s;
}
a.al:hover {
    opacity: 0.85;
    filter: alpha(opacity=85);
    -ms-filter: "alpha(opacity=85)";
}
.d-flex {
    display: flex;
}
.f-wrap {
    flex-wrap: wrap;
}
.just-center {
    justify-content: center;
}
.just-between {
    justify-content: space-between;
}
.just-end {
    justify-content: flex-end;
}
.align-center {
    align-items: center;
}
}
@media screen and (max-width: 768px) {
.wrapper {
    background-color: #373733;
    padding-bottom: 13.7vw;
}
.inner {
    width: 93.75%;
}
}


/*===============================
top-header
===============================*/
@media screen and (min-width: 769px) {
.header_top {
    position: static;
    padding: 0;
    height: 152px;
}
.header_top_title {
    width: 365px;
}
.header_logo{
    padding-top: 0;
}
.header_top .hnav ul li {
    font-size: 1.3rem;
    margin-left: 42px;
}
.header_top .hnav ul li a {
    color: #595757;
    padding: 5px 0;
    letter-spacing: 0.25em;
}
.header_top .hnav ul li a:hover {
    text-decoration: underline;
}
.header_top .hnav ul li:nth-child(1) a {
    background: url("../image/hicon1.png") left center no-repeat;
    background-size: 26px auto;
    padding-left: 38px;
}
.header_top .hnav ul li:nth-child(2) a {
    background: url("../image/hicon2.png") left center no-repeat;
    background-size: 27px auto;
    padding-left: 39px;
}  
.header_top .hnav ul li:nth-child(3) a {
    background: url("../image/hicon3.png") left center no-repeat;
    background-size: 28px auto;
    padding-left: 40px;
} 
}
@media screen and (max-width: 768px) {
.header_top {
    padding: 0;
    height: 12.5vw;
    background-color: #fff;
}
.header_top_title {
    width: 56vw;
    padding: 3.5vw 0 0 5vw;
}
.header_top .hnav {
    display: none;
}
}


/*===============================
main
===============================*/
.main {
	background-color: #4A4A4A;
}


/*===============================
mainvisual
===============================*/
.mainvisual .swiper-horizontal > .swiper-pagination-bullets,
.mainvisual .swiper-pagination-bullets.swiper-pagination-horizontal,
.mainvisual .swiper-pagination-custom,
.mainvisual .swiper-pagination-fraction {
    bottom: 30px;
}
.mainvisual .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.mainvisual .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 14px;
}
.mainvisual .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    background: #fff;
}
.mainvisual .swiper-pagination-bullet-active {
    background: #fff;
}
@media screen and (max-width: 768px) {
.mainvisual .swiper-horizontal > .swiper-pagination-bullets,
.mainvisual .swiper-pagination-bullets.swiper-pagination-horizontal,
.mainvisual .swiper-pagination-custom,
.mainvisual .swiper-pagination-fraction {
    bottom: 2.5vw;
}
.mainvisual .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.mainvisual .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 1.5vw;
}
.mainvisual .swiper-pagination-bullet {
    width: 2vw;
    height: 2vw;
}
}


/*===============================
.cont1
===============================*/
.cont1 {
	padding: 100px 0 215px;
    background: url("../image/cont1_bg.png") center top no-repeat #000;
    background-size: cover;
    color: #fff;
}
.cont1 .d-flex {
	position: relative;
}
.cont1 h1 {
    width: 703px;
    padding-bottom: 95px;
}
.cont1 p {
    font-size: 1.8rem;
    padding-bottom: 2em;
    line-height: 1.944;
}
.cont1 .con {
    width: 50%;
}
.cont1 .con .img {
    display: none;
}
.cont1 .photo {
    width: 694px;
    position: absolute;
    right: -150px;
}
@media screen and (max-width: 768px) {
.cont1 {
	padding: 7.5vw 0 5vw;
    background: none #000;
}
.cont1 h1 {
    width: 73.75vw;
    padding-bottom: 5vw;
    margin-left: 5vw;
}
.cont1 p {
    font-size: 3.5vw;
    line-height: 1.857;
    padding: 0 5vw 2em;
}
.cont1 .con {
    width: 100%;
    border-top: 1px solid #fff;
    padding-top: 5vw;
}
.cont1 .con .img {
    display: block;
    padding-bottom: 2em;
}
.cont1 .photo {
   display: none;
}
}


/*===============================
.gallery
===============================*/
.gallery {
    background-color: #000;
    padding-bottom: 100px;
}
.gallery h2 {
    width: 216px;
    padding-bottom: 60px;
}
.gallery .mySwiper2 {
    width: 855px;
    margin: 0 auto 45px;
}
.gallery .swiper-cont {
    position: relative;
}
.gallery .mySwiper {
    height: 295px;
}
.gallery .mySwiper .swiper-slide {
    cursor: pointer;
    height: auto;
}
.gallery .mySwiper .swiper-slide-thumb-active img {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
}  
.gallery .swiper-cont .swiper-button-next,
.gallery .swiper-cont .swiper-button-prev {
    color: #ccc;
    left: -50px;
}
.gallery .swiper-cont .swiper-button-next {
    left: auto;
    right: -50px;
}
@media screen and (max-width: 768px) {
.gallery {
    padding-bottom: 12.5vw;
}
.gallery h2 {
    width: 26.25vw;
    padding-bottom: 5vw;
    margin-left: 5vw;
}
.gallery .mySwiper2 {
    width: 100%;
    margin: 0 auto 3vw;
}
.gallery .mySwiper {
    width: 78.25vw;
    height: 40vw;
    margin: 0 auto;
}
.gallery .swiper-cont .swiper-button-next,
.gallery .swiper-cont .swiper-button-prev {
    left: 0;
}
.gallery .swiper-cont .swiper-button-next {
    left: auto;
    right: 0;
}
.gallery .swiper-cont .swiper-button-next::after,
.gallery .swiper-cont .swiper-button-prev::after {
    font-size: 6vw;
}
}


/*===============================
.solution
===============================*/
.solution {
    padding: 110px 0 100px;
    color: #fff;
}
.solution h2 {
    width: 256px;
    padding-bottom: 55px;
}
.solution h3 {
    width: 697px;
    padding-bottom: 55px;
}
.solution ul li {
    width: 32.5%;
    position: relative;
}
.solution ul li h4 {
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 1.3;
    padding: 15px 0 20px;
}
.solution ul li p {
    line-height: 1.625;
}
.solution ul li .btn {
    font-size: 1.4rem;
    padding-top: 15px;
}
.solution ul li .btn a {
    color: #fff;
    background: url("../image/solution_icon.png") left center no-repeat;
    background-size: 20px auto;
    padding: 5px 0 5px 25px;
}
.solution ul li .img {
    width: 75px;
    position: absolute;
    right: 0;
    top: 307px;
}
@media screen and (min-width: 769px) {
.solution ul li .btn a:hover {
    text-decoration: underline;
}
}
@media screen and (max-width: 768px) {
.solution {
    padding: 12.5vw 0 2.5vw;
}
.solution h2 {
    width: 31.5vw;
    padding-bottom: 5vw;
    margin-left: 5vw;
}
.solution h3 {
    width: 53.5vw;
    padding-bottom: 5vw;
    margin-left: 5vw;
}
.solution ul li {
    width: 100%;
    margin-bottom: 10vw;
}
.solution ul li h4 {
    font-size: 4.25vw;
    line-height: 1.53;
    padding: 5vw 5vw 5vw;
}
.solution ul li p {
    font-size: 3.5vw;
    line-height: 1.85;
    padding: 0 5vw;
}
.solution ul li .btn {
    font-size: 3.5vw;
    padding-top: 5vw;
}
.solution ul li .btn a {
    color: #fff;
    background: url("../image/solution_icon.png") left center no-repeat;
    background-size: 5vw auto;
    padding: 2vw 0 2vw 6.25vw;
}
.solution ul li .img {
    width: 18.75vw;
    right: 5vw;
    top: 76.25vw;
}
}


/*===============================
.cont2
===============================*/
.cont2 {
    background-color: #292929;
    padding: 100px 0 95px;
    color: #fff;
}
.cont2 ul {
    width: 1064px;
    margin: 0 auto 60px;
}
.cont2 ul li {
    width: 45.8%;
}
.cont2 ul li h4 {
    width: 130px;
    font-size: 1.8rem;
    background-color: #E15380;
    text-align: center;
    padding: 2px 0 7px;
    margin: 0 auto;
    box-sizing: border-box;
}
.cont2 ul li:nth-child(1) h5 {
    width: 266px;
    margin: 25px auto 20px;
}
.cont2 ul li:nth-child(2) h5 {
    width: 143px;
    margin: 15px auto;
}
.cont2 ul li p {
    font-size: 1.8rem;
    line-height: 1.45;
    padding-top: 18px;
}
.cont2 .btn {
    width: 710px;
    margin: 0 auto;
    font-size: 2.2rem;
}
.cont2 .btn a {
    display: block;
    width: 100%;
    padding: 30px 0;
    color: #fff;
    background-color: #E15380;
    text-align: center;
}
.cont2 .btn a span {
    background: url("../image/cont2_icon1.png") right center no-repeat;
    background-size: 12px auto;
    padding-right: 26px;
}
@media screen and (max-width: 768px) {
.cont2 {
    padding: 12.5vw 0;
}
.cont2 ul {
    width: 89.33%;
    margin: 0 auto;
}
.cont2 ul li {
    width: 100%;
    margin-bottom: 10vw;
    position: relative;
}
.cont2 ul li h4 {
    width: 32vw;
    font-size: 4vw;
    padding: 1vw 0 2vw;
    margin: 0 0 5vw;
}
.cont2 ul li:nth-child(1) h5 {
    width: 46.25vw;
    margin: 0;
    position: absolute;
    right: 0;
    top: 2vw;
}
.cont2 ul li:nth-child(2) h5 {
    width: 34.5vw;
    margin: 0;
    position: absolute;
    right: 11.5vw;
    top: -1vw;
}
.cont2 ul li p {
    font-size: 3.25vw;
    line-height: 1.7;
    padding-top: 2.5vw;
    white-space: nowrap;
}
.cont2 .btn {
    width: 89.33%;
    font-size: 4.25vw;
}
.cont2 .btn a {
    padding: 4vw 0;
}
.cont2 .btn a span {
    display: inline-block;
    background: url("../image/cont2_icon1.png") right center no-repeat;
    background-size: 3vw auto;
    padding-right: 6vw;
}
}


/*===============================
.designer
===============================*/
.designer {
    background-color: #000;
    border-top: 1px solid #fff;
    padding: 80px 0 110px;
    color: #fff;
    position: relative;
}
.designer .tit {
    width: 50%;
}
.designer .tit h2 {
    width: 267px;
    padding-bottom: 50px;
}
.designer .tit h3 {
    width: 577px;
    position: relative;
    z-index: 2;
}
.designer .tit .img {
    width: 723px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.designer .con {
    width: 40.25%;
    margin-top: 30px;
}
.designer .con ul li {
    width: 48%;
    margin-bottom: 16px;
}
.designer .con p {
    line-height: 1.875;
}
.designer .con .btn1 {
    font-size: 1.4rem;
    display: flex;
    justify-content: flex-end;
    padding: 5px 0 70px;
}
.designer .con .btn1 a {
    display: block;
    width: 155px;
    border: 1px solid #B2B2B2;
    color: #fff;
    padding: 10px 0 10px 12px;
    background: url("../image/designer_icon1.png") 93% center no-repeat;
    background-size: 12px auto;
    letter-spacing: normal;
}
.designer .con .btn2 {
    font-size: 2.2rem;
}
.designer .con .btn2 a {
    display: block;
    width: 100%;
    color: #fff;
    background-color: #E06C00;
    padding: 19px 0 19px 130px;
    line-height: 1.3;
}
.designer .con .btn2 a span {
    display: inline-block;
    background: url("../image/designer_icon2.png") right center no-repeat;
    background-size: 12px auto;
    padding-right: 32px;
}
@media screen and (max-width: 768px) {
.designer {
    border-top: none;
    padding: 12vw 0 77vw;
    position: relative;
}
.designer .tit {
    width: 89.33%;
    margin: 0 auto;
    position: static;
}
.designer .tit h2 {
    width: 32.5vw;
    padding-bottom: 7.5vw;
}
.designer .tit h3 {
    width: 81.25vw;
}
.designer .tit .img {
    width: 84.25vw;
    left: 0;
    bottom: 0;
}
.designer .con {
    width: 89.33%;
    margin: 6vw auto 0;
}
.designer .con ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 2vw;
}
.designer .con ul li {
    width: 48.25%;
    margin-bottom: 3vw;
}
.designer .con p {
    font-size: 3.25vw;
    line-height: 1.85;
}
.designer .con .btn1 {
    font-size: 3.5vw;
    justify-content: center;
    padding: 5vw 0;
}
.designer .con .btn1 a {
    width: 38.5vw;
    padding: 2vw 0 2vw 3vw;
    background: url("../image/designer_icon1.png") 93% center no-repeat;
    background-size: 3vw auto;
}
.designer .con .btn2 {
    font-size: 4.25vw;
    text-align: center;
}
.designer .con .btn2 a {
    padding: 4vw 0;
    line-height: 1.45;
}
.designer .con .btn2 a span {
    background: url("../image/designer_icon2.png") right center no-repeat;
    background-size: 3vw auto;
    padding-right: 6vw;
}  
}


/*===============================
fnav
===============================*/
.fnav {
    display: none;
}
@media screen and (max-width: 768px) {
.fnav {
    width: 100%;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
}
.fnav ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.fnav ul li {
    font-size: 2.75vw;
    width: 33%;
}
.fnav ul li a {
    display: block;
    width: 100%;
    padding: 4.8vw 0;
    text-align: center;
    color: #fff;
    letter-spacing: 0.2em;
}
.fnav ul li:nth-child(1) a {
    background-color: #E15380;
}
.fnav ul li:nth-child(1) a span {
    background: url("../image/ficon1.png") left center no-repeat;
    background-size: 5.375vw auto;
    padding: 1vw 0 1vw 7vw;
}
.fnav ul li:nth-child(2) a {
    background-color: #E06C00;
}
.fnav ul li:nth-child(2) a span {
    background: url("../image/ficon2.png") left center no-repeat;
    background-size: 5.75vw auto;
    padding: 1vw 0 1vw 7.25vw;
}
.fnav ul li:nth-child(3) a {
    background-color: #007581;
}
.fnav ul li:nth-child(3) a span {
    background: url("../image/ficon3.png") left center no-repeat;
    background-size: 5.5vw auto;
    padding: 1vw 0 1vw 7vw;
}
}
   
    
/*===============================
footer
===============================*/
@media screen and (max-width: 768px) {
.footer {
    background-color: #373733;
    padding: 0 0 2.5vw;
}
.footer_flex {
    padding-top: 13.5vw;
    position: relative;
}
.footer_ul {
    width: 100%;   
}
.footer_ul ul {
    width: 100%;
    display: flex;
    justify-content: center;
}
.footer_ul li {
    padding-right: 0;
    margin: 0 6.25vw;
}
.footer_ul li a {
    color: #fff !important;
	font-size: 3vw;
}
.footer_page {
    width: 32.5vw;
    position: absolute;
    right: 8vw;
    top: 3vw;
}
.footer_page p {
    background-color: #fff;
    border-radius: 5vw;
    background-position: 2vw center;
}
.footer_page p a {
    display: block;
    width: 32.5vw;
    font-size: 3.25vw;
    padding: 1vw 2vw;
    box-sizing: border-box;
}
.copyright {
    font-size: 3vw;
    padding: 2vw 0 3vw;
    color: #fff;
}   
}