/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	letter-spacing:0;
}


/*----------------------------------------------------------------------*/
/*------------------------------ sp-start ------------------------------*/
/*----------------------------------------------------------------------*/
@media(max-width:768px){

	/*------------------------------------------------*/
	/*-------------------- header --------------------*/
	/*------------------------------------------------*/
	.head_contents {
		height: 80px;
		padding: 0 20px;
		background-color: var(--white);
	}

	/*---------- header->logo ----------*/
	.head_logo a {
		display: block;
	}
	.head_logo a img {
		height: 60px;
	}

	/*---------- header->option ----------*/
	.head_option {
		display: flex;
		align-items: center;
		gap: 20px;
		visibility: visible;
	}

	/*---------- header->lang ----------*/
	/* .head_lang {
	display: flex;
	align-items: center;
	gap: 3px;
	} */

	/*---------- header->hambueger ----------*/
	.head_hamburger {
		width: 40px;
	}

	/*---------- header->nav ----------*/
	.head_nav {
		display: none;
		position: absolute;
		top: 81px;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 20;
	}
	.nav_open .head_nav {
		display: block;
	}
	.head_nav_area {
		padding: 0;
	}

	.head_nav_area .contents {
		padding: 50px 20px;
	}

	/* .head_nav_area .contents .img {
	height: 200px;
	} */

	.head_nav_area .contents ul {
		flex-direction: column;
	}

	.head_nav_area .contents li {
		padding: 20px 0;
		border-bottom: 1px solid;
	}

	.head_nav_area .contents .link li a {
		font-size: 20px;
	}

	.head_hamburger {
		display: block;
	}
/* 
	.head_nav_area .contents .sns {
	display: flex;
	justify-content: center;
	grid-column: 1 / 3;
	}

	.head_nav_area .contents .sns a {
	margin: 0 8px;
	}


	.head_nav_area .contents .copy {
	grid-column: 1 / 3;
	text-align: center;
	} */

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5); 
		z-index: 10;
		display: none;
	}
	.nav_open .overlay {
		display: block;
	}

	/*------------------------------------------------*/
	/*-------------------- footer --------------------*/
	/*------------------------------------------------*/
	.footer_contents {
		padding: 20px 0;
		gap: 20px;
	}
	.footer_contents {
		font-size: 12px;
	}
	.footer_contents .footer_tags ul{
		gap:20px;
	}
	.footer_contents .footer_tags ul li a{
		font-size:14px;
	}
	.copy_rights {
		gap: 5px;
	}
	.copy_rights p{
		font-size:12px;
	}

	/*------------------------------------------------*/
	/*------------------ home page -------------------*/
	/*------------------------------------------------*/

	/*---------- top > loading ----------*/
	.top_loading_box img{
		height:100px;
	}
	.top_loading_box.top img{
		bottom:-50px;
	}
	.top_loading_box.bottom img{
		top:-50px;
	}

	/*---------- v2 ----------*/
	.top_loading_box_v2 .img{
		width:150px;
		height:150px;
	}
	.top_loading_box_v2 .img .icon1{
		top:6px;
		left:6px;
		width:6px;
		height:6px;
	}
	.top_loading_box_v2 .img .icon2{
		top:6px;
		right:6px;
		width:6px;
		height:6px;
	}
	.top_loading_box_v2 .img .icon3{
		bottom:6px;
		right:6px;
		width:6px;
		height:6px;
	}
	.top_loading_box_v2 .img .icon4{
		bottom:6px;
		left:6px;
		width:6px;
		height:6px;
	}

	/*---------- new ----------*/
	.top_loading_area .img{
		width:150px;
		height:75px;
	}
	.top_loading_area.top img{
		bottom:-75px;
	}
	.top_loading_area.bottom img{
		top:-75px;
	}
	.top_loading_area .img .icon1{
		top:6px;
		left:6px;
		width:6px;
		height:6px;
	}
	.top_loading_area .img .icon2{
		top:6px;
		right:6px;
		width:6px;
		height:6px;
	}
	.top_loading_area .img .icon3{
		bottom:6px;
		right:6px;
		width:6px;
		height:6px;
	}
	.top_loading_area .img .icon4{
		bottom:6px;
		left:6px;
		width:6px;
		height:6px;
	}



	.main_container {
		padding-bottom: 100px;
	}
	.home_main_visual{
		height:300px;
	}
	.home_main_visual_v2{
		height:300px;
	}
	.home_set_1 {
		margin-top: 100px;
		padding: 0 20px;
	}
	.home_info{
		flex-direction:column;
	}
	.home_info .side_2 .contents {
		grid-template-columns: repeat(1, 1fr);
	}
	.home_info .side_2 .contents {
		gap: 20px;
	}
	.home_info .side_2 {
		padding: 20px 0 20px 20px;
	}
	.home_set_1 .side_1{
		align-items:center;
		gap:5px;
	}
	.home_about .side_1,
	.home_staff .side_1{
		flex-direction:row-reverse;
		justify-content:flex-end;
	}
	.home_set_1 .side_1 h2 {
		font-size: 50px;
		letter-spacing: 1px;
		line-height: 1;
		background:none;
	}
	.home_set_1 .side_1 h3 {
		padding:0;
		font-size: 16px;
		letter-spacing: 1px;
	}
	.home_custom_1 .side_2 {
		width: 100%;
		margin-bottom: 50px;
		box-sizing:border-box;
	}
	.home_info .side_2::before{
		border-radius:30px 0 0 30px;
	}
	.home_staff .side_2::before{
		border-radius:0 30px 30px 0;
	}
	.home_info::before {
		right: 20px;
		height: 150px;
	}
	.home_custom_1::before {
		width: 105vw;
	}
	.home_custom_2 .side_2{
		width:100%;
	}
	.home_custom_2 .side_2 .contents {
		height: 400px;
	}
	.home_about{
		flex-direction:column-reverse;
	}
	.home_about::before {
		left: 20px;
		height: 271px;
	}
	.home_about .side_2 .bottom_side {
		padding: 20px 0 20px 20px;
	}
	.home_custom_2 .side_2 .bottom_side {
		gap: 20px;
		align-items: center;
	}
	.home_about .side_2 .bottom_side {
		flex-direction: column-reverse;
	}
	.home_custom_2 .about_content {
		width: 100%;
	}
	.home_custom_2 .about_link {
		width: 100%;
	}
	.home_custom_2 .about_content p {
		font-size: 16px;
	}
	.home_custom_2 .about_link a {
		font-size: 16px;
	}
	.home_custom_2::before {
		width: 105vw;
	}
	.home_works{
		flex-direction:column;
	}
	.home_works .side_2 .bottom_side {
		flex-direction: column;
	}
	.home_works::before {
		right: 20px;
		height: 271px;
	}
	.home_works .side_2 .bottom_side {
		padding: 20px 20px 20px 0;
	}
	.home_staff{
		flex-direction:column-reverse;
	}
	.home_staff .side_2 .contents {
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
	}
	.home_staff .side_2 {
		padding: 20px 20px 20px 0;
	}
	.home_staff .side_2 .contents img {
		height: 200px;
        object-fit: cover;
        object-position: center top;
	}
	.home_custom_1 .side_2 .bottom_side a {
		font-size: 16px;
	}
	.home_staff::before {
		left: 20px;
		height: 150px;
	}
	.home_custom_1 .side_2 .bottom_side {
		margin-top: 20px;
	}
	.home_set_1 .side_1 h2, .home_set_1 .side_1 h3{
		writing-mode: unset;
		text-orientation: unset;
	}

	/*------------------------------------------------*/
	/*--------------- ----- info -- ------------------*/
	/*------------------------------------------------*/
	.container_page_head::before {
		right: 20px;
	}
	.container_page_head h1 {
		font-size: 80px;
		line-height: 80px;
	}
	.container_page_head::before {
		height: 175px;
	}
	.container_page_head::after {
		height: 175px;
	}
	.container_page_head h2 {
		font-size: 30px;
	}

	.news_tag{
		flex-direction:column;
		align-items:flex-start;
		gap:10px;
		margin-bottom:20px;
		padding-bottom:10px;
	}
	.news_tag h2{
		font-size:16px;
	}
	
	.container_contents .container_contents_detail {
		grid-template-columns: repeat(1, 1fr);
		gap:20px;
	}
	.container_page_head {
		padding: 100px 20px 0 20px;
	}
	.container_contents {
		margin-top:100px;
		padding: 0 20px;
	}
	a.page_number {
		font-size: 16px;
		height: 40px;
		width: 40px;
	}
	/*------------------------------------------------*/
	/*--------------------- about --------------------*/
	/*------------------------------------------------*/
	.container_page_details .container_page_detail {
		text-align: left;
		margin: 0 20px;
		margin-top: 100px;
	}
	.container_page_details .container_page_detail p {
		font-size: 16px;
		line-height: 30px;
	}
	.container_page_details .container_page_detail_img {
		margin-top: 100px;
		height: 300px;
	}
	.page_contents {
		margin-top: 100px;
	}
	.page_contents .page_contents_containers .page_contents_container {
		margin-top: 100px;
	}
	.page_contents .page_contents_containers {
		width: 100%;
		padding: 0 20px;
	}
	.page_contents .page_contents_containers .container_titles{
		margin-bottom:30px;
	}
	.page_contents_container_set2 .container_detail {
		flex-direction: column;
	}
	.page_contents_container_set2 .container_detail_colum {
		width: 100%;
	}
	.sp_borderTop_none {
		border-top: none !important;
	}
	.page_contents .page_contents_containers .container_title_en {
		font-size: 20px;
		line-height: 20px;
	}
	.page_contents .page_contents_containers .container_title_ja {
		font-size: 30px;
	}
	.page_contents .page_contents_containers .container_detail {
		/* margin-top: 30px; */
	}
	.page_contents .page_contents_containers .container_detail p {
		font-size: 14px;
		line-height: 26px;
	}
	.page_contents .page_contents_containers .container_detail img{
		margin-top:30px;
	}
	.page_contents_container .container_detail .container_detail_block {
		padding: 10px 0;
	}
	.page_contents_container .container_detail .container_detail_colum_title {
		line-height: 20px;
		font-size: 12px;
	}

	/*------------------------------------------------*/
	/*--------------------- staff --------------------*/
	/*------------------------------------------------*/

	/*------------------------------------------------*/
	/*-----------------blog article page--------------*/
	/*------------------------------------------------*/
	.article_container{
		padding:40px 20px;
		font-size:14px;
	}
	.blog_header{
		padding-bottom:40px;

		time{
			font-size:14px;
		}
		h1{
			font-size:28px;
		}
	}
	.blog_body{
		padding:40px 0;

		> img{
			width:100%;
			text-align:center;
			display:block;
			margin:0 auto 20px;
		}
	}
	.blog_container{
		display:grid;
		gap:20px;
	}
	.blog_row{
		display:grid;
		gap:20px;
	
		&.col2{
			grid-template-columns:1fr;
		}
		/* &.col3{
			grid-template-columns:1fr;
		}
		&.col4{
			grid-template-columns:1fr;
		} */
	}
	.blog_column{
		h2{
			padding:5px 0 5px 10px;
			font-size:22px;
		}
		h3{
			padding:3px 0 3px 10px;
			font-size:18px;
		}
		p{
			font-size:14px;
		}
		iframe{
			height:200px;
		}
		hr{
			margin:20px 0;
		}
	}
	.blog_footer{
		padding-top:40px;

		h2{
			font-size:18px;
		}
	}
	.bottom_side_button {
		padding: 0 20px;
	}
	.bottom_side_button a{
		font-size: 16px;
	}
	.related_container{
		gap:10px;

		a{
			flex-direction:column;
			align-items:flex-start;
			gap:3px;
			padding:10px;
			
			time{
				font-size:12px;
			}
			h3{
				font-size:14px;
			}
		}
	}
	
	.relate_area{
		.relate_item{
			border:1px solid #d34490;
			margin-bottom:15px;
			padding:0 10px 10px;

			h3{
				margin:10px 0;
			}

			.item{
				padding-right:30px;

				img{
					width:40px;
				}
			}
		}
	}

	/*---ブログのページ読み込み中---*/
	.pager_area{
		padding-bottom:20px;
	}


	/*--------------------------------------------------*/
	/*-------------------- paginate --------------------*/
	/*--------------------------------------------------*/
	.pagination li span,
	.pagination li a{
		width:40px;
		height:40px;
		font-size:14px;
	}
	.paginate_info .pagination li span,
	.paginate_info .pagination li a{
		background-color:var(--d_red);
	}
	.paginate_info .pagination li.active span,
	.paginate_info .pagination li.active a{
		background-color:var(--red) !important;
	}
}