/*---------- mobile ----------*/
@media(max-width:768px){
	body{
		letter-spacing:0;
	}

	/*---------- header ----------*/
	.hiire_header{
		background:none;
	}
	.hiire_header_wrap{
		padding:0 24px;
	}
	.hiire_header_title{
		position:relative;
		margin-top:24px;
		z-index:10;
		
		img{
			width:131px;
		}
	}
	.hiire_header_nav{
		display:block;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding-top:70px;
		background-color:#110d0c;
		overflow:auto;
		opacity:0;
		visibility:hidden;
/* 		transition:0.3s; */
		
		&.active{
			opacity:1;
			visibility:visible;
		}
		.link{
			display:grid;
			gap:24px;
			margin-top:56px;
			padding:0 48px;
			
			a{
				padding:0 0 24px;
				color:#a09a99;
				
				&.slash{
					span{
						color:#f8f6f4;

						&:before{
							content: "";
							position: absolute;
							left: 0;
							top: 15px;
							width: 28px;
							height: 1px;
							background-color: #F8F6F4;
						}	
					}
				}
			}
		}
		.btn{
			display:none;
		}
		.foot{
/* 			position:absolute;
			bottom:0;
			left:0; */
			width:100%;
			margin-top:154px;
			
			.flex{
				display:grid;
				grid-template-columns:repeat(2, 1fr);
				align-items:center;
				gap:20px;
				padding:0 28px 32px;
				
				a{
					position:relative;
					padding:12px 10px 12px 0;
					font-family: "Spectral", serif;
					font-size:14px;
					text-align:center;
					color:#ffffff;
					background-color:#605d5b;

					&:after{
						content:'';
						position:absolute;
						top:50%;
						right:24px;
						transform:translateY(-50%) rotate(45deg);
						width:8px;
						height:8px;
						border-top:1px solid #ffffff;
						border-right:1px solid #ffffff;
					}
				}
			}
			> a{
				display:flex;
				justify-content:center;
				align-items:center;
				gap:10px;
				padding:20px;
				font-family: "Spectral", serif;
				font-size:16px;
				color:#a09a99;
				border-top:1px solid #605d5b;
				
				img{
					width:12px;
				}
			}
		}
	}
	.hiire_header_hamburger{
		display: block;
		position: fixed;
		top: 12px;
		right: 24px;
		width: 56px;
		height: 56px;
		padding-top: 30px;
		font-size: 1rem;
		text-align: center;
		backdrop-filter: blur(20px);
		border-radius: 50% 50%;
		transition: top .4s cubic-bezier(0.165, 0.84, 0.44, 1);
		cursor:pointer;
		z-index: 100000;

		&:before{
			content: "";
			position: absolute;
			top: calc(50% - 4px);
	        left: calc(50% - 10px);
    	    width: 20px;
			height: 2px;
			background-color: #F8F6F4;
			transition: top .3s ease .3s,
				transform .3s ease;
		}
		&:after{
			content: "";
			position: absolute;
			top: calc(50% - 12px);
			left: calc(50% - 10px);
			width: 20px;
			height: 2px;
			background-color: #F8F6F4;
			transition: top .3s ease .3s,
				transform .3s ease;
		}
		&.active{
			&:before{
				top: calc(50% - 8px);
				transform: rotate(35deg);
				transition: top .3s ease, transform .3s ease .3s;
			}
			&:after{
				top: calc(50% - 8px);
				transform: rotate(-35deg);
				transition: top .3s ease, transform .3s ease .3s;
			}
		}
	}
/* 	.l-nav-toggle__button{
		position:static;
		margin-top:5px;
		
		a{
			width:56px;
			height:56px;
			padding-top:28px;
			font-size:10px;
			background-color:#000000;	
		}
	} */


	/*---------- footer ----------*/
	.hiire_footer{
		padding:32px 24px 35px;
	}
	.hiire_footer_logo{
		width:200px;
	}
	.hiire_footer_nav{
		grid-template-columns:1fr;
		gap:6px;

		.box{
			gap:9px;

			.en{
				font-size:34px;
			}
			.ja{
				font-size:12px;
			}
		}
	}
	.hiire_footer_btn{
		display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:20px;
		width:100%;
        padding:0 12px;
        
		a{
			width:100%;
			padding:12px 10px 12px 0;
		}
	}


	/*---------- common ----------*/
	.hiire_wrap{
		padding:100px 24px 80px;
	}
	
	
	/*---------- 会員登録 ---------*/
	.hiire_form_title{
		margin-bottom:59px;

		h1{
			font-size:36px;
			letter-spacing:2px;
			line-height:1;
		}
		p{
			font-size:14px;
		}
	}
	.hiire_form_header{
		.flow{
			gap:10px;
			margin-bottom:64px;

			p{
				display:flex;
				align-items:center;
				position:relative;
				min-height:50px;
				padding:0 0 8px;
				font-size:14px;
				letter-spacing:0;
				line-height:1.5;
				text-align:center;
				border:none !important;
				
				&:before{
					content:'';
					position:absolute;
					bottom:0;
					left:0;
					width:100%;
					border-top:1px solid #6a6a6a;
				}
				&.active:before{
					border-top:1px solid #f8f6f4;
				}
			}
		}
		> p{
			font-size:14px;
		}
	}
	.hiire_form_body{
		margin-top:43px;

		dl{
			margin-top:32px;

			dt{
				gap:12px;
				margin:0;

				span{
					font-size:10px;
				}
			}
			dd{
				.flex{
					gap:12px;
				}
				.radio{
					label{
						gap:12px;
						font-size:14px;

						span{
							width:18px;
							height:18px;

							&.active:before{
								top:3px;
								left:6px;
								width:4px;
								height:8px;
							}
						}
					}
				}
				p{
					font-size:12px;
					line-height:1.5;
				}
			}
		}
		.notes{
			margin-top:16px;
			font-size:10px;
		}
		.content_box_note {
			position: relative;
			margin-top: 16px;
			font-size: 10px;
			color: var(--text_white);
			line-height: 14px;

			.star_list li {
				position: relative;
				padding-left: 15px;
				margin-bottom: 5px;
			}
		}
	}
	.hiire_form_footer{
		flex-direction:column;
		align-items:center;
		gap:16px;
		margin-top:48px;
		
		button{
			width:203px;
			padding:14px 0;
			text-align:center;
		}
	}
	
	.hiire_form_thanks{
		padding:48px 0 64px;

		img{
			max-width:232px;
			margin-bottom:46px;
		}
		p{
			margin-bottom:30px;
			font-size:14px;
		}
		.notes{
			margin-bottom:44px;
		}
		a{
			width:203px;
			padding:14px 0;
			font-size:17px;
			text-align:center;
		}
	}
	
	
	/*---------- ログイン ----------*/
	.hiire_login_title{
		margin-bottom:32px;

		img{
			max-width:309px;
			margin-bottom:24px;
		}
		h1{
			padding-top:24px;
			letter-spacing:2px;
			font-size:36px;
		}
		p{
			font-size:14px;
		}
	}
	.hiire_login_container{
		.msg_area{
			margin-bottom:40px;
			font-size:12px;
		}
		dl{
			dt{
				margin-bottom:6px;
				font-size:14px;
			}
		}
		.link{
			flex-direction:column;
			align-items:center;
			gap:16px;
			margin-top:36px;

			input, button{
				width:203px;
				padding:14px 0;
				font-size:17px;
				text-align:center;
				
				&.reset{
					font-size:14px;
				}
			}
			a{
				width:203px;
				padding:14px 0;
				font-size:17px;
				text-align:center;
			}
		}
		.reset{
			a{
				font-size:10px;
			}
		}
	}
	
	
	/*---------- マイページ ----------*/
	.hiire_mypage_wrap{
		margin:60px auto 0;
		padding:56px 24px 80px;
	}
	.hiire_mypage_title{
		margin-bottom:63px;

		h1{
			font-size:36px;
			letter-spacing:2px;
		}
		p{
			font-size:14px;

			&:before{
				width:78px;
			}
		}
	}
	.hiire_mypage_container{
		.msg_area{
			margin-bottom:40px;
			font-size:12px;
		}
		dl{
			grid-template-columns:1fr;
			gap:11px;
			padding:14px 0;
			
			dt{
				gap:12px;

				span{
					font-size:10px;
				}
			}
			dd{
				font-size:14px;

				.flex{
					gap:12px;
				}
				.radio{
					gap:36px;

					label{
						span{
							width:18px;
							height:18px;

							&.active:before{
								top:2px;
								left:5px;
								width:6px;
								height:10px;
							}
						}
					}
				}
			}
		}
		.notes{
			margin-top:16px;
			font-size:10px;
		}
		.btn{
			flex-direction: column;
            align-items: center;
            gap: 16px;
			margin-top:56px;

			button{
				width:203px;
				padding:14px 0;
				font-size:17px;
				text-align:center;
			}
		}
	}

	


	/*-------------------- home --------------------*/
	.kv_section .kv_container {
			padding: 210px 0px 120px;
	}
	.kv_section .kv_container .kv_content .note {
		font-size: 15px;
		margin-bottom: 12px;
	}
	.kv_section .kv_container .kv_content .kv_title img {
		height: 43px;
		width: auto;
	}
	.kv_section .kv_container .kv_content .kv_title {
		margin-bottom: 36px;
	}
	.kv_section .kv_container .kv_content .kv_detail {
		font-size: 14px;
		line-height: 24px;
	}
	.top_section_1 .top_container {
		padding: 60px 0 20px;
	}
	.top_section .top_container .top_content .title h2 {
		font-size: 40px;
	}
	.top_section .top_container .top_content .title .note {
		font-size: 16px;
	}
	.top_section .top_container .top_content .title {
		margin-bottom: 0;
	}
	.top_section_1 .top_container .top_content .detail {
		font-size: 14px;
		margin-bottom: 55px;
		margin-top: 58px;
	}
	.top_link_button a {
/* 		height: 47px; */
		width: 203px;
		font-size: 17px;
	}
	.top_section_2 {
		background-color: var(--bg_black);
		padding: 0;
	}
	.top_section_2 .top_container {
		padding-top: 60px;
	}
	.top_section_2 .top_container .top_content .detail .img_text_box {
		margin-bottom: 23px;
		flex-direction: column;
	}
	.top_section_2 .top_container .top_content .detail .img_text_box .text_box {
		width: 100%;
	}
	.top_section_2 .top_container .top_content .detail {
		margin-top: 58px;
	}
	.top_section_2 .top_container .top_content .detail .img_text_box .img_box {
		width: 100%;
	}
	.top_section_2 .top_container .top_content .detail .img_text_box .text_box {
		background: linear-gradient(to bottom, #2A2A2A 0%, #060606 100%);
		padding: 41px 24px 30px;
	}
	.top_section_2 .top_container .top_content .detail .img_text_box .text_box .text_box_title {
/* 		display:flex;
		justify-content:center; */
		margin-bottom: 33px;
	}
	.top_section_2 .top_container .top_content .detail .img_text_box .text_box .text_box_title h3 {
		font-size: 32px;
		line-height:48px;
		letter-spacing:0.6px;
	}
	.top_section_2 .top_container .top_content .detail .img_text_box .text_box .text_box_detail {
		font-size: 14px;
	}
	.top_section_2 .top_container .top_content .detail .img_right {
		flex-direction: column-reverse;
	}
	.top_section_2 .top_container .top_content .detail .img_text_box .img_box::before {
		height: 78px;
		width: 100%;
		background: linear-gradient(to top, rgba(18, 13, 12, 0) 0%, #060606 100%);
	}
	.top_section_3 .top_container {
		padding: 80px 0;
	}
	.top_section_3 .top_container .top_content .detail {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 0;
		margin-top: 45px;
	}
	.top_section_3 .top_container .top_content .detail .blog_content .blog_detail {
		padding-top: 10px;
		font-size: 14px;
		line-height: 24px;
		margin-bottom: unset;
	}
	.top_section_3 .top_container .top_content .view_more_link {
		margin-top: 20px;
	}
	.top_section_4 .top_container {
		padding: 45px 0 230px;
	}
	.top_section_4 .top_container .top_content .gold_title h2 {
		font-size: 28px;
		margin-bottom: 44px;
		line-height: 42px;
	}
	.top_section_4 .top_container .top_content .detail .list_text_box p {
		font-size: 12px;
		margin-bottom: 18px;
		padding-right: 0;
	}
	.top_section_4 .top_container .top_content .detail {
		margin-bottom: 60px;
	}
	.top_section_5 .top_container {
		padding: 115px 0 80px;
	}
	.top_section_5 .top_container .top_content .detail .content_box .content_box_note {
		margin-top: 25px;
		text-align: center;
		font-size: 12px;
		letter-spacing: 0.12px;
		color: var(--text_gray);
		line-height: 19px;
	}
	.top_section_5 .top_container .top_content .detail {
		margin-top: 38px;
		font-size: 14px;
		line-height: 24px;
	}
	.top_section_5 .top_container .top_content .detail .detail_text {
		margin-bottom: 64px;
	}
	.top_section_5 .top_container .top_content .detail .content_box {
		padding: 35px 0 40px;
	}
	.top_section_5 .top_container .top_content .detail .content_box h3 {
		font-size: 24px;
		line-height: 34px;
	}
	.top_section_5 .top_container .top_content .detail .content_box .content_box_style {
		margin-top: 25px;
		gap: 44px;
		flex-direction: column;
	}
	.top_section_5 .top_container .top_content .detail .content_box .content_box_style .box_style {
		max-width: unset;
		flex: unset;
	}
	.top_section_5 .top_container .top_content .detail .content_box .content_box_style .box_style:not(:last-child)::after {
		right: 50%;
		top: unset;
		bottom: -35px;
		transform: translateX(50%) rotate(90deg);
	}

	/*-------------------- side page --------------------*/
	.side_page .side_page_title .title_box {
		padding: 146px 0 48px;
	}
	.side_page .side_page_title .title {
		font-size: 36px;
		letter-spacing:2px;
	}
	.side_page .side_page_title .title_note {
		font-size: 14px;
		padding-left: 90px;
	}
	.side_page .side_page_title .title_note::before {
		width: 78px;
	}
	.topic_style .view_more_link a {
		font-size: 12px;
	}


	/*-------------------- our projects --------------------*/
	.topic_style .topic_cat {
		font-size: 12px;
		margin-bottom: 47px;
	}
	.topic_style .topic_cat .tag_box {
		margin-top: 9px;
	}
	.topic_style .topic_cat .tag_box .tag_tyle{
		padding:10px 12px;
		font-size:12px;
	}
	.topic_style .detail {
		grid-template-columns: 1fr;
		gap: 36px;
		margin-bottom: 46px;
	}
	.topic_style {
		& .detail {
			& .blog_content {
				& .blog_detail {
					& .blog_title {
						h3 {
							font-size:14px;
						}
					}
				}
			}
		}
	}

	/*-------------------- projects detail --------------------*/
	.side_page{
		.side_page_contents{
			margin-bottom:80px;
		}
		.view_more_link a {
			font-size: 12px;
		}
	}
	.topic_detail_style .blog_note {
		margin-bottom: 16px;
		
		.blog_time{
			font-size:12px;
		}
		.blog_lock{
			font-size:12px;
		}
	}
	.topic_detail_style .blog_title {
		margin-bottom: 24px;
	}
	.topic_detail_style .blog_title h2 {
		font-size: 17px;
	}
	.topic_detail_style {
		margin-bottom: 34px;
	}

	/*single markup style*/
	.blog_details_box{
		margin-top:36px;
		padding-top:36px;
	}
	.blog_details_box p {
		font-size: 14px;
		letter-spacing: 0.06em;
		line-height: 1.9;
/* 		margin-bottom: 110px; */
	}

	.blog_details_box h1 {
		font-size: 17px;
		margin-bottom: 15px;
		line-height: 1.76;
	}

	.blog_details_box img.alignright,
	.blog_details_box img,
	.blog_details_box img.alignleft {
		float: none;
		margin: 0 auto 40px;
		display: block;
	}

	.blog_details_box img.emoji {
		display: inline !important;
	}

	.blog_details_box table {
		width: 100% !important;
	}

	/*-------------------- comments area --------------------*/
	.topic_comment {
		margin-top: 60px;
		font-size: 12px;
	}
	.topic_comment h2 {
		font-size: 16px;
	}
	.comments_area {
		margin-top: 14px;
	}
	.comments_area .custom_comment_list {
		padding: 0px 16px;
	}
	.comments_area .custom_comment_list .comment_item {
		padding: 24px 0 16px;
	}
	.comments_area .custom_comment_list .comment_item .comment_content{
		.comment_meta {
			margin-bottom:12px;
			font-size: 14px;
			gap: 10px;

			&.post_user{
				.badge{
					font-size:10px;
				}
			}
		}
		.comment_text{
			font-size:12px;
		}
	}
	.comments_area .custom_comment_list .admin_comment .comment_meta .admin_comment {
		font-size: 10px;
	}
	.comments_area .comment-form .comment_field {
		textarea{
			font-size: 14px;	
		}
	}
	.comments_area .custom_comment_form {
		padding: 15px;
	}
	.topic_detail_style .content_box_note {
		margin-top: 16px;
		text-align: center;
		font-size: 10px;
		letter-spacing: 0;
		line-height: 14px;
	}








	
}