@charset "utf-8";
/* CSS Document */

/************************************************** COMMON **************************************************/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 18px;
	font-family: "Noto Sans JP", "serif";
	line-height: 1.5;
	color: #333;
	scroll-behavior: smooth;
}

ul {
	list-style: none;
}

a {
	color: #333;
	font-weight: bold;
	text-decoration: none;
	transition: all 0.25s ease;
}

a:hover {
	color: #0986d3;
}

a[href^="tel:"] {
	pointer-events: none;
}

@media screen and (max-width: 1200px) {
	* {
		font-size: 16px;
	}
}

@media screen and (max-width:768px) {
	a[href^="tel:"] {
		pointer-events: auto;
	}
	
	a[href^="tel:"]:hover {
		color: #333;
	}
}

h2 {
	font-size: 36px;
	text-align: center;
}

b,
strong {
	font-weight: 700;
}

em {
	font-style: normal;
}

img {
	max-width: 100%;
}

.inner {
	max-width: 1230px;
	margin-inline: auto;
	padding-inline: 15px;
}

.float-left {
	float: left;
	margin-right: 30px;
}

.float-left:after {
	content: "";
	clear: both;
}

.float-right {
	float: right;
	margin-left: 30px;
}

.float-right:after {
	content: "";
	clear: both;
}

.button {
	border-radius: 15px;
	padding: 15px 10px;
	background: #ddd;
	transition: all 0.25s ease;
}

.button:hover {
	background: #bbb;
}

.tel-hour {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-auto-rows: auto auto;
}

.tel-hour a {
	grid-column: 2/3;
	grid-row: 1/2;
	font-size: 24px;
}

.tel-hour:before {
	grid-column: 1/2;
	grid-row: 1/2;
	font-family: "Font Awesome 6 Free";
	font-weight: 700;
	content: "\f095";
	display: inline-block;
	color: #d10b78;
	margin-right: 10px;
	margin-top: 3px;
	align-self: center;
}

.tel-hour span {
	grid-column: 1/3;
	grid-row: 2/3;
	font-size: 12px;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.tel-hour:before {
		display: none;
	}
	
	.tel-hour a:before {
		font-family: "Font Awesome 6 Free";
		font-weight: 700;
		content: "\f095";
		display: inline-block;
		color: #d10b78;
		margin: auto;
		align-self: center;
		font-size: 28px;
	}
}

@media screen and (max-width: 375px) {
	h2 {
		font-size: 32px;
	}
}

.line {
	background: #06c755;
	color: #fff;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 15px;
}

.line:hover {
	background: #31dd4a;
	color: #fff;
}

.line:after {
	content: "";
	display: inline-block;
	width: 26px;
	height: 25px;
	background: url("../images/line.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: 10px;
}

.astarisk {
	padding-left: 22px;
}

.astarisk li:before {
	content: "※";
	display: inline-block;
	margin-left: -24px;
	margin-right: 6px;
}

.dots {
	padding-left: 22px;
}

.dots li {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.75;
}

.dots li:before {
	content: "";
	display: inline-block;
	margin-left: -16px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #0986d3;
	position: relative;
	top: 1px;
	left: -8px;
}

@media screen and (max-width: 1200px) {
	.astarisk li:before {
		margin-right: 8px;		
	}
	
	.dots li {
		font-size: 18px;
	}
	
	.dots li:before {
		margin-left: -14px;
		width: 14px;
		height: 14px;		
	}
}

@media screen and (max-width: 768px) {	
	.dots li {
		font-size: 15px;
	}
}

/************************* HEADER *************************/
header {
	position: fixed;
	width: 100%;
	z-index: 100;
	transition: background 0.25s ease;
}

header.scrolled {
	background: rgba(255, 255, 255, 0.9);
}

header .inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	max-width: 1920px;
	gap: 0 50px;
	height: 95px;
}

header h1 {
	margin-right: auto;
	flex-shrink: 0;
}

header h1 .logo {
	display: flex;
}

header h1 img {
	height: 80px;
	margin: auto;
}

header nav ul {
	display: flex;
	gap: 0 2em;
}

header nav ul li {
	flex-shrink: 0;
	position: relative;
}

header nav ul li.sp {
	display: none;
}

header nav ul li:after {
	content: "";
	position: absolute;
	height: calc(16px / 2);
	width: 16px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: #0986d3;
	left: 50%;
	transform: translateX(-50%);
	bottom: -18px;
}

header .tel-hour,
header .line {
	flex-shrink: 0;
}

@media screen and (max-width: 1700px) {
	header .inner {
		gap: 0 30px;
	}
	header nav ul {
		gap: 0 1.5em;
	}
	header nav ul li a {
		font-size: 16px;
	}
	header .tel-hour a {
		font-size: 20px;
	}
	header .line {
		font-size: 18px;
	}
}

@media screen and (max-width: 1440px) {
	header .inner {
		gap: 0 15px;
	}
	header h1 img {
		height: 60px;
	}
	header nav ul {
		gap: 0 1.15em;
	}
	header nav ul li a {
		font-size: 14px;
	}
	header .tel-hour a {
		font-size: 20px;
	}
	header .button {
		border-radius: 10px;
    	padding: 10px 5px;
	}
	header .line {
		font-size: 16px;
		padding-left: 10px;
	}
}

