@charset "utf-8";

/* CSS INFORMATION -================================================= */
/* File name : top.css */
/* Description : トップページ用CSS */
/* ================================================================== */

/* ================================================================== */
/*    共通
/* ================================================================== */
#loading {
	position: fixed;
	left: 0;
	top: 0;
	width: auto;
	min-width: 100%;
	height: auto;
	min-height: 100%;
	background: #f0eb76;
	z-index: 100;
}

.loading_illust {
	position: absolute;
	background: url(../images/common/img_load.png) no-repeat center;
	background-size: 100% auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: calc(172 / 375 * 100%);
	height: calc(258 / 375 * 100vw);
	z-index: 100;
}

.loading_box {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(110 / 172 * 100%);
	margin: calc(95 / 172 * 100%) 0 0 calc(31 / 172 * 100%);
	-webkit-transform: skewY(-30deg);
	transform: skewY(-30deg);
}

.gauge_box {
	border: 2px solid #1051b8;
}

#loading #gauge {
	width: 0px;
	height: calc(15 / 375 * 100vw);
	background: #1051b8;
}

#loading #percent {
	margin-top: .5em;
	text-align: center;
	font-size: 2.5rem;
	color: #ef6b81;
}

#percent-text {
	font-size: 3.5rem;
}

.loading_illust::before {
	content: '';
	position: absolute;
	background: url(../images/top/mv/gif_mv_pc_sousa_01.gif) no-repeat center;
	background-size: contain;
	width: calc(51 / 172 * 100%);
	padding-top: calc(76 / 172 * 100%);
	bottom: 0;
	left: 0;
	z-index: 150;
	margin: 0 0 calc(-5 / 172 * 100%) calc(71 / 172 * 100%);
}

.loading_illust::after {
	content: '';
	position: absolute;
	background: url(../images/top/mv/gif_mv_pc_sousa_02.gif) no-repeat center;
	background-size: contain;
	width: calc(55 / 172 * 100%);
	padding-top: calc(72 / 172 * 100%);
	bottom: 0;
	right: 0;
	z-index: 150;
	margin: 0 calc(-5 / 172 * 100%) calc(25 / 172 * 100%) 0;
}

.fadeout {
	-webkit-animation: fadeOut 1s;
	animation: fadeOut 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}



.sec_wrap {
	padding: calc(190 / 750 * 100%) 0;
}

.sec_wrap::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: skewY(-5deg);
	transform: skewY(-5deg);
}

.sec_wrap .inner {
	z-index: 3;
}

.sec_ttl_wrap {
	margin: 0 0 calc(120 / 750 * 100%);
}

.sec_ttl {
	margin: 0 auto calc(40 / 750 * 100%);
}

.sec_ttl_txt {
	color: #1f344f;
	font-size: 3rem;
	line-height: 1.5;
	text-align: center;
}

/* 2021.03.22 SPbnr*/
.spBnr {
	z-index: 9999;
	width: 90%;
	margin: 0 auto;
	position: fixed;
	top: 10vh;
	left:calc(50% - 90%/2);
}
.spBnrSet {
	margin-top: 5vh;
}
}

@media screen and (min-width: 768px) {
	.loading_illust {
		width: calc(172 / 1200 * 100%);
		height: calc(258 / 1200 * 100vw);
	}

	.loading_box {
		width: calc(110 / 175 * 100%);
		margin: calc(95 / 175 * 100%) 0 0 calc(31 / 175 * 100%);
	}

	#loading #gauge {
		height: calc(15 / 1200 * 100vw);
	}

	#loading #percent {
		font-size: 1.4rem;
	}

	#percent-text {
		font-size: 2rem;
	}


	.sec_wrap {
		padding: calc(110 / 1200 * 100%) 0;
	}

	.sec_ttl_wrap {
		margin: 0 0 calc(65 / 1200 * 100%);
	}

	.sec_ttl {
		margin: 0 auto calc(15 / 1200 * 100%);
	}

	.sec_ttl_txt {
		font-size: 1.8rem;
	}


}

@media screen and (min-width: 1200px) {
	.loading_illust {
		width: 172px;
		height: 258px;
	}

	#loading #gauge {
		height: 15px;
	}


	.sec_wrap {
		padding: 110px 0;
	}

}


/* ================================================================== */
/*    mv
/* ================================================================== */
#wrapper {
	padding: 100vh 0 0;
	background-color: #edfcff;
	overflow: hidden;
}

