/**!
 * rev. 2023-06-08
 * copyright © 2023
 */

@charset "UTF-8";

@font-face {
	font-family: YuGothicM;
	src: local("Yu Gothic Medium");
}

@font-face {
	font-family: icons;
	font-style: normal;
	font-weight: normal;
	src: url("../font/icons.eot");
	src: url("../font/icons.eot?#iefix") format("embedded-opentype"),
		url("../font/icons.woff") format("woff"),
		url("../font/icons.ttf") format("truetype");
}

/*
======================================
	TAVI
	2019.6.05
	last 2019.08.21

	[1]Hero
	[2]Container Size
	[3]Title
	[4]Column
	[5]Color Box
	[6]Movie
	[7]Daido
	[8]Tavi
	[9]Merit
	[10]System
	[11]Faq
	[12]Contact
======================================
*/

/*
-------------------------
	[1]Hero
-------------------------
*/

.c-hero {
	padding: 80px 0 145px;
	text-align: center;
}

.c-hero-logo {
	width: 492px;
	margin: 0 auto 40px;
}

.c-hero-text {
	font-size: 2rem;
	color: #02376d;
	line-height: 1.8;
}

@media screen and (max-width: 767px) {
	.c-hero {
		padding: 44.53333vw 0 19.33333vw;
	}

	.c-hero-logo {
		width: 62.4vw;
		margin-bottom: 4.66667vw;
	}

	.c-hero-text {
		font-size: 1.4rem;
		line-height: 1.7;
	}
}

/*
-------------------------
	[2]Container Size
-------------------------
*/

.container-490, .container-600, .container-670, .container-690, .container-760, .container-820 {
	margin-left: auto;
	margin-right: auto;
}

.container-490 {
	width: 490px;
}

.container-600 {
	width: 600px;
}

.container-670 {
	width: 670px;
}

.container-690 {
	width: 690px;
}

.container-760 {
	width: 760px;
}

.container-820 {
	width: 820px;
}

@media screen and (max-width: 767px) {
	.container-490, .container-600, .container-670, .container-690, .container-760, .container-820 {
		width: 100%;
	}

	.container-490, .container-600, .container-670 {
		padding-left: 15px;
		padding-right: 15px;
	}

	.container-690, .container-760 {
		padding-left: 25px;
		padding-right: 25px;
	}
}

/*
-------------------------
	[3]Title
-------------------------
*/

.title-h2, .title-h2-white {
	font-size: 4.2rem;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	position: relative;
	z-index: 0;
}

.title-h2::before, .title-h2-white::before {
	content: '';
	width: 118px;
	height: 118px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: -1;
}

.title-h2 {
	color: #019ae9;
}

.title-h2::before {
	background: url('/tavi/img/bg-title-h2.png') no-repeat 0 0;
	background-size: contain;
}

.title-h2-white {
	color: #fff;
}

.title-h2-white::before {
	background: url('/tavi/img/bg-title-h2-white.png') no-repeat 0 0;
	background-size: contain;
}

.title-h3 {
	font-size: 2.2rem;
	font-weight: 500;
	color: #02376d;
	line-height: 1.6;
	text-align: center;
}

.title-h4 {
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	position: relative;
}

.title-h4 span {
	font-size: 3.2rem;
	color: #019ae9;
}