@media screen and (max-width: 1200px) {
	header.scrolled,
	header:has(.meanclose) {
		background: #fff;
	}
	
	header .inner {
		padding-right: 95px;
	}
	
	header .inner #head-nav {
		position: absolute;
		width: 100%;
		right: 0;
		top: 0;
	}
	
	header h1,
	header .tel-hour,
	header .line {
		position: relative;
    	z-index: 1000000;
	}
	
	header .inner:has(.meanclose) h1 {
		background: #fff;
	}
	
	.mean-container .mean-bar {
		background: transparent;
		padding: 0;
	}
	
	.mean-container a.meanmenu-reveal {
		width: 55px;
		height: 55px;
		padding: 20px 20px 20px 20px;
		text-indent: 0;
	}
	
	.mean-container a.meanmenu-reveal span {
		background: #0986d3;
		margin-top: 7px;
	}
	
	.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(1){
		transform: rotate(30deg);
	    position: relative;
		top: 10px;
	}
	
	.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(2){
		transform: rotate(-30deg);		
	}
	
	.mean-container a.meanmenu-reveal div {
		color: #0986d3;
	}
	
	.mean-container a.meanmenu-reveal.meanclose div {
		font-size: 17px;
	    position: relative;
		top: 11px;
	}
	
	.mean-container .mean-nav {
		margin-top: 95px;
		background: #fff;
	}
	
	.mean-container .mean-nav ul {
		display: flex;
		flex-direction: column;
		margin-top: 0px;
		padding-bottom: 45px;
	}
	
	.mean-container .mean-nav ul li {
		display: flex;
		justify-content: center;
	}
	
	.mean-container .mean-nav ul li:after {
		display: none;
	}

	.mean-container .mean-nav ul li a {
		color: inherit;
		width: 60%;
		min-width: 265px;
		border-bottom: 1px solid #ccc;
		font-size: 18px;
		text-align: center;
	}
	
	.mean-container .mean-nav ul li:after {
		display: none;
	}
	
	.mean-container .mean-nav ul li.sp {
		display: none;
	}

}

@media screen and (max-width: 768px) {
	header .inner {
		height: min(95px, calc((65 / 375)*100vw));
		padding-right: min(90px, calc((59 / 375)*100vw));
	}
	
	header h1 img {
		height: clamp(40px, calc((40 / 375) * 100vw), 60px);
	}
	
	.mean-container .mean-nav {
        margin-top: min(95px, calc((65 / 375)*100vw));
	}
	
	.mean-container a.meanmenu-reveal {
		width: min(60px, calc((30 / 375) * 100vw));
        height: calc((35 / 375) * 100vw);
        padding: 19px 15px 15px 15px;
	}
	
	.mean-container a.meanmenu-reveal span {
		height: 1px;
		margin: 0 auto calc((7 / 375) * 100vw);
	}
	
	.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(1) {
		transform: rotate(35deg);
        position: relative;
        top: calc((8 / 375) * 100vw);
	}
	
	.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(2) {
        transform: rotate(-35deg);
    }
		
	.mean-container a.meanmenu-reveal div {
		font-size: min(21px, calc((10 / 375) * 100vw));
		text-align: center;
		font-weight: 400;
		margin-top: calc((-4 / 375) * 100vw);
	}
	
	.mean-container a.meanmenu-reveal.meanclose div {
		top: calc((7 / 375) * 100vw);
		font-size: min(21px, calc((10 / 375) * 100vw));
	}

	.mean-container .mean-nav ul li.sp {
		display: flex;
		float: inherit;
		flex-direction: column;
		width: 70%;
		margin: 0 auto;
		padding-top: 30px;
		gap: 20px;
	}
	
	.mean-container .mean-nav ul li.sp .tel-hour {
		width: fit-content;
		margin: 0 auto;
	}
	
	.mean-container .mean-nav ul li.sp .tel-hour:before {
		font-size: 20px;
		margin-right: 5px;
	}
	
	.mean-container .mean-nav ul li.sp .tel-hour a {
		width: fit-content;
        min-width: auto;
        padding: 0;
        text-align: center;
		font-size: 24px;
	}
	
	.mean-container .mean-nav ul li.sp .tel-hour span {
		font-size: 12px;
	}
	
	.mean-container .mean-nav ul li.sp a.line {
		width: fit-content;
        min-width: auto;
        margin: 0 auto;
        font-size: 20px;
        color: #fff;
        padding: 10px 10px 10px 15px;
        display: flex;
		gap: 10px;
		border-radius: 15px;
		height: auto;
	}
	
	.mean-container .mean-nav ul li.sp a.line:after {
		width: 26px;
    	height: 25px;
	}
	
	.mean-container .mean-nav ul li.sp a.line:hover {
		background: #31dd4a;
	}
	
	header .tel-hour a,
	header .tel-hour span {
		font-size: 0;
	}
	
	header .inner > .tel-hour a:before {
		font-size: min(57px, calc((28 / 375) * 100vw));
		margin: auto;
	}
	
	header .line {
		font-size: 0;
		padding-top: 2px;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		height: min(60px, calc((34 / 375) * 100vw));
		width: min(60px, calc((34 / 375) * 100vw));
	}
	
	header .line:after {
		width: calc((22 / 375) * 100vw);
		height: calc((21 / 375) * 100vw);
		margin: auto;
	}
}

@media screen and (max-width: 375px) {
	header h1 img {
		max-height: 38px;
	}
	
	.mean-container a.meanmenu-reveal {
		padding-top: 17px;
	}
}

/************************* MV *************************/

#mv .mv_top {
	height: 100vh;
	position: relative;
    z-index: 1;
}

#mv .mv_top .inner {
	position: relative;
	max-width: 1920px;
}

#mv .mv_top h2 {
	position: absolute;
	top: min(195px, calc((195 / 1920)*100vw));
	left: min(275px, calc((275 / 1920)*100vw));
	text-shadow:
		1px 1px 0 #FFF, -1px -1px 0 #FFF,
		-1px 1px 0 #FFF, 1px -1px 0 #FFF,
		0px 1px 0 #FFF,  0-1px 0 #FFF,
		-1px 0 0 #FFF, 1px 0 0 #FFF;
}

#mv .mv_top h2 span,
#mv .mv_top h2 + p {
	font-weight: 700;
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(min(-100px, calc((-100 / 1920)*100vw)));
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