.mv_wrap,
.mv_wrap_blur {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.mv_wrap_blur {
	z-index: 1;
}

.mv,
.mv_blur {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}

.mv_blur {
	visibility: hidden;
}

.mv_img,
.mv_img_blur {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	max-width: calc(687 / 750 * 100%);
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.mv_img img,
.mv_img_blur img {
	width: auto;
	height: auto;
	max-height: 80%;
	max-width: 100%;
	margin: 0 auto;
}

.mv_img .img_wrap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.mv_img span {
	position: absolute;
	z-index: 50;
}

.mv_img .gif01 {
	width: 11%;
	bottom: 12.8%;
	left: 72.1%;
}

.mv_img .gif02 {
	width: 3.6%;
	top: 36.6%;
	left: 27%;
}

.mv_img .gif03 {
	width: 12.5%;
	top: 25.7%;
	left: 15.7%;
}

.mv_img .gif04 {
	width: 3.6%;
	top: 47.3%;
	right: 12.2%;
}

.mv_img .gif05 {
	width: 19.7%;
	top: 52.5%;
	left: 43.8%;
	z-index: 60;
}

.mv_img .gif06 {
	width: 4.6%;
	top: 42.8%;
	left: 18.2%;
	z-index: 54;
}

.mv_img .gif07 {
	width: 2.6%;
	top: 20.6%;
	left: 29.6%;
}

.mv_img .gif08 {
	width: 14.9%;
	bottom: 23.7%;
	left: 8.7%;
}

.mv_img .gif09 {
	width: 2.5%;
	bottom: 27%;
	left: 22.6%;
}

.mv_img .gif10 {
	width: 2.9%;
	top: 44.2%;
	right: 25.9%;
}

.mv_img .gif11 {
	width: 2.7%;
	top: 43.1%;
	right: 27.9%;
}

.mv_img .gif12 {
	width: 3.1%;
	top: 20.2%;
	left: 18.2%;
}

.mv_img .gif13 {
	width: 3.4%;
	top: 22.5%;
	left: 14.5%;
}

.mv_img .gif14 {
	width: 8.3%;
	top: 6.9%;
	left: 35.3%;
}

.mv_img .gif15 {
	width: 12.8%;
	top: 37.8%;
	left: 48.6%;
}

.mv_img .gif16 {
	width: 4.8%;
	bottom: 19.7%;
	right: 43.5%;
}

.mv_img .gif17 {
	width: 2.5%;
	bottom: 28.7%;
	right: 28.5%;
}

.mv_img .gif18 {
	width: 21.7%;
	top: 19.6%;
	right: 47%;
}


.mv_img .gif19 {
	width: 32.4%;
	bottom: 33%;
	left: 13%;
}

.mv_img .gif20 {
	width: 32.4%;
	bottom: 34.5%;
	left: 13.3%;
	z-index: 53;
}

.mv_img .gif21 {
	width: 8.6%;
	bottom: 45.7%;
	left: 16.5%;
	z-index: 52;
}

.mv_img .gif22 {
	width: 23%;
	bottom: 32.8%;
	left: 16.3%;
	z-index: 54;
}

.mv_img .gif23 {
	width: 9%;
	bottom: 35.7%;
	left: 21.5%;
	z-index: 51;
}

.mv_img .gif24 {
	width: 9%;
	bottom: 43.4%;
	left: 31.2%;
	z-index: 51;
}


.mv_img .airplane {
	width: 5.5%;
	z-index: 55;
	bottom: 19.1%;
	left: 43.2%;
}


/*雲の動き 1つ目*/
.cloud_move1 {
	-webkit-animation: cloud_move1_9955 3s linear infinite;
	animation: cloud_move1_9955 3s linear infinite;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	margin: 1rem 0 !important;
}

@-webkit-keyframes cloud_move1_9955 {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	50% {
		-webkit-transform: translateY(-35%);
		transform: translateY(-35%)
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes cloud_move1_9955 {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	50% {
		-webkit-transform: translateY(-35%);
		transform: translateY(-35%)
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

.mv_img .cloud1 {
	width: 6%;
	bottom: 23%;
	left: 35.6%;
}


/*雲の動き 2つ目*/
.cloud_move2 {
	-webkit-animation: cloud_move2_9955 3s linear infinite;
	animation: cloud_move2_9955 3s linear infinite;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	margin: 1rem 0 !important;
}

@-webkit-keyframes cloud_move2_9955 {
	0% {
		-webkit-transform: translateY(-35%);
		transform: translateY(-35%)
	}

	50% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	100% {
		-webkit-transform: translateY(-35%);
		transform: translateY(-35%)
	}
}

@keyframes cloud_move2_9955 {
	0% {
		-webkit-transform: translateY(-35%);
		transform: translateY(-35%)
	}

	50% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	100% {
		-webkit-transform: translateY(-35%);
		transform: translateY(-35%)
	}
}

.mv_img .cloud2 {
	width: 5.8%;
	bottom: 27.4%;
	left: 42.7%;
	z-index: 60;
}





@media screen and (min-width: 768px) {

	.mv {
		-webkit-transition: 2s ease;
		transition: 2s ease;
	}

	.mv,
	.mv_blur {
		height: 94vh;
		top: 3vh;
	}

	.mv_blur {
		visibility: visible;
		display: none;
	}

	.mv_img,
	.mv_img_blur {
		display: block;
		text-align: center;
	}

	.mv_wrap.fixed .mv {
		position: absolute;
		top: 16vh;
	}

	.mv_wrap.down .mv {
		position: absolute;
		top: 110vh;
	}

	.mv_img .area {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: auto;
		height: 100%;
		margin: 0 auto;
	}

	.mv_img .img_wrap {
		bottom: 0;
		margin: auto;
	}

	/* 2021.03.22 SPbnr*/
.spBnr {
	width: 768px;
	left:calc(50% - 768px/2);
}

.spBnrSet {
	margin-top: 100px;
}

}

/*IE対策*/
@media screen and (min-width: 768px) and (-ms-high-contrast: none) {
	.mv_img .area > img {
		width: 100%;
	}
}

@media screen and (min-width: 768px) and (orientation: portrait) {
	.mv_wrap.fixed .mv {
		top: 2vh;
	}
}

@media screen and (min-width: 768px) and (orientation: landscape) {
	.mv_img .img_wrap {
		height: 75.2vh !important;
		-webkit-transition: 2s ease;
		transition: 2s ease;
	}

}

@media screen and (min-width: 1200px) {}


/* ================================================================== */
/*    pickup
/* ================================================================== */
.pickup {
	z-index: 3;
}

.pickup.sec_wrap::before {
	background-color: #feffa3;
}

.pickup .sec_ttl {
	width: calc(532 / 750 * 100%);
	margin: 0 auto calc(30 / 750 * 100%);
}

.pickup .sec_content {
	width: 100%;
}

.pickup_list::after {
	content: "";
	display: block;
	width: calc(69 / 750 * 100%);
	padding-top: calc(127 / 750 * 100%);
	background: url(../images/top/pickup/img_pickup_illust.png) no-repeat left top;
	background-size: auto 100%;
	position: absolute;
	top: 0;
	right: 0;
	margin: calc(406 / 750 * 100%) calc(40 / 750 * 100%) 0 0;
}

.pickup_list .slick-arrow {
	margin-top: calc(30 / 750 * 100%);
}

.pickup_list_main {
	width: calc(670 / 750 * 100%);
	margin: 0 auto;
	padding: calc(30 / 750 * 100%) 0 0;
}

.pickup_list_photo {}

.pickup_list_photo p,
.pickup_list_photo figcaption {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: calc(110 / 750 * 100vw);
	height: calc(110 / 750 * 100vw);
	background: url(../images/common/bg_flower_blue.svg) no-repeat left top;
	background-size: auto 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: calc(-30 / 670 * 100%) 0 0 calc(-15 / 670 * 100%);
	color: #fff;
	font-size: 3rem;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	font-style: italic;
	line-height: 1;
	z-index: 3;
}

.pickup_list_photo p span,
.pickup_list_photo figcaption span {
	display: block;
	font-size: 2.6rem;
	text-indent: -0.2em;
}

.pickup_list_txt {
	padding: calc(45 / 670 * 100%) 0;
	background-color: #fafafa;
}

.pickup_list_title {
	padding: 0 calc(40 / 670 * 100%);
	color: #1f344f;
	font-size: 3.3rem;
	font-weight: 900;
	line-height: 1.576;
	letter-spacing: -0.1em;
}

.pickup_list_details {
	margin: calc(35 / 670 * 100%) 0 0;
	padding: calc(35 / 670 * 100%) calc(40 / 670 * 100%) 0;
	background: url(../images/common/line_gray_sp.png) no-repeat center top;
	background-size: calc(641 / 670 * 100%) auto;
	color: #587191;
	font-size: 2.8rem;
	line-height: 1.594;
	letter-spacing: -0.1em;
}

.pickup_list_main_btn2 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

@media screen and (min-width: 768px) {
	.pickup .sec_ttl {
		width: calc(317 / 1200 * 100%);
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		margin: 0 calc(200 / 1200 * 100%) 0 0;
	}

	.pickup .sec_content {
		width: calc(1000 / 1200 * 100%);
	}

	.pickup_list_main {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: calc(960 / 1000 * 100%);
		padding: calc(20 / 1000 * 100%) 0 0;
	}

	.pickup_list_photo {
		background-color: #fff;
	}

	.pickup_list_photo img {
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.pickup_list_main_btn:hover img {
		opacity: 0.5;
	}

	.pickup_list_main_btn2:hover img,
	.pickup_list_main_btn2:hover ~ .pickup_list_photo img,
	.pickup_list_main_btn2:hover ~ .pickup_list_txt,
	.pickup_list_main_btn2:hover ~ .pickup_list_title,
	.pickup_list_main_btn2:hover ~ .pickup_list_details {
		opacity: 0.5;
	}

	.pickup_list_photo p,
	.pickup_list_photo figcaption {
		width: calc(100 / 1200 * 100vw);
		height: calc(100 / 1200 * 100vw);
		margin: calc(-20 / 480 * 100%) 0 0 calc(-20 / 480 * 100%);
		font-size: 2.7rem;
	}

	.pickup_list_photo p span,
	.pickup_list_photo figcaption span {
		font-size: 2.3rem;
	}

	.pickup_list_photo {
		width: 50%;
	}

	.pickup_list_txt {
		width: 50%;
		padding: calc(45 / 960 * 100%) calc(45 / 960 * 100%) 0;
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.pickup_list_title {
		padding: 0;
		font-size: 3rem;
		line-height: 1.533;
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.pickup_list_details {
		margin: calc(20 / 480 * 100%) 0 0;
		padding: calc(20 / 480 * 100%) 0 0;
		background-size: 100% auto;
		font-size: 1.6rem;
		line-height: 1.625;
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.pickup_list::after {
		width: calc(43 / 1000 * 100%);
		padding-top: calc(79 / 1000 * 100%);
		top: auto;
		bottom: 0;
		margin: 0 calc(4 / 1000 * 100%) calc(-24 / 1000 * 100%) 0;
	}

	.pickup_list .slick-arrow {
		width: calc(44 / 1200 * 100vw);
		height: 100%;
		margin: 0;
		padding: calc(20 / 1000 * 100%) 0 0;
		cursor: pointer;
	}

	.pickup_list .slick-arrow::after {
		top: calc(20 / 1200 * 100vw);
	}
}

@media screen and (min-width: 1200px) {

	.pickup_list_photo p,
	.pickup_list_photo figcaption {
		width: 100px;
		height: 100px;
	}

	.pickup_list .slick-arrow {
		width: 44px;
	}

	.pickup .slick-arrow::before,
	.pickup .slick-arrow::after {
		width: 44px;
		height: 44px;
	}

	.pickup .slick-arrow::after {
		background-size: 8px auto;
		top: 20px;
	}
}



/* ================================================================== */
/*    topics
/* ================================================================== */
.topics {
	z-index: 3;
}

.topics.sec_wrap::before {
	background-color: #fafafa;
}

.topics .sec_ttl_wrap {
	margin: 0 0 calc(140 / 750 * 100%);
}

.topics .sec_ttl {
	width: calc(454 / 750 * 100%);
}

.topics .sec_ttl::before,
.topics .sec_ttl::after {
	content: "";
	display: block;
	width: calc(78 / 454 * 100%);
	padding-top: calc(89 / 454 * 100%);
	background: url(../images/top/topics/img_topics_illust1.png) no-repeat left top;
	background-size: auto 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	margin: calc(6 / 454 * 100%) 0 0 calc(-63 / 454 * 100%);
}

.topics .sec_ttl::after {
	width: calc(46 / 454 * 100%);
	padding-top: calc(90 / 454 * 100%);
	background: url(../images/top/topics/img_topics_illust2.png) no-repeat left top;
	background-size: auto 100%;
	margin: calc(5 / 454 * 100%) 0 0 calc(446 / 454 * 100%);
}

.topics_list {}

.topics_list > li:not(:last-child) {
	margin: 0 0 calc(45 / 670 * 100%);
	padding: 0 0 calc(35 / 670 * 100%);
	border-bottom: 1px solid #e4e4e4;
}

.topics_list_main {
	width: calc(590 / 670 * 100%);
	margin: 0 auto;
}

.topics_list_main_btn {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.topics .pickup_list_photo figcaption {
	width: calc(100 / 750 * 100vw);
	height: calc(100 / 750 * 100vw);
	margin: calc(-15 / 590 * 100%) 0 0 calc(-40 / 590 * 100%);
	background: url(../images/common/bg_flower_orange.svg) no-repeat left top;
	background-size: auto 100%;
	right: auto;
	left: 0;
	font-size: 3rem;
}

.topics .pickup_list_photo figcaption span {
	font-size: 2.7rem;
}

.topics_list_txt {
	width: 100%;
	margin: calc(35 / 590 * 100%) auto 0;
}

.topics_list_category {
	margin: 0 0 calc(15 / 590 * 100%);
	color: #30afca;
	font-size: 2.2rem;
	line-height: 1.333;
}

.topics_list_category span {
	display: inline-block;
	margin: 0 0.4em;
}

.topics_list_title {
	color: #1f344f;
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.4;
}

.topics_list_tag {
	width: calc(590 / 670 * 100%);
	margin: calc(25 / 590 * 100%) auto 0;
}

.topics_list_tag li {
	display: inline-block;
	font-size: 2.1rem;
	margin: 0 0.4em 0.4em 0;
}

.topics_list_tag li:nth-child(n + 6) {
	display: none;
}

.topics_list_tag li.topics_list_tag_over {
	display: inline-block;
}

.topics_list_tag li .topics_list_tag_box,
.topics_list_tag_over {
	padding: 0.34em 0.9em;
	background-color: #ededed;
	color: #88909b;
	font-family: 'M PLUS Rounded 1c';
	font-weight: 500;
	line-height: 1.25;
	background-color: #ededed;
	border-radius: 2em;
}

.topics_list_tag li .topics_list_tag_box::before {
	content: "#";
	display: inline;
}

.topics .more {
	margin-top: calc(135 / 670 * 100%);
}

.topics .more a {
	z-index: 2;
}

.topics .more::after {
	content: "";
	display: block;
	width: calc(104 / 400 * 100%);
	padding-top: calc(120 / 400 * 100%);
	background: url(../images/top/topics/img_topics_illust3.png) no-repeat left top;
	background-size: auto 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: calc(-68 / 400 * 100%) auto 0;
}

@media screen and (min-width: 768px) {
	.topics .sec_ttl_wrap {
		margin: 0 0 calc(65 / 1200 * 100%);
	}

	.topics .sec_ttl {
		width: calc(305 / 1200 * 100%);
	}

	.topics_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.topics_list > li {
		width: calc(308 / 1000 * 100%);
	}

	.topics_list > li:not(:last-child) {
		margin: 0 calc(38 / 1000 * 100%) 0 0;
		padding: 0;
		border: none;
	}

	.topics_list_main {
		width: 100%;
	}

	.topics .pickup_list_photo {
		width: 100%;
	}

	.topics_list_main:hover .pickup_list_photo img {
		opacity: 0.5;
	}

	.topics .pickup_list_photo figcaption {
		width: calc(80 / 1200 * 100vw);
		height: calc(80 / 1200 * 100vw);
		margin: calc(-20 / 308 * 100%) 0 0 calc(-20 / 308 * 100%);
		font-size: 2.1rem;
	}

	.topics .pickup_list_photo figcaption span {
		font-size: 1.8rem;
	}

	.topics_list_txt {
		margin: calc(25 / 308 * 100%) auto 0;
	}

	.topics_list_category {
		margin: 0 0 calc(12 / 308 * 100%);
		font-size: 1.2rem;
	}

	.topics_list_title {
		font-size: 2.4rem;
		line-height: 1.25;
	}

	.topics_list_tag {
		width: 100%;
		margin: calc(20 / 308 * 100%) auto 0;
	}

	.topics_list_tag li {
		margin: 0 0.6em 0.8em 0;
		font-size: 1.2rem;
	}

	.topics_list_tag li .topics_list_tag_box,
	.topics_list_tag_over {
		padding: 0.46em 1em;
	}

	.topics_list_tag li a.topics_list_tag_box:hover {
		background-color: #88909b;
		color: #ededed;
	}

	.topics .more {
		margin-top: calc(90 / 1000 * 100%);
	}

	.topics .more::after {
		margin-top: 0;
		opacity: 0;
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	.topics .more:hover::after {
		margin-top: calc(-68 / 400 * 100%);
		margin-top: -17%;
		opacity: 1;
	}
}

@media screen and (min-width: 1200px) {
	.topics .pickup_list_photo figcaption {
		width: 80px;
		height: 80px;
	}
}


/* ================================================================== */
/*    service
/* ================================================================== */
.service {}

.service.sec_wrap::before {
	background-color: #edfcff;
	z-index: 3;
}

.service .sec_ttl {
	width: calc(535 / 750 * 100%);
}

.service .sec_content {
	width: calc(700 / 750 * 100%);
	z-index: 3;
}

.service_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.service_list li {
	width: 50%;
	margin: 0 0 calc(70 / 700 * 100%);
}

.service_list li a::before {
	content: "";
	display: block;
	width: calc(380 / 350 * 100%);
	padding-top: calc(323 / 350 * 100%);
	margin: 0 0 calc(20 / 350 * 100%) calc(-15 / 350 * 100%);
}

.service1 a::before {
	background: url(../images/top/service/btn_service1.png) no-repeat left top;
	background-size: auto 100%;
}

.service2 a::before {
	background: url(../images/top/service/btn_service2.png) no-repeat left top;
	background-size: auto 100%;
}

.service3 a::before {
	background: url(../images/top/service/btn_service3.png) no-repeat left top;
	background-size: auto 100%;
}

.service4 a::before {
	background: url(../images/top/service/btn_service4.png) no-repeat left top;
	background-size: auto 100%;
}

.service5 a::before {
	background: url(../images/top/service/btn_service5.png) no-repeat left top;
	background-size: auto 100%;
}

.service6 a::before {
	background: url(../images/top/service/btn_service6.png) no-repeat left top;
	background-size: auto 100%;
}

.service_list li a .arrow1 {
	display: block;
	width: calc(300 / 350 * 100%);
	margin: 0 auto;
	padding: 0.9em 0;
	background-color: #ef6b81;
	border-radius: 2em;
	color: #fff;
	font-size: 2.6rem;
	font-family: 'M PLUS Rounded 1c';
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-align: center;
}

.service_list .service1 a .arrow1 {
	padding-right: 0.6em;
	letter-spacing: -0.05em;
}

@media screen and (min-width: 768px) {
	.service {
		padding: 0;
	}

	.service.sec_wrap::before {
		z-index: inherit;
		position: relative;
		height: 110vh;
	}

	.service.sec_wrap .inner {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: calc(110 / 1200 * 100%) 0 0;
	}

	.service .sec_ttl {
		width: calc(357 / 1200 * 100%);
	}

	.service .sec_content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		max-width: calc(687 / 750 * 100%);
		width: 100%;
		height: 94vh;
		position: absolute;
		top: 16vh;
		left: 0;
		right: 0;
	}

	.service_list {
		display: block;
		z-index: 2;
	}

	.service_list::before {
		content: "";
		display: block;
		width: 100%;
		padding-top: calc(1708 / 1920 * 100%);
	}

	.service_list li {
		width: calc(148 / 960 * 100%);
		margin: 0;
		position: absolute;
		top: 0;
		left: 0;
	}

	.service_list .service1 {
		width: calc(168 / 960 * 100%);
		margin: calc(100 / 960 * 100%) 0 0 calc(332 / 960 * 100%);
	}

	.service_list .service2 {
		margin: calc(650 / 960 * 100%) 0 0 calc(420 / 960 * 100%);
	}

	.service_list .service3 {
		margin: calc(257 / 960 * 100%) 0 0 calc(687 / 960 * 100%);
	}

	.service_list .service4 {
		margin: calc(171 / 960 * 100%) 0 0 calc(127 / 960 * 100%);
	}

	.service_list .service5 {
		margin: calc(386 / 960 * 100%) 0 0 calc(2 / 960 * 100%);
	}

	.service_list .service6 {
		margin: calc(399 / 960 * 100%) 0 0 calc(660 / 960 * 100%);
	}

	.service_list li a .arrow1,
	.service_list .service1 a .arrow1 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0;
		position: absolute;
		top: -0.25em;
		left: 0;
		font-size: calc(16 / 10 * 100%);
		font-size: 160%;
		background-color: transparent;
		-webkit-transform: rotate(0.05deg);
		transform: rotate(0.05deg);
		display: none;
	}

	.service_list li a::before {
		width: 100%;
		padding-top: calc(137 / 296 * 100%);
		margin: 0;
	}

	.service_list .service1 a::before {
		padding-top: calc(137 / 336 * 100%);
		background: url(../images/top/service/btn_service1_pc.png) no-repeat left top;
		background-size: 100% auto;
	}

	.service_list .service2 a::before {
		background: url(../images/top/service/btn_service2_pc.png) no-repeat left top;
		background-size: 100% auto;
	}

	.service_list .service3 a::before {
		background: url(../images/top/service/btn_service3_pc.png) no-repeat left top;
		background-size: 100% auto;
	}

	.service_list .service4 a::before {
		background: url(../images/top/service/btn_service4_pc.png) no-repeat left top;
		background-size: 100% auto;
	}

	.service_list .service5 a::before {
		background: url(../images/top/service/btn_service5_pc.png) no-repeat left top;
		background-size: 100% auto;
	}

	.service_list .service6 a::before {
		background: url(../images/top/service/btn_service6_pc.png) no-repeat left top;
		background-size: 100% auto;
	}

	.service_list li a .arrow1::after {
		display: none;
	}

	.service_list li a:hover {
		margin-top: -5%;
	}
}

@media screen and (min-width: 768px) and (orientation: portrait) {
	.service.sec_wrap::before {
		height: 90vh;
		z-index: 2;
	}

	.service .sec_content {
		top: 2vh;
	}
}

@media screen and (min-width: 1200px) {
	.service.sec_wrap .inner {
		padding: 110px 0 0;
	}
}


/* ================================================================== */
/*    works
/* ================================================================== */
.works {
	z-index: 3;
}

.works.sec_wrap::before {
	background-color: #66d7d1;
}

.works .sec_ttl {
	width: calc(445 / 750 * 100%);
}

.works .sec_ttl::before {
	content: "";
	display: block;
	width: calc(48 / 445 * 100%);
	padding-top: calc(75 / 445 * 100%);
	background: url(../images/top/works/img_works_illust1.png) no-repeat left top;
	background-size: auto 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: calc(32 / 445 * 100%) 0 0 calc(129 / 445 * 100%);
}

.works .sec_content {
	width: 100%;
}

.works_list {}

.works_list_main {
	width: calc(670 / 750 * 100%);
	margin: 0 auto;
	padding: 0 0 calc(70 / 750 * 100%);
}

.works_list_txt {
	width: calc(540 / 670 * 100%);
	margin: calc(30 / 670 * 100%) auto 0;
}

.works_list_txt::before,
.works_list_txt::after {
	content: "";
	display: block;
	width: calc(76 / 540 * 100%);
	padding-top: calc(102 / 540 * 100%);
	background: url(../images/top/works/img_works_illust3.png) no-repeat left top;
	background-size: auto 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 0 calc(-15 / 540 * 100%) calc(-67 / 540 * 100%);
}

.works_list_txt::after {
	background: url(../images/top/works/img_works_illust2.png) no-repeat left top;
	background-size: auto 100%;
	left: auto;
	right: 0;
	margin: 0 calc(-67 / 540 * 100%) calc(-15 / 540 * 100%) 0;
}

.works_list_title {
	padding: calc(40 / 670 * 100%) calc(40 / 670 * 100%);
	background-color: #fff;
	border-radius: 0.2em;
	color: #1f344f;
	font-size: 2.8rem;
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: -0.03em;
	z-index: 2;
}

.works_list_btn {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.works .more::after {
	content: "";
	display: block;
	width: calc(108 / 400 * 100%);
	padding-top: calc(80 / 400 * 100%);
	background: url(../images/top/works/img_works_illust4.png) no-repeat left top;
	background-size: auto 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto calc(-61 / 400 * 100%);
}

@media screen and (min-width: 768px) {
	.works .inner {
		max-width: none;
	}

	.works .sec_ttl {
		width: calc(297 / 1200 * 100%);
	}

	.works_list .draggable {
		padding: 0 calc(520 / 1440 * 100%) !important;
	}

	.works_list .slick-slide:not(.slick-active) {
		pointer-events: none;
		opacity: 0.5;
	}

	.works .slick-arrow {
		cursor: pointer;
	}

	.works .slick-arrow::before {
		background-color: rgba(250, 190, 0, 1);
	}

	.works .slick-arrow.prev {
		margin-left: calc(480 / 1440 * 100%);
	}

	.works .slick-arrow.next {
		margin-right: calc(480 / 1440 * 100%);
	}

	.works_list_main {
		width: calc(360 / 400 * 100%);
		padding: 0 0 calc(90 / 400 * 100%);
	}

	.works_list_photo {
		background-color: #fff;
	}

	.works_list_photo img {
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.works_list_main:hover .works_list_photo img {
		opacity: 0.5;
	}

	.works_list_txt {
		width: calc(320 / 360 * 100%);
		margin: calc(20 / 360 * 100%) auto 0;
	}

	.works_list_txt::before,
	.works_list_txt::after {
		display: none;
	}

	.slick-active .works_list_txt::before,
	.slick-active .works_list_txt::after {
		display: block;
		width: calc(40 / 320 * 100%);
		padding-top: calc(53 / 320 * 100%);
		margin: 0 0 calc(-15 / 320 * 100%) calc(-36 / 320 * 100%);
	}

	.slick-active .works_list_txt::after {
		margin: 0 calc(-36 / 320 * 100%) calc(-15 / 320 * 100%) 0;
	}

	.works_list_title {
		padding: calc(20 / 320 * 100%) calc(25 / 320 * 100%);
		font-size: 2rem;
		line-height: 1.55;
		border-radius: 0.4em;
	}
}

@media screen and (min-width: 1200px) {
	.works .sec_ttl {
		width: 297px;
	}
}


/*    news
/* ================================================================== */
.news {}

.news.sec_wrap::before {
	height: 110%;
	background-color: #fafafa;
}

.news .sec_ttl {
	width: calc(350 / 750 * 100%);
}

.news_list {
	margin: 0 0 calc(90 / 670 * 100%);
	padding: calc(45 / 670 * 100%) calc(40 / 670 * 100%);
	background-color: #fff;
}

.news_list li:not(:last-child) {
	margin: 0 0 calc(40 / 590 * 100%);
	padding: 0 0 calc(45 / 590 * 100%);
	background: url(../images/common/line_dot_gray.png) repeat-x left bottom;
	background-size: calc(8 / 590 * 100%) auto;
}

.news_list_box dt {
	margin: 0 0 calc(5 / 590 * 100%);
	color: #a3e0dd;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.news_list_box dd,
.news_list_box dd a {
	color: #777;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
}

@media screen and (min-width: 768px) {
	.news .sec_ttl {
		width: calc(234 / 1200 * 100%);
	}

	.news .sec_content {
		min-height: 19.2vw;
	}

	.news_list {
		width: calc(700 / 1000 * 100%);
		margin: 0 auto calc(70 / 1000 * 100%);
		padding: calc(25 / 1000 * 100%) calc(30 / 1000 * 100%);
		font-size: 2rem;
		border-radius: 0.4em;
	}

	.news_list_box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.news_list li:not(:last-child) {
		margin: 0 0 calc(15 / 640 * 100%);
		padding: 0 0 calc(15 / 640 * 100%);
		background-size: calc(4 / 640 * 100%) auto;
	}

	.news_list_box dt {
		width: calc(110 / 640 * 100%);
		margin: 0 0 0 calc(10 / 640 * 100%);
		font-size: 1.4rem;
		line-height: 1.7;
	}

	.news_list_box dd {
		width: calc(520 / 640 * 100%);
	}

	.news_list_box dd,
	.news_list_box dd a {
		font-size: 1.4rem;
		line-height: 1.7;
	}

	.news_list_box dd a {
		text-decoration: underline;
	}

	.news_list_box dd a:hover {
		text-decoration: none;
	}
}

@media screen and (min-width: 1200px) {
	.news .sec_content {
		min-height: 230px;
	}
}


/* ================================================================== */
/*    contact
/* ================================================================== */
.contact {
	padding-bottom: calc(400 / 750 * 100%);
}

.contact.sec_wrap::before {
	height: 110%;
	background-color: #85c9f4;
}

.contact .sec_ttl {
	width: calc(625 / 750 * 100%);
}

.contact_list {
	width: calc(590 / 670 * 100%);
	margin: 0 auto;
}

.contact_web a {
	margin: 0 0 calc(30 / 590 * 100%);
	padding: calc(42 / 590 * 100%) 0;
	background-color: #ffd739;
	border-radius: 1em;
	color: #1f344f;
	font-size: 3rem;
	font-family: 'M PLUS Rounded 1c';
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.contact_web a::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: calc(37 / 590 * 100%);
	margin: 0 0 calc(25 / 590 * 100%);
	background: url(../images/common/icon_mail1.png) no-repeat center top;
	background-size: auto 100%;
}

.contact_tel a {
	padding: calc(42 / 590 * 100%) 0;
	background-color: #01beaa;
	border-radius: 1em;
	color: #fff;
	font-size: 2.6rem;
	font-family: 'M PLUS Rounded 1c';
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.contact_tel a::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: calc(47 / 590 * 100%);
	margin: 0 0 calc(25 / 590 * 100%);
	background: url(../images/common/icon_tel.png) no-repeat center top;
	background-size: auto 100%;
}

.contact_tel a span {
	display: block;
	margin: 0 0 calc(10 / 590 * 100%);
	font-size: 6.7rem;
	font-family: 'Barlow', sans-serif;
	font-weight: 500;
	line-height: 1;
}

@media screen and (min-width: 768px) {
	.contact {
		padding-bottom: calc(170 / 1200 * 100%);
	}

	.contact.sec_wrap::before {
		height: 130%;
	}

	.contact .sec_ttl_wrap {
		margin: 0 0 calc(80 / 1200 * 100%);
	}

	.contact .sec_ttl {
		width: calc(424 / 1200 * 100%);
	}

	.contact_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: calc(800 / 1000 * 100%);
	}

	.contact_list li {
		width: calc(380 / 800 * 100%);
		margin: 0 calc(40 / 800 * 100%) 0 0;
	}

	.contact_list li:last-child {
		margin-right: 0;
	}

	.contact_web a {
		margin: 0;
		padding: calc(36 / 380 * 100%) 0;
		border: 5px solid #ffd739;
		font-size: 1.8rem;
		-webkit-transform: rotate(0.05deg);
		transform: rotate(0.05deg);
	}

	.contact_web a:hover {
		background-color: #fff;
	}

	.contact_web a::before {
		padding-top: calc(28 / 380 * 100%);
		margin: 0 0 calc(15 / 380 * 100%);
	}

	.contact_tel a {
		height: 100%;
		padding: calc(40 / 380 * 100%) 0;
		font-size: 1.6rem;
		text-shadow: 0 0 13px rgba(17, 142, 129, 1);
		pointer-events: none;
	}

	.contact_tel a span {
		margin: 0 0 calc(10 / 380 * 100%);
		font-size: 3.6rem;
		letter-spacing: 0.13em;
	}

	.contact_tel a::before {
		display: none;
	}
}

@media screen and (min-width: 1200px) {
	.contact {
		padding-bottom: 170px;
	}
}
