@charset "utf-8";

/*-----------------------
    common.css
------------------------*/

/*----- font -----*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

/*----- reset -----*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
	vertical-align: baseline; background: transparent;
}
body {
	line-height: 1; color: #555;
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","MS P Gothic","Osaka","Hiragino Kaku Gothic Pro", Verdana,Arial, Helvetica, sans-serif; 
	-webkit-text-size-adjust: none;
}
ol, ul { list-style: none; }

:focus { outline: 0; }
img { max-width: 100%; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

/*----- common -----*/

:root {
  --text: #181919;
  --white: #fff;
  --black: #000;
  --red_light: #e50012;
  --red: #c32424;
  --red_dark: #bb3120;
  --blue: #1fabe8;
  --blue_light: #b7e1f2;
  --blue_dark: #1f6aa8;
  --green: #69af4b;
  --yellow_light: #f9be00;
  --yellow: #d5c836;
  --pink: #d26476;
  --purple: #4c3a92;
}

body {
    font-family: 'Zen Maru Gothic', arial, sans-serif;
	font-weight: 700;
    color: var(--text);
    overflow-x: hidden;
}


/* for CMS */
body:has(#wrapper){display:block;}
body:has(#wrapper)::after {position:relative;z-index:auto;pointer-events:all;opacity:1;background:none;}

a {
	transition: .5s;
}
a:hover {
	text-decoration: none;
}

.ojf img {
    width: 100%;
    object-fit: cover;
}

/* PC時Tel発信無効化 */
@media screen and (min-width: 769px){
    
    a[href^="tel"] {
        pointer-events: none;
    }
    
}

/*--- fadein ---*/

/* for CMS */
#wrapper .fadein{opacity:1;}

.fadein {
    opacity: 0;
    transform: translate(0, 60px);
    transition: all 1s;
}
.fadein.slow {
	transition-delay: 1s;
}
.fadein.scrollin{
    opacity: 1!important;
    transform: translate(0, 0)!important;
}
.fadein_first {
    animation-name: fadeIn1s;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(60px);
    opacity: 0;
}
@keyframes fadeIn1s {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }    
}
@media screen and (max-width: 767px){
	.fadein.slow {
		transition-delay: 0s;
	}
}

.pon {
    opacity: 0;
    transform: scale(0);
    transition: all 1s;
}
.pon.scrollin {
    opacity: 1;
	transform: scale(1);
}
.pon_first {
    opacity: 0;
    animation-name: zoomInAnime;
    animation-delay: .25s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: scale(0.5);
}
@keyframes zoomInAnime{
    0% {
    }
    100% {
	    opacity: 1;
        transform: scale(1);
    }    
}

.poyopoyo {
    animation: poyopoyo 2s ease-out infinite;
	text-align: center;
}
@keyframes poyopoyo {
    0%, 40%, 60%, 80% {
        transform: scale(1.0);
    }
    50%, 70% {
        transform: scale(0.95);
    }
}

.slidein {
 	animation: slide-skew 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
} 
@keyframes slide-skew {
	0% {
		transform: translate(180px,30px);
		opacity: 0;
	}
	100% {
		transform: translate(0,0);
	}
	20%,100% {
		opacity: 1;
	}
}

/*----- wrap -----*/

.wrap {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 30px;
}
.wrap_wide {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 30px;
}
.wrap_narrow {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 30px;
}

@media screen and (max-width: 767px){

    .wrap,
    .wrap_wide,
	.wrap_narrow {
        padding: 0 6vw;
    }
    
}

/*----- header -----*/

.header {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	background: var(--white);
}
.header .wrap_wide {
	display: flex;
	justify-content: space-between;
}
.header .h_top {
	position: relative;
	width: 350px;
}
.header .h_top .logo {
	width: 196px;
	padding: 11px 0;
}
.header .h_top .catch {
	position: absolute;
	top: 5px;
	right: -352px;
	font-size: 16px;
	font-weight: bold;
	width: 352px;
}
.header .h_top .catch br {
	display: none;
}
.header .sp_menu {
	width: calc(100% - 350px);
}
.header .menu {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.header .menu .ul {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	height: 120px;
}
.header .menu .ul .li a img {
	position: relative;
	top: 0;
	transition: .5s;
	width: 172px;
}
.header .menu .ul .li:nth-of-type(1) a img {
	width: 192px;
}
.header .menu .ul .li a:hover img {
	top: -10px;
}
.header .menu .ul .li:nth-of-type(1) {
	margin: 0;
}
.header .menu .ul .li:nth-of-type(2) {
	margin: 0 5px -5px 0;
}
.header .menu .ul .li:nth-of-type(3) {
	margin: 0 5px 7px 0;
}
.header .menu .ul .li:nth-of-type(4) {
	margin: 0 5px 20px 0;
}
.header .menu .ul .li:nth-of-type(5) {
	margin: 0 5px 5px 0;
}
.header .menu .ul .li:nth-of-type(6) {
	margin: 0 0 10px;
}


@media screen and (min-width: 768px) and (max-width: 1700px){
	
	.header .h_top {
		width: 200px;
	}
	.header .h_top .logo {
		width: 171.5px;
		padding: 17px 0;
	}
	
	.header .sp_menu {
		width: calc(100% - 200px);
	}
	.header .menu .ul .li a img {
		width: 10.5vw;
	}
	.header .menu .ul .li:nth-of-type(1) a img {
		width: 12vw;
	}
	.header .menu .ul .li a:hover img {
		top: -10px;
	}
	.header .menu .ul .li:nth-of-type(1) {
		margin: 0;
	}
	.header .menu .ul .li:nth-of-type(2) {
		margin: 0 .5vw -5px 0;
	}
	.header .menu .ul .li:nth-of-type(3) {
		margin: 0 .5vw 7px 0;
	}
	.header .menu .ul .li:nth-of-type(4) {
		margin: 0 .5vw 20px 0;
	}
	.header .menu .ul .li:nth-of-type(5) {
		margin: 0 .5vw 5px 0;
	}
	.header .menu .ul .li:nth-of-type(6) {
		margin: 0 0 10px;
	}	
	
}
@media screen and (min-width: 768px) and (max-width: 1260px){
	
	.header {
		height: 9vw;
	}
	.header .h_top {
		width: 17vw;
	}
	.header .h_top .logo {
		width: 15vw;
		padding: .75vw 0;
	}
	.header .h_top .catch {
		top: .5vw;
		font-size: 1.4vw;
	}
	.header .sp_menu {
		width: calc(100% - 17vw);
	}
	.header .menu .ul {
		height: 9vw;
	}
	.header .menu .ul .li a img {
		width: 10.5vw;
	}
	.header .menu .ul .li:nth-of-type(1) a img {
		width: 12vw;
	}
	.header .menu .ul .li a:hover img {
		top: -1vw;
	}
	.header .menu .ul .li:nth-of-type(1) {
		margin: 0;
	}
	.header .menu .ul .li:nth-of-type(2) {
		margin: 0 .5vw -.5vw 0;
	}
	.header .menu .ul .li:nth-of-type(3) {
		margin: 0 .5vw .7vw 0;
	}
	.header .menu .ul .li:nth-of-type(4) {
		margin: 0 .5vw 2vw 0;
	}
	.header .menu .ul .li:nth-of-type(5) {
		margin: 0 .5vw .5vw 0;
	}
	.header .menu .ul .li:nth-of-type(6) {
		margin: 0 0 1vw;
	}	
	
}
@media screen and (max-width: 767px){
	
	.header {
		height: 60px;
	}
	.header .wrap_wide {
		display: block;
	}
	.header .h_top {
		width: calc(100% - 40px);
		display: flex;
		align-items: center;
		gap: 0 0vw;
	}
	.header .h_top .logo {
		width: 98px;
		padding: 6px 0 5px;
		line-height: 0;
	}
	.header .h_top .catch {
		position: relative;
		top: auto;
		right: auto;
		width: calc(100% - 98px);
		font-size: min(3.25vw,14px);
		line-height: 1.5;
		text-align: center;
	}
	.header .h_top .catch br {
		display: inline-block;
	}
	.header .sp_menu {
		width: calc(100% + 12vw);
		margin-left: -6vw;
		background: var(--white);
		padding-bottom: 15px;
	}
	.header .menu {
		display: block;
	}
	.header .menu .ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		height: auto;
		width: min(400px,90%);
		margin: 0 auto;
		padding: 20px 0;
		gap: 0 5%;
	}
	.header .menu .ul .li {
		width: 43%;
	}
	.header .menu .ul .li:nth-of-type(1) {
		width: 48%;
	}
	.header .menu .ul .li a img {
		width: 100%;
	}
	.header .menu .ul .li:nth-of-type(1) a img {
		width: 100%;
	}
	.header .menu .ul .li a:hover img {
		top: 0;
	}
	.header .menu .ul .li:nth-of-type(1),
	.header .menu .ul .li:nth-of-type(2) {
		margin: 0;
	}
	.header .menu .ul .li:nth-of-type(3),
	.header .menu .ul .li:nth-of-type(4) {
		margin: 5px 0 10px;
	}
	.header .menu .ul .li:nth-of-type(5),
	.header .menu .ul .li:nth-of-type(6) {
		margin: 0;
	}	
	
}
@media screen and (min-width: 768px){
    .sp_menu {
        display: block!important;
    }
    .spbtn {
        display: none!important;
    }
}

/*----- nav -----*/

@media screen and (max-width: 767px){

    .spbtn {
        position: absolute;
        top: 10px;
        right: 4vw;
        display: block;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    .spbtn > div {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        background: var(--black);
        transition: .2s;
    }
    .spbtn > div:nth-of-type(1) {
        top: 8px;
    }
    .spbtn > div:nth-of-type(3) {
        top: 32px;
    }
    .spbtn.active > div {
        top: 50%;
        transform: rotate(37.5deg);
    }
    .spbtn.active > div:nth-of-type(2) {
        display: none;
    }
    .spbtn.active > div:nth-of-type(3) {
        top: 50%;
        transform: rotate(-37.5deg);
    }
    
}

/*----- footer -----*/

/* contact */

.f_contact {
	position: relative;
	margin-bottom: -50px;	
}
.m_end_blue + .f_contact {
	background-color: #e4f7ff;
}

/* footer */

.footer {
    position: relative;
    z-index: 3;
	padding: 90px 0 30px;
	background: url("/system_panel/uploads/images/bg_footer.png");
	color: var(--white);
}
.f_logo {
	width: 46.66%;
	margin: 0 auto 40px;
	padding: 10px 0;
	background: var(--white);
}
.f_logo .logo {
	width: 392px;
	margin: auto;
}
.f_frame {
	display: flex;
	justify-content: space-between;
}
.f_info {
	width: 50%;
}
.f_info .dl > div {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 15px;
}
.f_info .dl .dt {
	width: 90px;
	margin-top: 8px;
	padding: 4px 0;
	background: #0a7fb2;
	font-size: 15px;
	text-align: center;
}
.f_info .dl .dd {
	width: calc(100% - 15px - 90px);
	font-size: 18px;
	line-height: 2
}
.f_info .dl .dd a {
	color: var(--white);
}
.f_info .ul_sns {
	display: flex;
	margin: 40px 0 20px;
}
.f_info .ul_sns .li {
	margin-right: 12px;
}
.f_info .ul_sns .li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	background: #0a7fb2;
	border-radius: 50%;
}
.f_info .ul_sns .li a:hover,
.f_nav .ul .li a:hover {
	opacity: .75;
	text-decoration: none;
}
.f_info .ul_sns .li img {
	width: 75%;
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(42deg) brightness(101%) contrast(102%);
}
.f_nav {
	width: 36.66%;
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
}
.f_nav .ul {
	width: 60%;
}
.f_nav .ul:nth-of-type(2) {
	width: 35%;
}
.f_nav .ul .li {
	margin-bottom: 30px;
	font-size: 18px;
}
.f_nav .ul .li a {
	color: var(--white);
}

.f_support {
	position: relative;
	width: 100%;
}
.f_support .pics {
	display: flex;
	justify-content: space-between;
}
.f_support .pics .pic {
	width: 30%;
}
.f_support .pics .pic img {
	aspect-ratio: 3/2;
}
.f_support .text {
	margin: 20px 0 0;
	padding: 0 0 60px;
	font-size: 16px;
	text-align: center;
}
.f_support .illust {
	position: absolute;
	z-index: 3;
	right: -210px;
	bottom: 10px;
	width: 230px;
}

.copyright {
	font-size: 16px;
	text-align: center;
}

@media screen and (min-width: 1261px) and (max-width: 1400px){
	
	.f_support .illust {
		right: -15vw;
	}
	
}
@media screen and (min-width: 768px) and (max-width: 1260px){
	
	/* contact */
	
	.f_contact {
		margin-bottom: -5vw;	
	}

	/* footer */

	.footer {
		padding: 7.5vw 0 3vw;
	}
	.f_logo {
		margin: 0 auto 3vw;
		padding: 1vw 0;
      width: 55.66%;
	}
	.f_logo .logo {
		width: 45vw;
	}
	.f_info .dl > div {
		margin-bottom: 1.5vw;
	}
	.f_info .dl .dt {
		width: 8vw;
		margin-top: .8vw;
		padding: .4vw 0;
		font-size: 1.4vw;
	}
	.f_info .dl .dd {
		width: calc(100% - 1.5vw - 8vw);
		font-size: 1.8vw;
	}
	.f_info .ul_sns {
		margin: 3vw 0 2vw;
	}
	.f_info .ul_sns .li {
		margin-right: 1vw;
	}
	.f_info .ul_sns .li a {
		width: 4vw;
		height: 4vw;
	}
	.f_nav {
		margin-top: .5vw;
	}
	.f_nav .ul .li {
		margin-bottom: 2.75vw;
		font-size: 1.8vw;
	}

	.f_support .text {
		margin: 2vw 0 0;
		padding: 0 0 5vw;
		font-size: 1.6vw;
	}
	.f_support .illust {
		right: -6vw;
		bottom: -4vw;
		width: 16vw;
	}

	.copyright {
		font-size: 1.6vw;
	}
	
}
@media screen and (max-width: 767px){
	
	/* footer */

	.footer {
		padding: 90px 0 100px;
	}
	.f_logo {
		width: min(100%,400px);
		margin: 0 auto 20px;
	}
	.f_logo .logo {
		width: min(90%,300px);
	}
	.f_frame {
		display: block;
	}
	.f_info {
		width: min(100%,400px);
		margin: 0 auto 20px;
	}
	.f_info .dl > div {
		margin-bottom: 15px;
	}
	.f_info .dl .dt {
		margin-top: min(1vw,10px);
		font-size: min(4vw,15px);
	}
	.f_info .dl .dd {
		font-size: min(4.33vw,18px);
	}
	.f_info .ul_sns {
		display: none;
		margin: 30px 0;
		justify-content: center;
	}
	.f_info .ul_sns .li {
		margin: 0 10px;
	}
	.f_info .ul_sns .li a {
		width: 40px;
		height: 40px;
	}
	.f_nav {
		display: none;
	}

	.f_support .pics {
		flex-wrap: wrap;
		gap: 3vw 4%;
	}
	.f_support .pics .pic {
		width: 48%;
	}
	.f_support .text {
		margin: 20px 0 0;
		padding: 0 0 30px;
		font-size: 14px;
		line-height: 1.5;
		text-align: left;
	}
	.f_support .illust {
		right: 10vw;
		bottom: 80px;
		width: min(20vw,120px);
	}

	.copyright {
		font-size: 16px;
	}
	
}

/*----- contact -----*/

.contact_box {
    position: relative;
    z-index: 5;
	background: url("/system_panel/uploads/images/bg_red.png");
	border: 4px solid var(--black);
	color: var(--white);
	padding-top: 10px;
}
.top_mv_contact .contact_box {
	padding-top: 0;
}
.contact_box .ttl {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}
.top_mv_contact .contact_box .ttl {
	margin-left: 20px;
}
.contact_box .ttl div {
	display: flex;
}
.contact_box .ttl p {
	font-size: 37px;
}
.contact_box .fott_ttl2 p {
    font-size: 30px;
}
.contact_box .ttl p.tb {
	width: 280px;
	margin: 0 5px;
}
.contact_box .ttl p.tb img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7496%) hue-rotate(268deg) brightness(102%) contrast(105%);
}
.contact_box .ttl p.yl {
	color: #fff665;
}
.contact_box .subttl {
	margin: 10px 0 15px;
	text-align: center;
}
.contact_box .subttl p {
	display: inline-block;
	padding: 10px 60px;
	background: #fb2626;
	border-radius: 40px;
	font-size: 23px;
}
.contact_box .telbtn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 60px;
	padding-bottom: 20px;
}
.contact_box .telbtn .tel {
	width: 406px;
}
.contact_box .telbtn .btnc {
	width: 281px;
}
.contact_box_end {
	display: block;
	width: 100%;
	height: 9px;
	background: #d70000;
	border-left: 4px solid var(--black);
	border-right: 4px solid var(--black);
	border-bottom: 4px solid var(--black);
}

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

	.contact_box {
		border-width: .4vw;
		padding-top: 1vw;
	}
	.contact_box .ttl {
		margin: 2vw 0;
	}
	.top_mv_contact .contact_box .ttl {
		margin-left: 2vw;
	}
	.contact_box .ttl p {
		font-size: 3.6vw;
	}
	.contact_box .ttl p.tb {
		width: 26vw;
		margin: 0 .5vw;
	}
	.contact_box .subttl {
		margin: 1vw 0 1.5vw;
	}
	.contact_box .subttl p {
		padding: 1vw 6vw;
		border-radius: 4vw;
		font-size: 2.3vw;
	}
	.contact_box .telbtn {
		gap: 0 6vw;
		padding-bottom: 2vw;
	}
	.contact_box .telbtn .tel {
		width: 40vw;
	}
	.contact_box .telbtn .btnc {
		width: 28vw;
	}
	.contact_box_end {
		height: 1vw;
		border-width: .4vw;
	}
	
}
@media screen and (max-width: 767px){

	.contact_box {
		border-width: 2px;
	}
	.contact_box .ttl {
		display: block;
		margin: 10px 0 15px;
	}
	.top_mv_contact .contact_box .ttl {
		margin-left: 4vw;
	}
	.contact_box .ttl div {
		justify-content: center;
	}
	.contact_box .ttl p {
		font-size: min(6.5vw,30px);
		line-height: 1.5;
	}
	.contact_box .ttl p.tb {
		width: min(45vw,200px);
		margin: 0 1vw;
	}
	.contact_box .subttl p {
		padding: 10px 4vw;
		font-size: min(4.25vw,20px);
	}
	.contact_box .telbtn {
		display: block;
		padding-bottom: 20px;
	}
	.contact_box .telbtn .tel {
		width: min(90%,320px);
		margin: 0 auto 20px;
	}
	.contact_box .telbtn .btnc {
		width: 240px;
		margin: 0 auto;
	}
	.contact_box_end {
		height: 6px;
		border-width: 2px;
	}
	
}