#mv .mv_top h2 span {
	display: block;
	font-size: min(60px, calc((60 / 1920)*100vw));
	line-height: min(100px, calc((100 / 1920)*100vw));
	text-align: left;
	opacity: 0;
}

#mv .mv_top h2 span:nth-of-type(2) {
	animation-delay: 0.25s;	
}

#mv .mv_top h2 span b,
#mv .mv_top h2 span em {
	font-size: min(60px, calc((60 / 1920)*100vw));
	font-weight: 700;
}

#mv .mv_top h2 span b {
	border-bottom: 1px solid #0986d3;
}

#mv .mv_top h2 span em {
	width: min(100px, calc((100 / 1920)*100vw));
	height: min(100px, calc((100 / 1920)*100vw));
	font-size: min(68px, calc((68 / 1920)*100vw));
	color: #fff;
	display: inline-flex;
	border-radius: 50%;
	background: #0986d3;
	justify-content: center;
    line-height: min(93px, calc((93 / 1920)*100vw));
	margin-inline: min(5px, calc((5 / 1920)*100vw));
	text-shadow: none;
}

#mv .mv_top h2 + p {
	margin-top: min(40px, calc((40 / 1920)*100vw));
	position: absolute;
	top: min(385px, calc((385 / 1920)*100vw));
	left: min(275px, calc((275 / 1920)*100vw));
	opacity: 0;
	animation-delay: 0.5s;	
	text-shadow:
		1px 1px 0 #FFF, -1px -1px 0 #FFF,
		-1px 1px 0 #FFF, 1px -1px 0 #FFF,
		0px 1px 0 #FFF,  0-1px 0 #FFF,
		-1px 0 0 #FFF, 1px 0 0 #FFF;
	display: flex;
	align-items: baseline;
}

#mv .mv_top h2 + p em,
#mv .mv_top h2 + p em span {
	font-size: min(36px, calc((36 / 1920)*100vw));	
}

#mv .mv_top h2 + p em strong {
	font-size: min(46px, calc((46 / 1920)*100vw));
	font-weight: 700;
}

#mv .mv_top h2 + p em strong:before {
	content: "";
	display: inline-block;
	width: min(60px, calc((60 / 1920)*100vw));
	height: min(75px, calc((75 / 1920)*100vw));
	background: url("../images/mv_p-strong_bfr.png");
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: min(-8px, calc((-8 / 1920)*100vw));
    margin-bottom: calc((-12 / 1920)*100vw);
}

#mv .mv_top h2 + p em strong:after {
	content: "";
	display: inline-block;
	width: min(35px, calc((35 / 1920)*100vw));
	height: min(57px, calc((57 / 1920)*100vw));
	background: url("../images/mv_p-strong_aft.png");
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: min(-2px, calc((-2 / 1920)*100vw));
    margin-bottom: calc((-30 / 1920)*100vw);
}

#mv .mv_top img {
	position: absolute;
	z-index: -1;
}
 
#mv .mv_top img.mv_room {
	width: min(880px, calc((880 / 1920)*100vw));
	right: min(40px, calc((40 / 1920)*100vw));
	top: min(30px, calc((30 / 1920)*100vw));
	animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	opacity: 0;
	animation-delay: 1s;
}

#mv .mv_top img.mv_sink {
	width: min(540px, calc((540 / 1920)*100vw));
	left: min(510px, calc((510 / 1920)*100vw));
	top: min(550px, calc((550 / 1920)*100vw));
	animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	opacity: 0;
	animation-delay: 1.25s;
}

#mv .mv_top img.mv_gap {
	width: min(420px, calc((420 / 1920)*100vw));
	left: min(40px, calc((40 / 1920)*100vw));
	top: min(535px, calc((535 / 1920)*100vw));
	animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	opacity: 0;
	animation-delay: 1.5s;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#mv .mv_top img.mv_staff {
	width: min(600px, calc((600 / 1920)*100vw));
	right: min(125px, calc((125 / 1920)*100vw));
	top: min(235px, calc((235 / 1920)*100vw));
	animation: slideDown 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	opacity: 0;
	animation-delay: 1.75s;
}

@keyframes slideDown {
	0% {
		transform: translateY(min(-100px, calc((-100 / 1920)*100vw)));
		opacity: 0;
	}
	100% {
		transform: translateY(0);
	}
	40%,100% {
		opacity: 1;
	}
}

#mv .mv_bottom {
	width: 100%;
	background: url("../images/bubble_bg.png"), url("../images/wave_bg.png");
	background-size: min(1500px, calc((1500 / 1920)*100vw)), cover;
	background-position: center min(75px, calc((75 / 1920)*100vw)), top;
	background-repeat: no-repeat;
	height: min(1119px, calc((1119 / 1920)*100vw));
	position: relative;
	margin-top: min(calc(-100vh + 590px), calc(-100vh + (590 / 1920)*100vw));
}

#mv .mv_bottom .inner {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: min(100px, calc((100 / 1920)*100vw));
}

#mv .mv_bottom .inner h3 {
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: min(32px, calc((32 / 1920)*100vw));
	border-bottom: min(3px, calc((3 / 1920)*100vw)) solid #fff;
    width: fit-content;
    margin: 0px auto min(80px, calc((80 / 1920)*100vw));
    padding-bottom: min(25px, calc((25 / 1920)*100vw));
	position: relative;
}

#mv .mv_bottom .inner h3:before {
	content: "";
	width: min(60px, calc((60 / 1920)*100vw));
	height: min(60px, calc((60 / 1920)*100vw));
    border: min(3px, calc((3 / 1920)*100vw)) solid #fff;
    border-left: none;
    border-top: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    bottom: calc((-33 / 1920)*100vw);
}

#mv .mv_bottom .inner h3:after {
	content: "";
    position: absolute;
    height: min(calc(61px / cos(45deg) / 2), calc((((61 / 1920)*100vw) / cos(45deg)) / 2));
    width: min(calc(61px / cos(45deg)), calc(((61 / 1920)*100vw) / cos(45deg)));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #0986d3;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc((-42 / 1920)*100vw);
}


