@charset "UTF-8";

@media screen and ( max-width:640px ) {
	body {
		min-width: 320px;
		width: 100%;
	}
	.onlySp,
	nav ul li.onlySp,
	.inner > div.onlySp {
		display: inline-block;
	}
	.onlyPc,
	nav.gNav ul li.onlyPc,
	.inner > div.onlyPc {
		display: none;
	}

	/*---- ヘッダー ----*/
	header {
		position: fixed;
		width: 100%;
		padding: 3% 0;
		z-index: 10;
	}
	header::before {
		background-position: 65% 0;
	}
	header #headerIn {
		display: block;
		width: 90%;
	}
	#logo img {
		width: 18vw;
	}
	header h2 img {
		width: 46vw;
	}
	#mainVisual::before {
		top: 20px;
		background-image: url(../images/header-bg-sp.jpg);
	}
	#mainLogo > div {
		width: 90%;
		height: auto;
		transform: translate(-50%, 50%);
		padding: 75px 60px 69px 55px;
	}

	/*---- グローバルナビ ----*/
	#headerIn #headerNav {
		display: block;
	}
	/* #nav-toggle 切り替えアニメーション */
    nav .open .navButton span:nth-child(1) {
        top: 11px;
		-ms-transform: rotate(315deg);
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    nav .open .navButton span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    nav .open .navButton span:nth-child(3) {
        top: 11px;
		-ms-transform: rotate(-315deg);
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    nav .open #gNav {
        /* #global-nav top + #mobile-head height */
		-ms-transform: translateY(576px);
        -moz-transform: translateY(576px);
        -webkit-transform: translateY(576px);
        transform: translateY(576px);
    }
	nav.gNav {
		position: fixed;
		left: 0;
	    top: 0;
	    display: none;
		width: 100%;
		height: 100%;
		border: none;
		background-color: rgba(0, 175, 235, 0.9);
	}
	nav.gNav.open {
		display: block;
		padding: 20px 0 0;
	}
	.gNav.close {
		display: none;
	}
	nav.gNav ul {
		display: block;
		width: 94%;
		height: 100%;
		margin: 0 auto;
		padding: 20px 0 0;
		overflow: auto;
	}
	nav.gNav ul li {
		width: 100%;
		border: none;
		background-color: transparent;
		font-size: 1.8rem;
		font-weight: 600;
		text-align: left;
	}
	nav.gNav ul li.onlySp {
		display: block;
	}
	nav.gNav ul li + li {
		border-top: 1px solid #fff;
	}
	nav.gNav ul li a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 20px 0;
		color: #fff;
	}
	nav.gNav li:nth-child(8) a {
		padding: 20px 0;
	}
	nav.gNav li.current a {
		background-color: transparent;
		border-bottom: 1px solid #fff;
		color: #fff;
	}
	.navButton {
		display: block;
		cursor: pointer;
	}
	/*---- グローバルナビボタンのエフェクト ----*/
	.navButton,
	.navButton span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
	}
	.navButton {
		position: fixed;
		top: 3.5%;
		right: 3%;
		width: 38px;
		height: 28px;
		margin: 2% 0 0;
		z-index: 101;
	}
	.navButton span {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 3px;
		background-color: #000;
		border-radius: 4px;
	}
	.navButton span:nth-of-type(1) {
		top: 0;
	}
	.navButton span:nth-of-type(2) {
		top: 12px;
	}
	.navButton span:nth-of-type(3) {
		bottom: 0;
	}
	.navButton.active span:nth-of-type(1) {
		background-color: #000;
		-webkit-transform: translateY(13px) rotate(-45deg);
		transform: translateY(13px) rotate(-45deg);
	}
	.navButton.active span:nth-of-type(2) {
		opacity: 0;
	}
	.navButton.active span:nth-of-type(3) {
		background-color: #000;
		-webkit-transform: translateY(-12px) rotate(45deg);
 		transform: translateY(-12px) rotate(45deg);
	}

	/*---- メインコンテンツ ----*/
	.mainContent {
		margin: 0 auto;
		padding: 0;
		background-image: none;
		background-position: 0 200px;
		background-size: contain;
	}
	.concept {
		font-size: calc(3.7rem + 10 * (100vw - 800px)/400);
	}
	.mainContentIn {
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	.feature {
		width: 90%;
		text-align: center;
	}
	.follow {
		margin: 0 0 30px;
	}
	article {
		display: block;
		width: 100%;
		margin: 160px auto 0;
	}
	article > div {
		width: 100%;
		padding: 0;
	}
	article > div > div h4 {
		width: 100%;
	}
	article > div > dl {
		display: block;
		width: 100%;
	}
	article > div dl dd + dd {
		margin: 10px 0 0;
	}
	.inner > div > div.aboutUs dt {
		width: 100%;
	}

	.feature p.phone span {
		display: block;
		margin: 0 0 -10px;
		font-size: 10vw;
	}
	.feature p.phone img {
		width: 7.5vw;
	}
	.feature #sns {
		display: block;
		width: 90%;
		padding: 20px 0;
	}
	.follow span::before {
		top: 140%;
		left: 50%;
	    /*線の形状*/
		width: 1px;
		background: #000;
	}
	.follow span::after {
		top: 100%;
		left: calc(50% - 4.5px);
		/*矢印の形状*/
		width: 10px;
		height: 10px;
		margin: 19px 0 0;
		border-top: none;
		border-bottom: 1px solid #000;
		border-left: 1px solid #000;
		transform: rotate(-45deg);
	}
	@keyframes arrowlong01 {
		0% {height: 0; opacity: 0}
		20% {height:0; opacity: 1}
		80% {height: 55%; opacity: 1}
		100% {height: 55%; opacity: 0}
	}
	@keyframes arrowlong02 {
		0% {top: 0; opacity: 0}
		20% {top: 0; opacity: 0}
		80% {top: 55%; opacity: 1}
		100% {top: 55%; opacity: 0}
	}
	.feature div ul {
		display: inline-block;
		margin: 0 auto;
		text-align: center;
	}
	.feature div ul li {
		display: inline-block;
	}
	.feature div ul li + li {
		margin: 0 0 0 5vw;
	}
	.feature div ul li img {
		margin: 0;
	}
	.photoR .img {
		padding: 0;
	}
	article.sns {
		width: 90%;
		margin: 140px auto 0;
	}
	article.sns ul {
		display: block;
	}
	article.sns section ul li {
		width: 100%;
	}
	article.sns section ul li + li {
		margin: 20px 0 0;
	}
	.snsInner .line {
		display: block;
		height: 100%;
		padding: 20px;
		text-align: center;
	}
	.snsInner .line > p {
		width: 100%;
		margin: 20px 0 0;
		padding: 20px 0;
		background-color: #fff;
		text-align: center;
	}
	.lineAccount {
		width: 100%;
	}
	.snsInner .facebook,
	.snsInner .instagram {
		width: 100%;
		height: 100%;
		margin: 20px 0 0;
	}

	.notice .contents dl dt {
		padding: 40px 0 0;
	}

	/*---- フッター ----*/
	footer {
		margin: 100px 0 0;
		background-image: url(../images/footer-img-sp.jpg);
		background-size: auto 100%;
	}
	#footerDetail {
		display: block;
		width: 100%;
	}
	#footerDetailIn {
		display: block;
		width: 90%;
		margin: 0 auto;
	}
	.comInfo .phone {
		font-size: 11vw;
	}
	.footerSns .follow span::before {
		background-color: #fff;
	}
	.footerSns .follow span::after {
		border-bottom: 1px solid #fff;
		border-left: 1px solid #fff;
	}
	#contact {
		width: 90%;
		margin: 0 auto;
	}
	form > div {
		display: block;
	}
	#entry,
	#pP {
		width: 100%;
		margin: 10px 0 0;
	}

	.footerNav {
		margin: 0 0 40px;
	}

	.footerNav ul {
		width: 100%;
		padding: 0 5%;
	}
	.footerNav ul li a {
		display: inline-block;
		width: 100%;
	}
	.footerNav ul li.onlySp {
		display: block;
	}
	.footerNav ul li.onlyPc {
		display: none;
	}
	.comNameSub {
		font-size: 4.5vw;
		text-align: center;
	}
	.comName {
		font-size: 18.0vw;
		text-align: center;
	}
	.comInfo .phone {
		text-align: center;
	}
	address {
		position: relative;
		width: 100%;
		margin: 40px auto 0;
		padding: 0;
		text-align: center;
	}
	
	.inner {
		display: block;
		width: 90%;
		height: 100%;
		margin: 0 auto;
	}
	.inner > div {
		display: block;
	}
	.inner > div > p,
	.inner > div > ul,
	.inner > div > div {
		width: 100%;
		margin: 20px 0 0;
		padding: 10px 0;
	}
	.detail {
		font-size: 2.3rem;
	}
	.inner > div ul {
		font-size: 2.2rem;
	}
	.discount {
		font-size: 2.7rem;
		line-height: 1.6;
	}
	.address {
		margin: 0;
	}
	.inner > div dl {
		display: inline-block;
		width: 100%;
	}
	.inner > div dl + dl {
		border: none;
	}
	.inner > div dt,
	.inner > div dl.aboutUs dt {
		width: 100%;
		margin: 0 0 10px;
		padding: 40px 0 10px 0;
		border-bottom: 1px solid #000;
		border-right: none;
	}
	.inner > div dd {
		padding: 0;
	}
	.details {
		margin: 60px 0 0;
	}
	#top article.sns {
		margin: 100px auto;
	}
	article.sns section {
		width: 100%;
	}
	article.sns section ul {
		display: block;
	}
	article.sns section ul li {
		font-size: 2.2rem;
	}
	article.sns section ul li img {
		width: 60px;
		height: 60px;
	}
	.regulations {
		margin: 30px 0 40px;
	}
	.gCalendar,.gCalendar iframe {
		width: 100%;
		height: 680px;
	}
	.detail {
		position: relative;
		width: 100%;
		margin: 0;
	}
	.comAddress {
		font-size: 4.2vw;
	}
	#pPIn {
		margin: 20px 0 0;
	}

	/*----------注意事項ページ----------*/
	article > div,
	#regulations .contents {
		width: 90%;
		margin: 0 auto;
	}
	.title {
		width: 100%;
	}
	#notice div.contents {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0 auto 20px;
	}
	#notice .contents > section {
		width: 100%;
		margin: 0;
	}
	#notice .contents dl dt {
		padding: 40px 0 0;
	}

	/*----------業務規程ページ----------*/
	#regulations .title {
		width: 90%;
		margin: 0 auto;
	}
	#regulations .contents section dd li li {
		text-indent: -1.8rem;
		padding-left: 1.8rem;
	}

	/*---- thanks ----*/
	#thanks article {
		margin: 200px auto 0;
	}
	#thanks .thanks {
		font-size: 7.6vw;
	}
	#thanks .feature {
		width: 100%;
	}
	#thanks .linkBtn {
		width: 100%;
	}
}