@charset "UTF-8";

/*-------------------------
__hoge_style
-------------------------*/

#mv{background: url("images/ttl_bg.jpg")no-repeat;background-position: center;background-size: cover;text-align:left;}
#mv .sec_ttl_wrap{margin:0 auto;padding:100px 50px;box-sizing:border-box;max-width:1200px;}
#mv .sec_ttl_wrap .en{font-size:24px;color:var(--skyblue);margin-bottom:10px;font-weight: 900;}
#mv .sec_ttl_wrap .sec_ttl{font-size:50px;color:#fff;}

#main .inner ul{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 20px;}
#main .inner ul li{width: calc((100% - 40px) / 3);}
#main .inner ul li a{color: var(--black);padding: 20px;display: block;box-sizing: border-box;font-size: 16px;transition: .3s;border-bottom: 1px solid #ddd;text-align: left;position: relative;}
#main .inner ul li a:before,
#main .inner ul li a::after{content: "";width: 8px;height: 2px;display: inline-block;border-radius: 2px;background: #ddd;position: absolute;right: 20px;transition: .3s;}
#main .inner ul li a::before{top: calc(50% - 4px);transform: rotate(45deg);}
#main .inner ul li a::after{bottom: calc(50% - 4px);transform: rotate(-45deg);}

@media screen and (min-width:768px) {
	#main .inner ul li a:hover{border-bottom: 1px solid var(--skyblue);}
	#main .inner ul li a:hover:before,
	#main .inner ul li a:hover::after{right: 30px;background: var(--skyblue);}
}
@media screen and (max-width:959px) {
	#mv .sec_ttl_wrap{padding:60px 50px;}
	#mv .sec_ttl_wrap .en{font-size:20px;}
	#mv .sec_ttl_wrap .sec_ttl{font-size:36px;}
}
@media screen and (max-width:767px) {
	#mv .sec_ttl_wrap{padding:60px 20px;}
	#main .inner ul{gap: 10px;}
	#main .inner ul li{width: 100%;}
	#main .inner ul li a{border-bottom: 1px solid var(--skyblue);}
	#main .inner ul li a:before,
	#main .inner ul li a::after{background: var(--skyblue);font-size: 14px;}
}
@media screen and (max-width:374px) {
	#mv .sec_ttl_wrap .en{font-size:16px;}
	#mv .sec_ttl_wrap .sec_ttl{font-size:24px;}
	#mv .sec_ttl_wrap{padding:40px 10px;}
}