#mv .mv_bottom .inner h3 span {
	font-size: min(42px, calc((42 / 1920)*100vw));
	color: #fff;
}

#mv .mv_bottom .inner ul li {
	width: min(1000px, calc((1000 / 1920)*100vw));
	padding: min(16px, calc((16 / 1920)*100vw)) min(27px, calc((27 / 1920)*100vw)) min(16px, calc((16 / 1920)*100vw));
	border-radius: min(32.5px, calc((32.5 / 1920)*100vw));
	background: #fff;
	margin-top: min(30px, calc((30 / 1920)*100vw));
	font-size: clamp(14px, calc((22 / 1920)*100vw), 22px);
	font-weight: 700;
	display: flex;
	align-items: center;
}

#mv .mv_bottom .inner ul li:before {
	content: "";
	display: inline-block;
	width: min(35px, calc((35 / 1920)*100vw));
	height: min(32px, calc((32 / 1920)*100vw));
	margin-right: min(12px, calc((12 / 1920)*100vw));
	background: url("../images/list-check.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

@media screen and (max-width: 1200px) {
	#mv .mv_top h2,
	#mv .mv_top h2 + p {
		left: calc((25 / 375)*100vw);
	}
	
	#mv .mv_top h2 {
		top: calc((90 /769)*100vw);
	}
	
	#mv .mv_top h2 + p {
		top: calc((160 /769)*100vw);
	}
	
	#mv .mv_bottom {
		height: min(700px, calc((550 /769)*100vw));
	}
}

@media screen and (max-width: 768px) {
	#mv {
		overflow-x: hidden;
	}
	
	#mv .mv_top h2 {
		left: calc((25 / 375)*100vw);
		top: 86px;
	}		
	
	#mv .mv_top h2 span,
	#mv .mv_top h2 span b {
		font-size: min(54px, calc((32 / 375)*100vw));
	}
	
	#mv .mv_top h2 span {
		max-width: 9em;
		line-height: calc((63 / 375)*100vw);
	}
	
	#mv .mv_top h2 span b {
		border-bottom-width: calc((1 / 375)*100vw);
	}
	
	#mv .mv_top h2 span em {
		width: min(111px, calc((58 / 375)*100vw));
  		height: min(111px, calc((58 / 375)*100vw));
		font-size: min(74px, calc((39 / 375)*100vw));
		line-height: calc((53 / 375)*100vw);
		margin-inline: calc((2.5 / 375)*100vw);
	}
	
	#mv .mv_top h2 + p {
		left: 50%;
        top: 664px;
        transform: translateX(-50%) !important;
        width: 100%;
		flex-wrap: wrap;
        justify-content: center;
		text-shadow: none;
		padding-inline: 15px;
	}
	
	#mv .mv_top h2 + p em {
		font-size: 22px;
		padding-left: 5px;
		padding-right: 5px;
		background: linear-gradient(to top, rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 36px, transparent 36px);
	}

	#mv .mv_top h2 + p em:has(strong) {
		background: linear-gradient(to top, transparent 2px, rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 35px, transparent 35px);
	}
	
	#mv .mv_top h2 + p em strong {
		font-size: 28px;		
	}
	
	#mv .mv_top h2 + p em strong:before,
	#mv .mv_top h2 + p em strong:after {
		filter: brightness(0) invert(1);
	}
		
	#mv .mv_top h2 + p em strong:before {
		width: 36px;
		height: 45px;
		margin-left: -10px;
	}
	
	#mv .mv_top h2 + p em strong:after {
		width: 22px;
		height: 35px;
        position: relative;
		top: 10px;
	}
	
	#mv .mv_top h2 + p em:has(span) {
		white-space: nowrap;
	}
	
	#mv .mv_top h2 + p em span {
		font-size: 22px;
	}
	
	#mv .mv_top img.mv_room {
		width: min(420px, calc((280 / 375)*100vw));
		height: min(420px, calc((280 / 375)*100vw));
		top: 95px;
		right: -53px;
	}
	
	#mv .mv_top img.mv_gap {
		left: -24px;
		top: 279px;
		width: min(156px, calc((120 / 375)*100vw));
		height: min(156px, calc((120 / 375)*100vw));
	}
	
	#mv .mv_top img.mv_sink {
		left: calc((60 / 375)*100vw);
		top: 381px;
		width: min(210px, calc((150 / 375)*100vw));
		height: min(210px, calc((150 / 375)*100vw));
	}

	#mv .mv_top img.mv_staff {
		top: 267px;
		width: 260px;
		height: 374px;
		right: -10px;
		z-index: 1;
	}
	
	#mv .mv_bottom {
		margin-top: calc(-100vh + 240px);
		height: 1150px;
		background-position: center 190px, top;
    	background-size: calc((350 / 375)*100vw), cover;
	}
	
	#mv .mv_bottom .inner {
		width: 100%;
		bottom: 75px;
	}
	
	#mv .mv_bottom .inner h3 {
		font-size: 20px;
		flex-wrap: wrap;
		max-width: 275px;
		margin-bottom: 47px;
		border-bottom: 3px solid #fff;
	}
	
	#mv .mv_bottom .inner h3:before {
		width: 25px;
		height: 25px;
		border: 3px solid #fff;
		border-left: none;
	    border-top: none;
		bottom: -16px;
	}
	
	#mv .mv_bottom .inner h3:after {
		height: calc((25px / cos(45deg)) / 2);
		width: calc(25px / cos(45deg));
		bottom: -17px;
	}
	
	#mv .mv_bottom .inner h3 span {
		font-size: 27px;
	}
	
	#mv .mv_bottom .inner ul li {
		width: 100%;
		font-size: 18px;
		border-radius: 40px;
		min-height: 115px;
		padding: 17px 15px;
		margin-top: 20px;
	}
	
	#mv .mv_bottom .inner ul li:before {
		position: relative;
		top: 1px;
		width: 35px;
    	height: 31px;
		flex-shrink: 0;
		margin-right: 10px;
	}
}

