@charset "UTF-8";


#all-wrapper::before{ content: ""; position: absolute; left: 0; top: 0; width: 92.5%; height: 100%; margin-left: 7.5%; background-image: linear-gradient(rgba(197, 196, 195, 0.06) 1px, transparent 1px), linear-gradient(to right, rgba(197, 196, 195, 0.06) 1px, transparent 1px); background-size: 12px 12px; padding-left: 1px; transform: translateX(-1px); }
#main{ padding-bottom: 340px; }
#main .kv{ position: relative; width: 100%; padding-top: max(56.25%,100vh); padding-top: max(calc(var(--vh, 1vh) * 100),56.25%); z-index: 500; background-color: #ffffff; pointer-events: none; overflow: hidden; }
#main .kv .base{ width: 100%; padding-top: 56.25%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
#main .kv .base video{ width: 100%; height: 100%; }
#main .kv .fill{ width: 100%; height: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0.2; }
#main .kv video{ position: absolute; left: 50%; top: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%,-50%); }
#main .content-body{ width: 75%; margin: 0 auto;position: relative; z-index: 500; }
#main .content-body .ttl{ font-family: 'YakuHanJP', 'Outfit', sans-serif; font-size: 3.25rem; line-height: 1; color: #000033; font-weight: normal; padding: 80px 0; }
#main .content-body .list-item{ display: flex; display: -ms-flex; flex-wrap: wrap; justify-content: space-between; }
#main .content-body .list-item .item{ width: 32%; position: relative; }
#main .content-body .list-item .item:nth-child(n+4){ margin-top: 60px; }
#main .content-body .list-item .item .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0); z-index: 10; }
#main .content-body .list-item .item .photo-body{ position: relative; overflow: hidden; border-radius: 20px; }
#main .content-body .list-item .item01 .photo-body{ box-shadow: 0 8px 0 #3cb9d8; }
#main .content-body .list-item .item02 .photo-body{ box-shadow: 0 8px 0 #ea5460; }
#main .content-body .list-item .item03 .photo-body{ box-shadow: 0 8px 0 #7070d0; }
#main .content-body .list-item .item04 .photo-body{ box-shadow: 0 8px 0 #fbd903; }
#main .content-body .list-item .item05 .photo-body{ box-shadow: 0 8px 0 #38b485; }
#main .content-body .list-item .item06 .photo-body{ box-shadow: 0 8px 0 #fb8503; }
#main .content-body .list-item .item .photo-body .name{ position: absolute; left: 0; top: 0; color: #ffffff; width: 100%; padding: 24px 20px 0 20px; box-sizing: border-box; }
#main .content-body .list-item .item .photo-body .name .en{ font-family: 'YakuHanJP', 'Outfit', sans-serif; font-size: 2.25rem; line-height: 1; color: inherit; }
#main .content-body .list-item .item .photo-body .name .ja{ font-size: 1rem; color: inherit; }
#main .content-body .list-item .item .photo-body .photo img{ width: 100%; height: auto; }
#main .content-body .list-item .item .txt-body{ margin-top: 24px; display: flex; display: -ms-flex; justify-content: space-between; align-items: center; }
#main .content-body .list-item .item .txt-body .txt{ font-size: 1rem; line-height: 1.5; color: #222222; flex: 1; }
#main .content-body .list-item .item .txt-body .icon{ width: 62px; padding-top: 62px; border-radius: 50%; position: relative; }
#main .content-body .list-item .item01 .txt-body .icon{ background-color: #3cb9d8; }
#main .content-body .list-item .item02 .txt-body .icon{ background-color: #ea5460; }
#main .content-body .list-item .item03 .txt-body .icon{ background-color: #7070d0; }
#main .content-body .list-item .item04 .txt-body .icon{ background-color: #fbd903; }
#main .content-body .list-item .item05 .txt-body .icon{ background-color: #38b485; }
#main .content-body .list-item .item06 .txt-body .icon{ background-color: #fb8503; }
#main .content-body .list-item .item .txt-body .icon .arrow{ width: 22.5806%; height: 1px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #ffffff; }
#main .content-body .list-item .item .txt-body .icon .arrow::before{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: solid transparent; border-width: 4px 0 4px 4px; border-left-color: #ffffff; }
#main .bg-wrapper .lord01 .line03{ height: 930px; }

@media screen and (max-width: 1400px) {
	#main .kv .photo{ width: 1400px; position: relative; left: 50%; transform: translateX(-50%); }
	#main .kv .copy{ margin-top: 173px; }
}
@media screen and (max-width: 1060px) {
	#main .kv .txt-body .en{ font-size: 10.9433vw; }
	#main .content-body .list-item .item{ width: 48%; }
	#main .content-body .list-item .item:nth-child(n+3){ margin-top: 60px; }
}
@media screen and (max-width: 767.5px) {
	#main{ padding-bottom: 50%; }
	#main .content-body{ width: 75%; margin: 0 auto;position: relative; z-index: 500; }
	#main .content-body{ width: 80%; }
	#main .content-body .ttl{ font-size: 2.14rem; padding: 13.33% 0 10%; }
	#main .content-body .list-item{ display: block; }
	#main .content-body .list-item .item{ width: 100%; }
	#main .content-body .list-item .item:nth-child(n+2){ margin-top: 10%; }
	#main .content-body .list-item .item .photo-body{ border-radius: 5.3333vw; }
	#main .content-body .list-item .item01 .photo-body{ box-shadow: 0 1.8666vw 0 #3cb9d8; }
	#main .content-body .list-item .item02 .photo-body{ box-shadow: 0 1.8666vw 0 #ea5460; }
	#main .content-body .list-item .item03 .photo-body{ box-shadow: 0 1.8666vw 0 #7070d0; }
	#main .content-body .list-item .item04 .photo-body{ box-shadow: 0 1.8666vw 0 #fbd903; }
	#main .content-body .list-item .item05 .photo-body{ box-shadow: 0 1.8666vw 0 #38b485; }
	#main .content-body .list-item .item06 .photo-body{ box-shadow: 0 1.8666vw 0 #fb8503; }
	#main .content-body .list-item .item .photo-body .name{ padding: 5.666% 5% 0 5%; }
	#main .content-body .list-item .item .photo-body .name .en{ font-size: 2rem; }
	#main .content-body .list-item .item .photo-body .name .ja{ font-size: 1.0714rem; }
	#main .content-body .list-item .item .txt-body{ margin-top: 5.3333%; }
	#main .content-body .list-item .item .txt-body .icon{ width: 20.6666%; padding-top: 20.6666%; }
}




/*hover*/
/*-------------------------------------------------------*/
#main .content-body .list-item .item .txt-body .icon{ transition: transform 0.3s; }
#main .content-body .list-item .item .overlay:active~.txt-body .icon{ transform: scale(1.2); }

@media (hover: hover){
	#main .content-body .list-item .item .overlay:hover~.txt-body .icon{ transform: scale(1.2); }
}