/*----- main -----*/

.main {
	margin-top: 120px;
    overflow-x: hidden;
}

.bg_blue {
	background: #e4f7ff;
}
.m_center {
	text-align: center;
}

.mb30 {
	margin-bottom: 30px!important;
}
.mb60 {
	margin-bottom: 60px!important;
}
.mb90 {
	margin-bottom: 90px!important;
}
.mb120 {
	margin-bottom: 120px!important;
}

.p {
	font-size: 18px;
}
.pm {
	font-size: 18px;
	line-height: 2;
}


.m_ttl {
	margin-bottom: 50px;
}
.m_ttl.mb0 {
	margin-bottom: 0;
}
.m_ttl .en {
	display: flex;
	gap: 0 10px;
	margin-bottom: 5px;
	font-size: 19px;
	font-weight: 500;
	color: var(--red);
}
.m_ttl .en div {
	display: block;
	height: 20px;
	width: 20px;
	background: url("/system_panel/uploads/images/ttl_mark.png") no-repeat;
	background-size: cover;
}
.m_ttl .text {
	font-size: 41px;
	font-weight: bold;
}
.m_ttl.m_center .en {
	justify-content: center;
}
.m_ttl .text br {
	display: none;
}

.m_btn a {
	position: relative;
	display: block;
	width: 240px;
	padding: 12px 10px 12px 0;
	background: var(--red);
	border-top: 2px solid var(--black);
	border-left: 2px solid var(--black);
	border-right: 3px solid var(--black);
	border-bottom: 4px solid var(--black);
	border-radius: 6px;
	color: var(--white);
	font-size: 18px;
	text-align: center;
}
.m_btn a:hover {
	background: var(--blue);
}
.m_btn.m_center a {
	margin: auto;
}
.m_btn a::before {
	position: absolute;
	top: 50%;
	background-color: var(--white);
	right: 13px;
	width: 15px;
	height: 2px;
	margin-top: 0px;
	content: "";
}
.m_btn a::after {
	position: absolute;
	top: 50%;
	right: 13px;
	width: 8px;
	height: 8px;
	margin-top: -3px;
	transform: rotate(45deg);
	border-top: 2px solid var(--white);
	border-right: 2px solid var(--white);
	content: "";
	display: inline-block;
	vertical-align: middle;
}
.m_btn.m_white a {
	background: var(--white);
	color: var(--black);
}
.m_btn.m_white a:hover {
	background: #e6f4f1;
}
.m_btn.m_white a::before {
	background: var(--black);
}
.m_btn.m_white a::after {
	border-color: var(--black);
}
.m_btn.m_back a {
	padding: 12px 0 12px 10px;
}
.m_btn.m_back a::before {
	right: auto;
	left: 13px;
}
.m_btn.m_back a::after {
	right: auto;
	left: 13px;
	transform: rotate(-135deg);
}
.header .m_btn {
	margin-bottom: 20px;
}
.header .m_btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 10px;
	width: 200px;
	padding: 4px 0;
}
.header .m_btn a > div {
	width: 24px;
}
.header .m_btn a::before,
.header .m_btn a::after {
	display: none;
}