@media screen and (max-width: 375px) {
	#mv .mv_top h2 + p em {
		font-size: 21px;
	}
	
	#mv .mv_top h2 + p em:has(strong) {
		background: linear-gradient(to top, transparent 1px, rgba(255, 255, 255, 0.7) 1px, rgba(255, 255, 255, 0.7) 33px, transparent 33px);
	}
	
	#mv .mv_top h2 + p em strong {
		font-size: 25px;
	}
	
	#mv .mv_bottom .inner {
		bottom: 35px;
	}
	
	#mv .mv_bottom .inner ul li {
		font-size: 16px;
	}
}

/************************* MAIN *************************/
section {
	margin-top: -95px;
	padding-top: 170px;
}

@media screen and (max-width: 768px) {
	section {
		margin-top: max(-95px, calc((-65 / 375)*100vw));
	}
}

#strong {
	background: #efefef;
}

#strong h2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
}

#strong h2 span {
	display: block;
	font-size: 26px;
	width: 100%;
}

#strong h2 em {
	font-size: 56px;
	color: #d10b78;
	
}

#strong ul {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 130px;
}

#strong ul li {
	width: calc((100% - 60px) / 3);
	border-radius: 17.5px;
	overflow: hidden;
	background: #fff;
}

#strong ul li dl dt {
	height: 200px;
	background: #ccc;
}

#strong ul li dl dt img {
	height: 100%;
	object-fit: cover;
}

#strong ul li dl dd {
	font-size: 14px;
	padding: 0 15px 15px;
}

#strong ul li dl dd h3 {
	text-align: center;
	font-size: 22px;
	margin: 35px auto 25px;
	position: relative;
}

#strong ul li dl dd h3:before {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: absolute;
	top: -75px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36px;
	color: #0986d3;
	background: #fff;
}

#strong ul li:nth-child(1) dl dd h3:before {
	content: "01";
}
#strong ul li:nth-child(2) dl dd h3:before {
	content: "02";
}
#strong ul li:nth-child(3) dl dd h3:before {
	content: "03";
}
#strong ul li:nth-child(4) dl dd h3:before {
	content: "04";
}
#strong ul li:nth-child(5) dl dd h3:before {
	content: "05";
}
#strong ul li:nth-child(6) dl dd h3:before {
	content: "06";
}

#strong ul li dl dd h3 span {
	font-size: 22px;
	color: #d10b78;
}

#strong article {
	background: #0986d3;
	padding: 110px 0 90px;
	position: relative;
}

#strong article:before {
	position: absolute;
	content: "";
	width: calc(150px * cos(45deg));
	height: calc(150px * cos(45deg));
	background: #0986d3;
	top: -53px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
}

#strong article .inner {
	max-width: 990px;
}

#strong article h3,
#strong article h3 span {
	font-size: 36px;
	text-align: center;
	color: #fff;
	margin-bottom: 70px;
}

#strong article p {
	color: #fff;
	font-size: 18px;
	line-height: 1.9;
	margin-bottom: 40px;
}

#strong article p span {
	color: #fff18a;
	font-size: 26px;
}

#strong article p.signature {
	text-align: right;
}

#strong article p.signature span {
	color: #fff;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.9;
	white-space: nowrap;
	display: inline-block;
}

#strong article img {
	width: 340px;
}

#strong article img:nth-of-type(2) {
	margin-top: 5px;
}

@media screen and (max-width: 1200px) {
	#strong ul li dl dt {
		height: calc((200 / 1200)*100vw);
	}
	
	#strong article p,
	#strong article p.signature span {
		font-size: 16px;
	}
	
	#strong article p span {
		font-size: 24px;
	}
}

@media screen and (max-width: 768px) {
	#strong h2 {
		max-width: calc((240 / 375)*100vw);
		font-size: calc((24 / 375)*100vw);
    	margin-inline: auto;
	}
	
	#strong h2 span {
		font-size: calc((17 / 375)*100vw);
		margin-bottom: 10px;
	}
	
	#strong h2 em {
    	font-size: calc((37 / 375)*100vw);
	}
	
	#strong ul li {
		width: 100%;
	}
	
	#strong ul li dl dt {
		height: calc((175 / 375)*100vw);
	}
	
	#strong ul li dl dt img {
		width: 100%;
	}
	
	#strong ul li dl dd {
    	font-size: min(14px, calc((14 / 375)*100vw));
		padding-bottom: 40px;
		line-height: min(26px, calc((22 / 375)*100vw));
	}
	
	#strong article:before {
		display: none;
	}
	
	#strong article h3,
	#strong article h3 span {
		font-size: min(36px, calc((24 / 375)*100vw));
	}

	#strong article h3 span {
		white-space: nowrap;
	}
	
	#strong article h3 + div {
		display: flex;
		flex-wrap: wrap;
	}
	
	#strong article p,
	#strong article p.signature span {
		font-size: 15px;
	}
	
	#strong article img {
		width: 100%;
		max-width: 300px;
		margin-inline: auto;
		margin-bottom: 40px;
	}
	
	#strong article p span {
		font-size: 20px;
		font-weight: bold;
	}
	
	#strong article p:nth-of-type(1) {
		order: 0;
	}
	
	#strong article img:nth-of-type(1) {
		order: 1;
	}
	
	#strong article p:nth-of-type(n+2) {
		order: 2;
	}
	
	#strong article img:nth-of-type(2) {
		order: 3;
	}
	
	#strong article p:nth-of-type(n+5) {
		order: 4;
	}
	
	#strong article p.signature {
		width: 100%;
	}
}