.title-h4::after {
	background: -webkit-gradient(linear, left top, right top, from(#019ae9), to(#10c8a3));
	background: linear-gradient(to right, #019ae9 0%, #10c8a3 100%);
	content: '';
	width: 100%;
	height: 2px;
	display: block;
	position: absolute;
	bottom: -15px;
	left: 0;
}

.title-bg-blue {
	background: #019ae9;
	border-radius: 20px;
	font-size: 2rem;
	font-weight: 500;
	color: #fff;
	text-align: center;
}

.title-bg-blue span {
	background: #fff;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	margin-right: 20px;
	font-size: 1.6rem;
	color: #029ce6;
	display: inline-block;
}

.title-yellow {
	font-size: 2.4rem;
	font-weight: 500;
	color: #fff71b;
}

.title-blue {
	font-size: 1.8rem;
	font-weight: 500;
	color: #019ae9;
}

.title-black {
	font-size: 1.8rem;
	font-weight: 500;
}

.title-white {
	font-size: 2rem;
	font-weight: 500;
	color: #fff;
}

@media screen and (max-width: 767px) {
	.title-h2, .title-h2-white {
		font-size: 2.6rem;
	}

	.title-h2::before, .title-h2-white::before {
		width: 86px;
		height: 86px;
	}

	.title-h3 {
		font-size: 2rem;
		text-align: left;
	}

	.title-h4 {
		font-size: 1.8rem;
	}

	.title-h4 span {
		font-size: 2rem;
	}

	.title-h4::after {
		bottom: -10px;
	}

	.title-bg-blue {
		border-radius: 18px;
		font-size: 1.8rem;
	}

	.title-bg-blue span {
		margin-right: 10px;
	}

	.title-yellow {
		font-size: 2rem;
	}

	.title-blue {
		font-size: 1.6rem;
	}

	.title-black {
		font-size: 1.6rem;
	}

	.title-white {
		font-size: 1.5rem;
	}
}

/*
-------------------------
	[4]Column
-------------------------
*/

.column-2-01, .column-2-02, .column-2-03, .column-2-04, .column-2-05 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.column-2-01-left {
	width: 530px;
}

.column-2-01-left p:nth-child(n + 1) {
	margin-top: 25px;
}

.column-2-01-right {
	width: 180px;
}

.column-2-02-left {
	width: 298px;
}

.column-2-02-right {
	width: 400px;
}

.column-2-03-left {
	width: 385px;
}

.column-2-03-right {
	width: 405px;
}

.column-2-04 > * {
	width: 355px;
	margin-bottom: 10px;
}

.column-2-04 figcaption {
	font-size: 2rem;
	font-weight: 500;
	color: #019ae9;
}

.column-2-04 .note {
	width: 100%;
	font-size: 1.2rem;
	text-align: right;
}

.column-2-05-left {
	width: 180px;
}

.column-2-05-right {
	width: 470px;
}

@media screen and (max-width: 767px) {
	.column-2-01, .column-2-03, .column-2-04 {
		display: block;
	}

	.column-2-01-left, .column-2-01-right, .column-2-02-left, .column-2-02-right, .column-2-03-left, .column-2-03-right, .column-2-04 > *, .column-2-05-left, .column-2-05-right {
		width: 100%;
	}

	.column-2-01-left p:nth-child(n + 1), .column-2-01-right {
		margin-top: 5.33333vw;
	}

	.column-2-02-left {
		width: 100%;
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	.column-2-02-right {
		width: 100%;
		margin-bottom: 5.33333vw;
		-webkit-box-ordinal-group: 2;
		    -ms-flex-order: 1;
		        order: 1;
	}

	.column-2-04 > * {
		margin-bottom: 0;
	}

	.column-2-04 > *:not(:first-child) {
		margin-top: 30px;
	}

	.column-2-04 figcaption {
		font-size: 1.8rem;
	}

	.column-2-04 .note {
		margin-top: 2px;
	}

	.column-2-05-left img {
		width: 40vw;
		margin: 0 auto 10px;
		display: block;
	}
}

/*
-------------------------
	[5]Color Box
-------------------------
*/

.bg-gray-box {
	background: #f7f7f7;
	border-radius: 10px;
	width: 100%;
	padding: 35px 30px;
}

.bg-gray-box img {
	margin: 0 auto;
	display: block;
}

.bg-white-box {
	background: #fff;
	border-radius: 10px;
	padding: 35px 35px;
}

@media screen and (max-width: 767px) {
	.bg-gray-box, .bg-white-box {
		padding: 20px 15px;
	}
}

/*
-------------------------
	[6]Movie
-------------------------
*/

.movie-container {
	padding: 38px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.movie-container .movie-box {
	width: 355px;
}

.movie-container .text-box {
	width: 300px;
}

.movie-container .text-box dt, .movie-container .text-box dd {
	padding-left: 5px;
}

.movie-container .title-blue {
	border-bottom: 1px solid #dfdfdf;
	margin-bottom: 10px;
	font-size: 2.4rem;
}

.movie-contents {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}

.movie-contents iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width: 767px) {
	.movie-container {
		padding: 20px 15px;
	}

	.movie-container .movie-box, .movie-container .text-box {
		width: 100%;
	}

	.movie-container .text-box {
		margin-top: 10px;
	}

	.movie-container .title-blue {
		font-size: 2rem;
	}
}

/*
-------------------------
	[7]Daido
-------------------------
*/

.c-daido .column-2-01-right img {
	width: 157px;
}

.c-daido .bg-gray-box img {
	width: 578px;
}

@media screen and (max-width: 767px) {
	.c-daido .column-2-01-right img {
		margin: 2.66667vw auto 0;
		display: block;
	}

	.c-daido .bg-gray-box img {
		width: 100%;
	}
}

/*
-------------------------
	[8]Tavi
-------------------------
*/

.c-tavi-pict01 {
	width: 261px;
}

.c-tavi-pict02 {
	width: 621px;
}

.c-tavi-pict03 {
	width: 463px;
}

@media screen and (max-width: 767px) {
	.c-tavi-pict01 {
		width: 55.73333vw;
	}

	.c-tavi-pict02, .c-tavi-pict03 {
		width: 100%;
	}
}

/*
-------------------------
	[9]Merit
-------------------------
*/

.c-merit dd {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.c-merit dt {
		text-align: center;
	}
}

/*
-------------------------
	[10]System
-------------------------
*/

.c-system .column-2-04 figure {
	margin-bottom: 10px;
}

/*
-------------------------
	[11]Faq
-------------------------
*/

.c-faq-list li {
	background: #fff;
	border-radius: 10px;
	padding: 30px 28px;
}

.c-faq-list li:not(:first-child) {
	margin-top: 20px;
}

.c-faq-list dt, .c-faq-list dd {
	padding-left: 50px;
	position: relative;
}

.c-faq-list dt::before, .c-faq-list dd::before {
	border-radius: 50%;
	width: 32px;
	height: 32px;
	font-size: 1.8rem;
	font-weight: 500;
	color: #fff;
	line-height: 32px;
	text-align: center;
	display: block;
	position: absolute;
	top: 3px;
	left: 0;
}

.c-faq-list dt {
	margin-bottom: 10px;
	font-size: 2rem;
	font-weight: 500;
	color: #019ae9;
	line-height: 1.6;
}

.c-faq-list dt::before {
	background: #019ae9;
	content: 'Q';
}

.c-faq-list dd::before {
	background: #10c8a4;
	content: 'A';
}

.c-faq-list .note-text, .c-faq-list .note-link {
	font-size: 1.3rem;
}

.c-faq-list .note-text {
	margin-top: 10px;
}

.c-faq-list .note-link {
	margin-bottom: 10px;
	text-indent: 1em;
}

.c-faq-list .note-link a {
	text-decoration: underline;
}

@media screen and (min-width: 768px) {
	.c-faq-list .note-link a:hover {
		text-decoration: none;
	}
}

@media screen and (max-width: 767px) {
	.c-faq-list li {
		padding: 20px 15px;
	}

	.c-faq-list li:not(:first-child) {
		margin-top: 4vw;
	}

	.c-faq-list dt, .c-faq-list dd {
		padding-left: 40px;
	}

	.c-faq-list dt::before, .c-faq-list dd::before {
		width: 28px;
		height: 28px;
		font-size: 1.6rem;
		line-height: 28px;
		top: 1px;
	}

	.c-faq-list dt {
		font-size: 1.8rem;
	}

	.c-faq-list .note-text, .c-faq-list .note-link {
		font-size: 1.2rem;
	}
}

/*
-------------------------
	[12]Contact
-------------------------
*/

.c-contact {
	text-align: center;
	position: relative;
}

.c-contact .title-yellow {
	border-bottom: 1px solid #fff;
	width: 850px;
	margin: 0 auto 30px;
	padding-bottom: 10px;
}

.c-contact-tel {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.c-contact-tel .tel {
	margin-bottom: 20px;
	padding-left: 58px;
	font-size: 4.4rem;
	font-weight: bold;
	color: #fff;
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: left;
	position: relative;
}

.c-contact-tel .tel::before {
	background: url('/tavi/img/icon/icon-tel.svg') no-repeat 0 0;
	background-size: contain;
	content: '';
	width: 31px;
	height: 41px;
	display: block;
	position: absolute;
	top: 50%;
	left: 13px;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}

.c-contact-tel .time {
	background: #fff;
	border-radius: 16px;
	font-size: 1.7rem;
	color: #00a8db;
}

.c-contact-mail a .mail {
	border: 2px solid #fff;
	border-radius: 10px;
	height: 77px;
	padding-top: 17px;
	-webkit-transition: 300ms;
	transition: 300ms;
}

.c-contact-mail a .mail img {
	width: 318px;
}

.c-contact-mail .note-text {
	margin-top: 5px;
	font-size: 1.4rem;
	color: #fff;
}

@media screen and (min-width: 768px) {
	.c-contact-mail a:hover .mail {
		background: #019ae9;
	}
}

@media screen and (max-width: 767px) {
	.c-contact {
		padding-left: 25px;
		padding-right: 25px;
	}

	.c-contact .title-yellow {
		width: 100%;
		padding-bottom: 20px;
		font-size: 2.4rem;
		line-height: 1.4;
	}

	.c-contact .title-white {
		margin-bottom: 15px;
	}

	.c-contact-tel {
		width: 100%;
	}

	.c-contact-tel .tel {
		padding-left: 27px;
		font-size: 3rem;
		letter-spacing: 0.01em;
		text-align: center;
		white-space: nowrap;
	}

	.c-contact-tel .tel a {
		color: #fff;
	}

	.c-contact-tel .tel::before {
		width: 27px;
		height: 35px;
		left: calc(50% - 115px);
		-webkit-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}

	.c-contact-tel .time {
		border-radius: 14px;
		max-width: 275px;
		margin: 10px auto 0;
		font-size: 1.4rem;
	}

	.c-contact-mail a .mail {
		max-width: 325px;
		height: 96px;
		margin: 0 auto;
		padding-top: 13px;
	}

	.c-contact-mail a .mail img {
		width: 261px;
	}
}