.m_sns_ul {
	position: fixed;
	z-index: 99;
	top: calc(120px + 1.5vw);
	left: 0;
	padding-top: 18px;
	background: var(--white);
	width: 55px;
}
.m_sns_ul .li {
	margin: 0 auto 18px;
	width: 36px;
}
.m_sns_ul .li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	background: #0a7fb2;
	border-radius: 50%;
}
.m_sns_ul .li a img {
	width: 75%;
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(42deg) brightness(101%) contrast(102%);
}
.m_sns_ul .li a:hover {
	opacity: .75;
	text-decoration: none;
}
.m_sns_ul:has(+.top) {
	top: 20vw;	
}

.m_fv {
	position: relative;
}
.m_fv .bg img {
	line-height: 0;
}
.m_fv .ranger {
	position: absolute;
	z-index: 5;
	bottom: 0;
	right: 16vw;
	line-height: 0;
}
.m_fv .ranger img {
	height: 13.875vw;
}
.m_fv .ttl {
	position: absolute;
	width: 100%;
	z-index: 10;
	bottom: 40px;
	left: 0;
}
.m_fv .ttl .text {
	font-size: 50px;
	font-weight: 700;
	-webkit-text-stroke: 6px var(--white);
 	text-stroke: 6px #fff;
 	paint-order: stroke;	
}