@media screen and (max-width: 375px) {
	#strong ul li dl dd h3,
	#strong ul li dl dd h3 span {
		font-size: 20px;
	}
}


#career {
	padding: 175px 0 0px;
	background: url("../images/bubble_blue_bg.png");
	background-position: center -150px;
	background-repeat: no-repeat;
	background-size: 1300px;
}

#career h2 {
	margin-bottom: 45px;
}

#career a.instagram {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	max-width: 360px;
	margin: 0 auto 40px;
	padding: 14.5px 20px;
	background: #fff;
	border: 1px solid #d10b78;
	text-align: center;
}

#career a.instagram:before {
	grid-column: 1/2;
	grid-row: 1/3;
	content: "";
	width: 59px;
	height: 59px;
	margin: auto;
	background: url("../images/instagram.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#career a.instagram span {
	grid-column: 2/3;
	grid-row: 1/2;
	font-size: 18px;
	transition: all 0.25s ease;
}

#career a.instagram p {
	grid-column: 2/3;
	grid-row: 2/3;
	font-size: 24px;
	transition: all 0.25s ease;
}

#career a.instagram:hover span,
#career a.instagram:hover p {
	color: #d10b78;
}

#career .inner {
	max-width: 1000px;
}

#career a.instagram + p {
	margin-bottom: 50px;
}

.insta_list{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0px 0;
}

.insta_list li{
    position: relative;
    width: calc((100% - 15px)/4);
}

@media screen and (max-width: 768px){
    .insta_list li{
        width: calc((100% - 10px)/3);
    }
}

@media screen and (max-width: 375px){
    .insta_list li{
        width: calc((100% - 5px)/2);
    }
}


.insta_list li::before{
	content: "";
	display: block;
	padding-top: 100%;
}

.insta_list a{
	position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.insta_list img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
	#career {
		background-size: calc((420 / 375) * 100vw);
    	background-position: center 30px;
	}
	
	#career a.instagram + p {
		font-size: 15px;
		line-height: 24px;
	}
}

@media screen and (max-width: 375px) {
	#career a.instagram span {
		font-size: 12px;
	}
}


#service {
	background: linear-gradient(to bottom, transparent 0, transparent 180px, #0986d3 180px, #0986d3 100%);
	padding: 365px 0 110px;
	position: relative;
	margin-top: 0;
	overflow: hidden;
}

#service:before {
	content: "";
	display: block;
	position: absolute;
	width: 450px;
	height: 715px;
	background: url("../images/service_bg_bfr.png");
	background-repeat: no-repeat;
	background-size: contain;
	left: -25px;
	top: 245px;
}

#service:after {
	content: "";
	display: block;
	position: absolute;
	width: 395px;
	height: 772px;
	background: url("../images/service_bg_aft.png");
	background-repeat: no-repeat;
	background-size: cover;
	right: 0px;
	top: 245px;
}

#service .inner {
	max-width: 1030px;
	position: relative;
	z-index: 1;
}

#service h2 {
	color: #fff;
	position: relative;
	margin-bottom: 25px;
}

#service h2:before {
	content: "";
	display: block;
	width: 230px;
	height: 230px;
	background: url("../images/emlem.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -260px;
	left: 50%;
	transform: translateX(-50%);
}

#service h2 + p {
	margin: 50px auto 45px;
	text-align: center;
	color: #fff;
	font-size: 18px;
}

#service h2 + p span {
	color: #fff18a;
	font-weight: bold;
	font-size: 100%;
}

#service .service-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin-bottom: 50px;
}

#service .service-menu li {
	border: 2px solid #fff;
	border-radius: 25px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0986d3;
	transition: background 0.25s ease;
}

#service .service-menu li:has(input:checked) {
	background: #fff;
}

#service .service-menu li input {
	display: none;
}

#service .service-menu li label {
	cursor: pointer;
	color: #fff;
	font-weight: 700;
	padding: 9.5px 20px;
	transition: color 0.25s ease;
}

#service .service-menu li:has(input:checked) label {
	color: #0986d3;
}

#service .service-contents {
	position: relative;
}

#service .service-contents > li {
	background: #fff;
	border-radius: 30px;
	padding: 30px;
	display: none;
	opacity: 0;
	animation: Fade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes Fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#service .service-menu:has(li input#service-01:checked) ~ .service-contents > li.service-01,
#service .service-menu:has(li input#service-02:checked) ~ .service-contents > li.service-02,
#service .service-menu:has(li input#service-03:checked) ~ .service-contents > li.service-03,
#service .service-menu:has(li input#service-04:checked) ~ .service-contents > li.service-04,
#service .service-menu:has(li input#service-05:checked) ~ .service-contents > li.service-05,
#service .service-menu:has(li input#service-06:checked) ~ .service-contents > li.service-06 {
	display: inherit;
	opacity: 1;
}

#service .service-contents > li dl {
	display: flex;
	gap: 30px;
}

#service .service-contents > li dl > * {
	width: calc((100% - 30px)/2);
}

#service .service-contents > li dl dt h3 {
	color: #0986d3;
	font-size: 26px;
	border-bottom: 1px solid #0986d3;
	padding-bottom: 20px;
	margin: 115px 0 35px;
}

#service .service-contents > li dl dd {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

@media screen and (max-width: 1200px) {
	#service:before,
	#service:after {
		background-repeat: repeat-y;
	}
	
	#service:before {
		height: calc((715 / 1200)*100vw);
		width: calc((450 / 1200) * 100vw);
	}

	#service:after {
		height: calc((772 / 1200)*100vw);
		width: calc((395 / 1200) * 100vw);
	}	
	
	#service .service-contents > li dl dt h3 {
		font-size: 22px;
	}
}

