/*-------------------- mobile --------------------*/
@media screen and (max-width: 768px){
    /*-------------------- css --------------------*/
    @font-face{
        font-family:'RedHatDisplay-Regular';
        src:url('fonts/RedHatDisplay-Regular.ttf');
    }
    @font-face{
        font-family:'RedHatDisplay-Medium';
        src:url('fonts/RedHatDisplay-Medium.ttf');
    }
    @font-face{
        font-family:'RedHatDisplay-ExtraBold';
        src:url('fonts/RedHatDisplay-ExtraBold.ttf');
    }
    @font-face{
        font-family:'RedHatDisplay-Bold';
        src:url('fonts/RedHatDisplay-Bold.ttf');
    }
    @font-face{
        font-family:'RedHatDisplay-SemiBold';
        src:url('fonts/RedHatDisplay-SemiBold.ttf');
    }
    @font-face{
        font-family:'ZenOldMincho-Bold';
        src:url('fonts/ZenOldMincho-Bold.ttf');
    }
    @font-face{
        font-family:'kozminpro-medium';
        src:url('fonts/kozminpro-medium.otf');
    }

    .pc{
        display:none;
    }
    .mobile{
        display:block;
    }

    /*-------------------- header --------------------*/
    .main_header{
		position:relative;
		height:70px;
		opacity:1 !important;
	}
	.main_header_logo{
		opacity:1 !important;
	}
	.main_header_logo img{
		width: 240px;
		height: auto;
	}
	.main_header_link{
		display:none;
	}
/* 	.header-mobile {
		background-color: #595757;
		background-size: cover;
		object-fit: cover;
		width: 100%;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
	} */
	
	.main_header_hamburger{
		display:block;
		position:absolute;
		top:25px;
		right:20px;
		width:30px;
		height:20px;
		margin-bottom:1px;
		cursor:pointer;
		z-index:100;
	}
	.main_header_hamburger span{
		position:absolute;
		left:0;
		width:100%;
		height:1px;
		background-color:#ffffff;
		animation-duration:0.3s;
		animation-iteration-count:1;
		animation-timing-function:linear;
	}
	.main_header_hamburger span.top{
		top:0;
		transform:rotate(0deg);
	}
	.main_header_hamburger span.middle{
		top:50%;
		transform:rotate(0deg);
	}
	.main_header_hamburger span.bottom{
		top:100%;
		transform:rotate(0deg);
	}
	.main_header_nav{
		display:block;
		position:fixed;
		top:70px;
		left:0;
		bottom:0;
		width:100%;
		overflow:auto;
		opacity:0;
		visibility:hidden;
		z-index:100;
	}
	.main_header_nav nav{
		display:grid;
		background-color:#595757;
		border-top:1px solid #716f6f;
	}
	.main_header_nav nav a{
		display:block;
		padding:20px;
		font-size:16px;
		color:#ffffff;
		background-image:url('images/header_mb_cursor_w.png');
		background-position:center right 22px;
		background-repeat:no-repeat;
		background-size:auto 10px;
		border-bottom:2px solid #716f6f;
	}
	.main_header_nav nav .header_toggle_mobile{
		display:block;
		padding:20px;
		font-size:16px;
		border-bottom:2px solid #dfe3e3;
		background-image:url('images/header_mb_plus.png');
		background-position:center right 20px;
		background-repeat:no-repeat;
		background-size:auto 10px;
	}
	.main_header_nav nav .header_toggle_mobile.open{
		background-image:url('images/header_mb_minus.png');
		background-size:10px;
	}
	.main_header_nav nav .menu{
		display:none;
	}
	.main_header_nav nav .menu a{
		padding:20px 20px 20px 48px;
		font-size:16px;
		background-color:#dfe3e3;
		border-bottom:2px solid #ffffff;
		background-image:url('images/header_right_cursor.png');
		background-position:center right 20px;
		background-repeat:no-repeat;
		background-size:16px;
	}

	/*---------- mobile-nav > open ----------*/
	body.nav_open{
		overflow:hidden !important;
	}
	body.nav_open .main_header_nav{
		opacity:1;
		visibility:visible;
	}
	body.nav_open .main_header_hamburger span.top{
		top:50%;
		transform:rotate(30deg);
	}
	body.nav_open .main_header_hamburger span.middle{
		opacity:0;
	}
	body.nav_open .main_header_hamburger span.bottom{
		top:50%;
		transform:rotate(-30deg);
	}
	body.nav_open .main_header_nav{
		display:block;
	}
	/*---------- hamburger-animation ----------*/
	@keyframes nav_open_top{
		0%{
			top:0;
			transform:rotate(0deg);
		}
		50%{
			top:50%;
			transform:rotate(0deg);
		}
		100%{
			top:50%;
			transform:rotate(30deg);
		}
	}
	@keyframes nav_open_middle{
		0%{
			opacity:1;
		}
		50%{
			opacity:0;
		}
		100%{
			opacity:0;
		}
	}
	@keyframes nav_open_bottom{
		0%{
			top:100%;
			transform:rotate(0deg);
		}
		50%{
			top:50%;
			transform:rotate(0deg);
		}
		100%{
			top:50%;
			transform:rotate(-30deg);
		}
	}
	@keyframes nav_close_top{
		0%{
			top:50%;
			transform:rotate(30deg);
		}
		50%{
			top:50%;
			transform:rotate(0deg);
		}
		100%{
			top:0;
			transform:rotate(0deg);
		}
	}
	@keyframes nav_close_middle{
		0%{
			opacity:0;
		}
		50%{
			opacity:0;
		}
		100%{
			opacity:1;
		}
	}
	@keyframes nav_close_bottom{
		0%{
			top:50%;
			transform:rotate(-30deg);
		}
		50%{
			top:50%;
			transform:rotate(0deg);
		}
		100%{
			top:100%;
			transform:rotate(0deg);
		}
	}

    /*-------------------- footer --------------------*/
	.footer_wrap{
		padding:24px 28px 20px;
	}
	.footer_top{
		margin-bottom:84px;
	}
	.footer_top .return{
		margin-bottom:36px;
		padding-bottom:24px;
		text-align:center;
	}
	.footer_top .nav{
		flex-direction:column;
		justify-content:flex-start;
		gap:20px;
	}
	.footer_bottom{
		flex-direction:column-reverse;
		align-items:center;
		gap:45px;
		margin-bottom:32px;
	}
	.footer_bottom .logo img{
		width:110px;
	}
	.footer_bottom .youtube{
		flex-direction:column-reverse;
		gap:15px;
	}
	.footer_bottom .youtube img{
		width:60px;
	}
    .footer_bottom .youtube p{
        text-align:center;
        text-decoration:underline;
    }
    .footer_bottom .youtube p:before{
        content:none;
    }
	.footer_copy p{
		font-size:10px;
        letter-spacing:0.4px;
		text-align:center;
	}
	.footer_top_return{
		display:none;
	}

    /*-------------------- 共通 --------------------*/
    .common_wrap{
        padding:80px 28px 120px;
    }
    .common_title h1{
        margin-bottom:60px;
        font-size:48px;
    }
    .common_title p{
        margin-bottom:45px;
        font-size:18px;
    }

    .common_container{
        gap:45px;
    }
    .common_box .title{
        gap:18px;
        margin-bottom:32px;
    }
    .common_box .title span{
        width:30px;
        height:48px;
        font-size:18px;
    }
    .common_box .title h2{
        font-size:18px;
        line-height:24px;
    }
    .common_box > p{
        font-size:16px;
        line-height:27px;
    }
    .common_box > p.mgb_15{
        margin-bottom:15px;
    }
    .common_box > ul{
        gap:20px;
        padding-left:20px;
    }
    .common_box > ul li{
        font-size:16px;
        line-height:27px;
    }
    .common_box > ol{
        gap:30px;
    }
    .common_box > ol li{
        font-size:16px;
        line-height:27px;
    }
    
    .common_box .list{
        gap:20px;
        margin-top:30px;
    }
    .common_box .list h3{
        font-size:16px;
        line-height:27px;
    }
    .common_box .list p{
        font-size:16px;
        line-height:27px;
    }
    .common_box .list ul{
        margin:0;
        padding-left:20px;
    }
    .common_box .list ul li{
        margin-top:10px;
        font-size:16px;
    }
    
    .common_box .cookie{
        gap:30px;
        margin-top:30px;
    }
    .common_box .cookie .box h3{
        margin-bottom:20px;
        padding-bottom:20px;
        font-size:16px;
        border-bottom:1.5px dotted #23231e;
    }
    .common_box .cookie .box ul{
        gap:18px;
        margin:0 0 18px;
    }	
    .common_box .cookie .box ul li{
        font-size:16px;
        line-height:27px;
    }
    .common_box .cookie .box p{
        font-size:16px;
        line-height:27px;
    }
    .common_box .line{
        margin-top:18px;
    }
    .common_box .line a{
        font-size:16px;
    }
    .common_memo{
        margin-top:40px;
    }
    .common_memo p{
        font-size:16px;
        line-height:27px;
    }
    .contact_bot_button{
        display:none;
    }

    /*-------------------- top --------------------*/
    .top_mv {
		display: none;
	}
    .top_mv_mobile {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.mobile-section {
		position: relative;
		width: 100%;
		height:350px;
		overflow: hidden;
	}
	.mobile-section img {
		width: 100%;
		height: 100%;
		object-fit:cover;
	}
	.mobile-section .text-overlay {
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		color: white;
		/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
		white-space: nowrap;
		text-align: center;
	}
	.mobile-section .text-overlay h2{
		margin:0 0 15px;
        font-family:'RedHatDisplay-Bold';
		font-size: 24px;
		line-height:1;
	}
	.mobile-section .text-overlay p{
		margin:0 0 20px;
		font-size: 20px;
		line-height:1;
	}
	.circle-button {
		width: 30px;
		height: 30px;
		border: none;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:0 auto;
		cursor: pointer;
		transition: transform 0.3s ease-out, background-color 0.3s;
	}
	.blue-button {
		background-color: #006FBA;
	}
	.red-button {
		background-color: #DC3545;
	}
	.circle-button img {
		width: 10px;
		height: 10px;
	}
	.content-section {
		width: 100% !important;
		overflow: hidden;
		padding-top: 0;
		position: relative;
		left: 0 !important;
		transform: none !important;
		-webkit-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-o-transform: none !important;
	}
	.sticky_area{
		height:auto;
	}
	.sticky_content{
		position:relative;
		top:auto !important;
	}
	.sticky_box{
		position:relative;
		left:auto;
		transform:none;
	}
	.content-slogan {
		gap:30px;
		margin-top: 120px;
        padding:0;
	}
	.content-slogan p{
		font-size:24px;
        line-height:45px;
	}
	.content-70th{
		margin-top:80px;
	}
	.content-70th img{
		width:150px;
	}
	.content-box {
		width: 100%;
		margin-top: 90px;
	}
	.content-box p {
        padding:0 43px;
		font-size: 16px;
        line-height: 27px;
        text-align:center;
	}
    .site-footer {
		padding:110px 0 18px;
	}
	.site-footer img {
		width: 150px;
	}
	.copyright {
		margin: 32px 0 0;
		font-size: 9px;
		text-align:center;
	}
}