.youtube {
    width: 100%;
    aspect-ratio: 16/9;
}
.youtube iframe {
    width: 100%;
    height: 100%;
}


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

	.header .m_btn a {
		gap: 0 .5vw;
		width: 13vw;
		padding: .4vw 0;
		font-size: 1.4vw;
	}
	.header .m_btn a > div {
		width: 2vw;
	}
	
	.m_sns_ul {
		top: calc(120px + 1vw);
		padding-top: .75vw;
		width: 3.6vw;
	}
	.m_sns_ul .li {
		margin: 0 auto .75vw;
		width: 3vw;
	}
	.m_sns_ul .li a {
		width: 3vw;
		height: 3vw;
	}
	.m_sns_ul:has(+.top) {
		top: 25vw;	
	}
	
	.m_fv .ranger {
		right: 12vw;
	}
	.m_fv .ranger img {
		height: 13.5vw;
	}
	.m_fv .ttl {
		width: calc(100% - 4vw);
		bottom: 2.5vw;
		left: 4vw;
	}
	.m_fv .ttl .text {
		font-size: min(3.33vw,50px);
	}
	
}
@media screen and (min-width: 768px) and (max-width: 1260px){
	
	.main {
		margin-top: 9vw;
	}

	.p {
		font-size: 1.8vw;
	}
	.pm {
		font-size: 1.8vw;
		line-height: 2;
	}

	.mb30 {
		margin-bottom: 3vw!important;
	}
	.mb60 {
		margin-bottom: 6vw!important;
	}
	.mb90 {
		margin-bottom: 8vw!important;
	}
	.mb120 {
		margin-bottom: 9vw!important;
	}

	.m_ttl {
		margin-bottom: 4vw;
	}
	.m_ttl .en {
		gap: 0 1vw;
		margin-bottom: .5vw;
		font-size: 1.8vw;
	}
	.m_ttl .en div {
		height: 2vw;
		width: 2vw;
	}
	.m_ttl .text {
		font-size: 3.5vw;
	}
	
	.header .m_btn a > div {
		width: 2vw;
	}

	.m_sns_ul {
		top: calc(9vw + 1vw);
	}

	
	
	
}
@media screen and (max-width: 767px){
	
	.main {
		margin-top: 60px;
	}
	
	.p {
		font-size: 16px;
	}
	.pm {
		font-size: 16px;
		line-height: 1.875;
	}
	.sp_left {
		text-align: left;
	}

	.mb30 {
		margin-bottom: 20px!important;
	}
	.mb60 {
		margin-bottom: 35px!important;
	}
	.mb90,
	.mb120 {
		margin-bottom: 50px!important;
	}
	
	.m_ttl {
		margin-bottom: 30px;
	}
	.m_ttl .en {
		justify-content: center;
		margin-bottom: 8px;
		font-size: 16px;
	}
	.m_ttl .text {
		font-size: 32px;
		text-align: center;
	}
	.m_ttl .text.sp_small {
		font-size: min(6vw,32px);
	}
	.m_ttl .text br {
		display: inline-block;
	}
	
	.m_btn a {
		margin: auto;
	}
	.header .m_btn a {
		gap: 0 10px;
		width: 200px;
		padding: 4px 0;
	}
	.header .m_btn a > div {
		width: 24px;
	}

	.m_sns_ul,
	.m_sns_ul:has(+.top) {
		top: auto;
		bottom: 0;
		left: 0;
		padding: 10px 0;
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 0 20px;
		background: #f3f6f9;
	}
	.m_sns_ul .li {
		margin: 0;
		width: 40px;
	}
	.m_sns_ul .li a {
		width: 40px;
		height: 40px;
	}
		
	.m_fv .bg img {
		height: 140px;
	}
	.m_fv .ranger {
		right: 2vw;
	}
	.m_fv .ranger img {
		height: 120px;
	}
	.m_fv .ttl {
		bottom: 15px;
	}
	.m_fv .ttl .text {
		font-size: 30px;
	}
	

	
}
@media screen and (min-width: 768px){
.f_logo .logo {
  display: flex;
  align-items: center;
  gap: 10px;
}}