@media screen and (max-width: 768px) {
	#service {
		padding-top: 285px;
	}
	
	#service:before {
		width: calc((98 / 375)*100vw);
		height: calc((156 / 375)*100vw);
		left: calc((-25 / 375)*100vw);
    	top: 205px;
	}
	
	#service:after {
		height: calc((169 / 365)*100vw);
		width: calc((115 / 365) * 100vw);
		right: calc((-35 / 365) * 100vw);
    	top: 200px;
	}
	
	#service h2 {
		font-size: min(36px, calc((26 / 375)*100vw));
	}
	
	#service h2:before {
		width: 150px;
		height: 150px;
		top: -170px;
	}
	
	#service .service-menu {
		gap: 15px 4px;
		margin-bottom: 20px;
	}
	
	#service .service-menu li label {
		font-size: 12px;
		padding: 4.5px 7.5px;
	}
	
	#service .service-contents > li {
		padding: 20px 20px 30px;
	}
	
	#service .service-contents > li dl {
		flex-direction: column;
	}
	
	#service .service-contents > li dl > * {
		width: 100%;
	}
	
	#service .service-contents > li dl dt h3 {
		margin: 0 0 15px;
		padding-bottom: 10px;
		font-size: 20px;
	}
}
@media screen and (max-width: 375px) {
	#service .service-contents > li dl dt h3 {
		font-size: 17px;
	}
}



#price {
	padding: 155px 0;
	background: #e6f8ff;
}

#price .inner {
	max-width: 1000px;
}

#price h2 {
	margin-bottom: 40px;
}

#price h2 ~ p {
	line-height: 30px;
	text-align: center;
}

#price h2 + p {
	margin-bottom: 20px;
}

#price .price-sheets {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin-bottom: 65px;
}

#price .price-sheets > div {
	width: calc((100% - 40px) / 2);
	margin-top: 15px;
}

#price .price-sheets .air-con {
	width: 100%;
	margin-top: 40px;
}

#price .price-sheets h3 {
	color: #0986d3;
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

#price .price-sheets h3 span {
	color: #0986d3;
}

#price .price-sheets h3:after {
	content: "";
	display: block;
	width: 80px;
	height: 1px;
	background: #0986d3;	
	margin: 15px calc((100% - 80px)/2) 30px;
}

#price .price-sheets .table {
	border: 1px solid #0986d3;
	border-radius: 30px;
	overflow: hidden;
}

#price .price-sheets table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}

#price .price-sheets table thead tr {
	background: #0986d3;
}

#price .price-sheets table thead tr th,
#price .price-sheets table thead tr th span {
	color: #fff;
}

#price .price-sheets table thead tr th {
	width: calc(100% / 3);
	height: 70px;
	border-right: 1px solid #0986d3;
}

#price .price-sheets table thead tr th span,
#price .price-sheets table tbody tr th span {
	font-size: 14px;
}

#price .price-sheets table thead tr th:nth-of-type(2n) {
	background: #27a3e0;
	border-right: 1px solid #27a3e0;
}

#price .price-sheets table tbody tr {
	border-bottom: 1px solid #ccc;
}

#price .price-sheets table tbody tr:last-of-type {
	border-bottom: none;
}

#price .price-sheets table tbody th {
	background: #efefef;
	border-right: 1px solid #ccc;
	line-height: 24px;
	height: 70px;
	font-weight: 600;
}

#price .price-sheets table tbody td {
	text-align: center;
}

#price .price-sheets table tbody td:nth-of-type(2n-1) {
	border-right: 1px solid #ccc;
}

#price .price-sheets table tbody td span {
	font-size: 22px;
	color: #0986d3;
	text-align: center;
}

#price ul.astarisk li {
	padding-bottom: 12px;
}

@media screen and (max-width: 768px) {
	#price h2 ~ p {
		font-size: 15px;
		line-height: 22px;
	}
	
	#price h2 + p {
		margin-bottom: 30px;
	}
	
	#price .price-sheets h3 {
		font-size: 20px;
	}
	
	#price .price-sheets h3::after {
		margin-top: 10px;
	}
	
	#price .price-sheets > div {
		width: 100%;
	}
	
	#price .price-sheets table thead tr th {
		font-size: 14px;
		width: auto;
	}
	
	#price .price-sheets table tr th:first-of-type {
		width: calc((125/375)*100vw);
	}
	
	#price .price-sheets table thead tr th span {
		font-size: 12px;
		display: block;
	}
	
	#price .price-sheets table tbody th {
		font-size: 16px;
		line-height: 18px;
	}
	
	#price .price-sheets table tbody tr th em {
		white-space: nowrap;
		font-size: 16px;
	}
	
	#price .price-sheets table tbody tr th span {
		font-size: 12px;
		font-weight: normal;
	}
	
	#price .price-sheets table tbody td {
		font-size: 12px;
	}
	
	#price .price-sheets table tbody td span {
		font-size: 15px;
	}
	
	#price ul.astarisk li {
		font-size: 15px;
	}
}

@media screen and (max-width: 375px) {
	#price .price-sheets table tbody th,
	#price .price-sheets table tbody tr th em {
		font-size: 12px;
	}
}


#flow {
	background: url(../images/flow_bg.jpg);
    background-position-x: center;
    background-position-y: 95px;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 175px 15px 80px;
    margin-top: -175px;
}

#flow .inner {
	max-width: 1200px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 30px;
	padding: 40px;
}

#flow .inner h2 {
	margin-bottom: 60px;
}

#flow .inner ul {
	display: flex;
}

#flow .inner ul li {
	display: grid;
	grid-template-columns: 80px auto;
	grid-template-rows: 80px auto;
	font-size: 20px;
	gap: 15px 0;
}

#flow .inner ul li:after {
	grid-column: 2/3;
	grid-row: 1/2;
	content: "";
	height: 50px;
	width: 18px;
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	background: #0986d3;
	margin: 0 14px 0 18px;
	align-self: center;
}

#flow .inner ul li:last-child:after {
	display: none;
}

#flow .inner ul li span {
	grid-column: 1/2;
	grid-row: 1/2;
	color: #0986d3;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid #0986d3;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	padding: 0 0 5px 1px;
}

