@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 640px) {

/*============================
#topPanelArea
============================*/
#topPanelArea { height: 90vh; }
#topPanelArea .image { height: 90vh; border-radius: 0 0 30px 30px; }
#topPanelArea .image .swiper {}
#topPanelArea .image .swiper ul {}
#topPanelArea .image .swiper ul li { height: 90vh; }
#topPanelArea .image img { height: 100%; object-fit: cover; }
#topPanelArea .logo.sp { position: absolute;  display: block; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 264px; height: 180px; z-index: 2; }
#topPanelArea .logo.sp img { width: 100%; height: auto; }
#topPanelArea .catch { width: 100%; }
#topPanelArea .catch .copy {}
#topPanelArea .catch .mainCatch { font-size: 2.125em; }

/*============================
#aboutArea
============================*/
#aboutArea {}
#aboutArea .bgContainer { padding-bottom: 160px; }
#aboutArea .bgContainer:before {}
#aboutArea .bgContainer .top { padding-top: 70px; }
#aboutArea .bgContainer .top .subTitle {}
#aboutArea .bgContainer .top .subTitle span {}
#aboutArea .bgContainer .top .mainTitle { font-size: 1.75em; letter-spacing: 0.15em; }
#aboutArea .bgContainer .content { flex-direction: column; gap: 60px; margin-top: 30px; }
#aboutArea .bgContainer .content .leftArea {}
#aboutArea .bgContainer .content .leftArea .image { width: 100%; height: auto; }
#aboutArea .bgContainer .content .leftArea .image img {}
#aboutArea .bgContainer .content .leftArea .copy01 { font-size: 0.875em; top: 210px; left: 15px; padding: 5px 10px; font-weight: 500; }
#aboutArea .bgContainer .content .leftArea .copy02 { font-size: 0.875em; bottom: inherit; right: 15px; top: 415px; padding: 5px 10px; font-weight: 500; }
#aboutArea .bgContainer .content .rightArea {}
#aboutArea .bgContainer .content .rightArea .catch { padding-top: 0; font-size: 1.25em; line-height: 2; }
#aboutArea .bgContainer .content .rightArea .catch:before { width: 45px; height: 36px; top: -30px; }
#aboutArea .bgContainer .content .rightArea .catch:after { width: 45px; height: 36px; bottom: -25px; right: 15px; }
#aboutArea .bgContainer .content .rightArea .copy { text-align: left; margin-top: 60px; line-height: 1.5; }
#aboutArea .bgContainer .content .rightArea .summary { line-height: 1.5; }
#aboutArea .bgContainer .content .rightArea .button { margin-top: 60px; }
#aboutArea .bgContainer .content .rightArea .button a {}
#aboutArea .bgContainer .swiper { margin-top: 50px; }
#aboutArea .bgContainer .swiper ul {}
#aboutArea .bgContainer .swiper ul li {}
#aboutArea .bgContainer .swiper ul li img { width: 100%; height: auto; }
#aboutArea .bgContainer .swiper ul li.type01 { width: 140px; height: 105px; }
#aboutArea .bgContainer .swiper ul li.type02 { width: 100px; height: 100px; }
#aboutArea .bgContainer .swiper ul li.type03 { width: 90px; height: 127px; }
#aboutArea .bgContainer .swiper ul li:nth-child(1) { margin-top: 30px; }
#aboutArea .bgContainer .swiper ul li:nth-child(2) {}
#aboutArea .bgContainer .swiper ul li:nth-child(3) { margin-top: 30px; }
#aboutArea .bgContainer .swiper ul li:nth-child(4) { margin-top: 10px; }
#aboutArea .bgContainer .swiper ul li:nth-child(5) { margin-top: 30px; }
#aboutArea .bgContainer .swiper ul li:nth-child(6) {}
#aboutArea .bgContainer .swiper ul li:nth-child(7) { margin-top: 30px; }
#aboutArea .bgContainer .swiper ul li:nth-child(8) {}
#aboutArea .bgContainer .swiper ul li:nth-child(9) { margin-top: 10px; }
#aboutArea .bgContainer .swiper ul li:nth-child(10) { margin-top: 30px; }
#aboutArea .bgContainer .swiper ul li:nth-child(11) { margin-top: 10px; }
#aboutArea .bgContainer .swiper ul li:nth-child(12) {}

/*============================
#menuArea
============================*/
#menuArea { padding-bottom: 110px; }
#menuArea .parts {}
#menuArea .parts:before { height: 125px; top: -75px; border-radius: 50px 50px 0 0; }
#menuArea .top { flex-direction: column; gap: 15px; }
#menuArea .top .titleArea {}
#menuArea .top .titleArea .title { font-size: 2.25em; }
#menuArea .top .titleArea .ja { margin-top: 15px; }
#menuArea .top .copy { margin-top: 15px; }
#menuArea .top .button.pc { display: none; }
#menuArea .top .button.pc a {}
#menuArea ul { flex-direction: column; gap: 40px; margin-top: 40px; }
#menuArea ul li { width: 100%; }
#menuArea ul li .image { width: 100%; height: 250px; }
#menuArea ul li .image img {}
#menuArea ul li .content { margin-top: 15px; }
#menuArea ul li .content .name {}
#menuArea ul li .content .copy { margin-top: 10px; }
#menuArea .button.sp { display: block; margin-top: 60px; }
#menuArea .button.sp a {}

/*============================
#accessArea
============================*/
#accessArea { margin-top: 0; padding-bottom: 70px; }
#accessArea iframe.sp { display: block; margin-top: 30px; }
#accessArea .top { text-align: left; }
#accessArea .top:before { content: none; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 1200px; height: 1px; background-color: #ccc; }
#accessArea .top .title {}
#accessArea .top .ja { margin-top: 15px; }
#accessArea .content { margin-top: 30px; }
#accessArea .content .address { text-align: left; line-height: 1.5; }
#accessArea .content .detail { flex-direction: column; margin-top: 30px; }
#accessArea .content .detail .leftArea { width: 100%; }
#accessArea .content .detail .leftArea .name { text-align: left; }
#accessArea .content .detail .leftArea ul { margin-top: 15px; }
#accessArea .content .detail .leftArea ul li {}
#accessArea .content .detail .rightArea { margin-top: 40px; width: 100%; }
#accessArea .content .detail .rightArea .name { text-align: left; }
#accessArea .content .detail .rightArea ul { margin-top: 15px; }
#accessArea .content .detail .rightArea ul li {}
#accessArea iframe.pc { display: none; }

/*============================
#contactArea
============================*/
#contactArea { padding: 60px 0 70px; }
#contactArea .top {}
#contactArea .top:before {}
#contactArea .top .title { font-size: 5em; letter-spacing: 0.075em; width: 100vw; margin: 0 calc(49% - 50vw); white-space: nowrap; }
#contactArea .top .ja { font-size: 0.875em; }
#contactArea .content { flex-direction: column; margin-top: 75px; padding: 0; }
#contactArea .content .tel {}
#contactArea .content .tel .number {}
#contactArea .content .tel .number a {}
#contactArea .content .tel .time {}
#contactArea .content .button { margin-top: 30px; }
#contactArea .content .button a {}
#contactArea .content .button a::after {}
#contactArea .content .button a:hover::after {}
#contactArea .content .button a::before {}
	
}