#flow .inner ul li p {
	grid-column: 1/2;
	grid-row: 2/3;
	font-size: 20px;
	writing-mode: vertical-rl;
	display: inline-block;
	align-content: center;
}

@media screen and (max-width: 1440px) {
	#flow .inner ul li {
		grid-template-columns: 75px auto;
		grid-template-rows: 75px auto;
	}
	#flow .inner ul li span {
	    width: 75px;
		height: 75px;
    	font-size: 34px;
		padding: 0 0 3px 0px;
	}
}

@media screen and (max-width: 1200px) {
	#flow .inner ul {
		overflow-x: scroll;
	}
	
	#flow .inner ul li { 
		padding-bottom: 50px;
	}
}

#about h2 {
	margin-bottom: 65px;
}

#about h2 span {
	display: flex;
	color: #0986d3;
	justify-content: center;
	align-items: center;
	font-size: 19px;
	font-weight: 700;
	margin-top: 20px;
}

#about h2 span em {
	color: #0986d3;
	font-size: 28px;
	margin-left: 5px;
}

#about .info {
	display: flex;
	width: 100%;
	gap: 45px;
}

#about .info > * {
	width: calc((100% - 45px)/2);
}

#about .info dl {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
}

#about .info dl dt {
	width: 100px;
	color: #0986d3;
	font-weight: 700;
	padding: 16px 10px;
	border-bottom: 1px solid #ccc;
}

#about .info dl dd {
	width: calc(100% - 100px);	
	padding: 16px 10px;
	border-bottom: 1px solid #ccc;
}

#about .info dl dd:nth-of-type(1) {
	padding: 11px 10px;	
}

#about .info dl dd em {
	font-size: 24px;
	font-weight: 700;
}

#about .area-contact {
	background: url("../images/wave_bg.png");
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	margin-top: -190px;
	padding: 330px 0 75px;
}

#about .area-contact .inner { 
	display: flex;
	gap: 45px;
}

#about .area-contact .inner > * {
	width: calc((100% - 45px)/2);
}

#about .area .astarisk {
	margin-top: 35px;
	color: #fff;
	text-align: center;
}

#about .area .astarisk li {
	color: #fff;
}

#about .contact p {
	color: #fff;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.75;
	text-align: center;
	margin-bottom: 35px;
}

#about .contact p span {
	font-size: 100%;
	font-weight: bold;
	color: #fff18a;
}

#about .contact .phone-line {
	background: #fff;
	border-radius: 20px;
	padding: 40px;
}

#about .contact .phone-line h3 {
	font-size: 20px;
	font-weight: 400;
	text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#about .contact .phone-line h3:after {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    background: #0986d3;
    margin: 10px calc((100% - 200px) / 2) 10px;
}

#about .contact .phone-line .tel-hour {
	width: fit-content;
	margin: 0 auto 30px;
}

#about .contact .phone-line .tel-hour:before {
	font-size: 35px;
	margin-top: 7px;
}

#about .contact .phone-line .tel-hour a {
	font-size: 38px;
}

#about .contact .phone-line .tel-hour span {
	font-size: 18px;
}

#about .contact .phone-line .line {
	max-width: 300px;
	margin: 0 auto;
	font-size: 30px;
	padding-bottom: 16px;
}

#about .contact .phone-line .line:after {
	width: 51px;
	height: 49px;
	margin-left: 25px;
}

@media screen and (max-width: 1200px) {
	#about .info dl dd em {
		font-size: min(24px, calc((18 /769) * 100vw));
	}
	
	#about .info dl dd span {
		white-space: nowrap;
	}
	
	#about .area-contact .inner {
		flex-wrap: wrap;
	}
	
	#about .area-contact .inner > * {
		width: 100%;
		max-width: 555px;
		margin-inline: auto;
	}
}

@media screen and (max-width: 768px) {
	#about .info {
		flex-wrap: wrap;
	}
	
	#about .info > * {
		width: 100%;
	}
	
	#about .info dl dd em {
		font-size: 18px;
	}
	
	#about .contact p {
		font-size: 20px;
	line-height: 1.75;
	margin-bottom: 35px;
	}
	
	#about .contact .phone-line .tel-hour a {
		font-size: 32px;
	}
	
	#about .contact .phone-line .tel-hour a:before {
		font-size: 23px;
		position: relative;
		top: -2.5px;
	}
	
	#about ul.astarisk li {
	font-size: 15px;
	}
	
	#about ul.astarisk li br {
	display: none;
	}
}

@media screen and (max-width: 375px) {
	#about .info dl dt {
		width: 100%;
		text-align: center;
	}
	
	#about .info dl dd {
		width: 100%;
		text-align: center;
	}
	
	#about .contact .phone-line {
		padding: 20px;
	}
	
	#about .contact .phone-line .tel-hour a {
		font-size: 28px;
	}
	
	#about .contact .phone-line .tel-hour a::before {
		font-size: 16px;
		top: -4px;
	}
	
	#about .contact .phone-line .tel-hour span {
		font-size: 14px;
	}
}

/************************* FOOTER *************************/
footer {
    background: #0986d3;
	text-align: center;
	padding-bottom: 40px;
}

footer .inner {
	position: relative;
}

footer copyright {
	color: #fff;
	font-size: 12px;
}

#pagetop {
	position: fixed;
	right: 25px;
	bottom: 20px;
	z-index: 1;
}

#pagetop a img {
	width: 60px;
	height: 60px;
}

@media screen and (max-width: 768px) {
	footer {
		padding-bottom: 70px;
	}
	
	#pagetop {
		right: 15px;
  		bottom: 10px;
	}
	
	#pagetop a img {
		width: 45px;
		height: 45px;
	}
}

@media screen and (max-width: 375px) {
	footer copyright {
		font-size: 10px;
	}
}


