@charset "utf-8";
/* @import url("common.css"); */
/* ##############################################################################
		画面サイズ 1536px 以上
############################################################################## */
@media (min-width: 1536px) {
  /* スタイルルール */
	.mv-container {
    height: 100vh;
		aspect-ratio: unset;
	}
}

/* ##############################################################################
		画面サイズ 1025px 以上
############################################################################## */
@media (min-width: 1025px) {
  /* スタイルルール */

}

/* ##############################################################################	
		画面サイズ 600px 以上 1024px 未満
############################################################################## */

@media (max-width: 1024px) {
	/* ========================================
			全体設計
	========================================= */
	section:last-of-type{
		margin-bottom: max(100px, 12vw);
	}
	.container-8,.container-20,.container-10,.container-16{
		max-width: 92vw;
    margin: 0 auto;
	}
	br.pc{
		display: none;
	}
	br.tb{
		display: block;
	}
	/* ========================================
			HEADER
	========================================= */
	.pc-nav{
		max-width: calc(100% - 13vw);
	}
	.pc-menu li+li {
    padding-left: 3vw;
	}
	/* ========================================
			TOP
	========================================= */
	/* ========================================
	POST
	========================================= */
	#page-post-container .post ul li a{
		grid-template-columns: 1fr;
	}
}

/* ##############################################################################	
		画面サイズ 599px 未満
############################################################################## */

@media (max-width: 599px) {
	/* ========================================
			全体設計
	========================================= */
	body{
		font-size: 12px !important;
		letter-spacing: 1px;
	}
	br.tb{
		display: none;
	}
	br.sp{
		display: block;
	}
	.more-btn a span.circle{
		width: 3rem;
    height: 3rem;
	}
	.more-btn a::after{
		width: 18px;
    height: 12px;
		right: 15px;
	}
	.page-ttl .sec-ttl{
		text-align: start;
	}
	/* ========================================
			HEADER
	========================================= */
	.pc-header,.fixedNav{
		display: none;
	}
	.header-logo{
		width: 34%;
	}
  .sp-header{
		display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
		background-color: rgb(255 255 255 / 80%);
	}
	.sp-header .sp-nav.open {
		position: fixed;
		right: 0;
	}
	.ham-btn{
		cursor: pointer;
    width: 33px;
    height: 33px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 6;
	}
	.btn-line {
		display: block;
		position: relative;
		width: 100%;
		height: 2px;
		background-color: #333;
		border-radius: 60px;
		transition: all .4s;
		margin: 0 auto;
	}	
	.btn-line::before,
	.btn-line::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #333;
		border-radius: 60px;
		transition: all .4s;

	}	
	.btn-line::before {
		/* 上の線の位置 */
		transform: translateY(-10px);
	}	
	.btn-line::after {
		/* 下の線の位置 */
		transform: translateY(10px);
	}	
	.btn-line.open {
		background-color: transparent; /* 真ん中の線を透明に */
	}	
	.btn-line.open::before {
		transform: rotate(-45deg);
	}	
	.btn-line.open::after {
		transform: rotate(45deg);
	}	
	.sp-nav {
		position: fixed;
    top: 0;
		right: -100%;
		width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
		background-color: #ebeef3;
		transition: .3s;
    z-index: 5;
		padding: 8vw;

	}	
	.sp-nav .sp-menu li+li{
		border-top: 1px solid #ccc;
	}
	.sp-nav .sp-menu li a{
		font-size: 1rem;
		display: block;
		width: 100%;
		box-sizing: border-box;
		line-height: 3.5;
		width: 100%;
		padding: 0 14%;
	}
	.sp-nav .sp-menu li:first-child{
		margin-top: 3vh;
	}
	.sp-nav .sp-menu li.contact-btn{
		text-align: center;
		padding-top: 4vh;
	}
	.sp-nav .sp-menu li.contact-btn a{
		font-weight: 600;
		color: var(--color-bg);
		background-color: var(--color-accent);
		border: 1px solid var(--color-accent);
		box-sizing: border-box;
	}
	.sp-nav h1{
		width: 200px;
	}
	.sp-nav .sp-sns{
		display: flex;
		justify-content: center;
    align-items: center;
		padding-top: 5vh;
	}
	.sp-nav .sp-sns a{
		display: inline-block;
    width: 1.3rem;
	}
	.sp-nav .sp-sns li + li{
		padding-left: 20px;
	}
	.sp-nav .sp-sns svg{
		fill: #333;
	}
	
	/* ========================================
			TOP
	========================================= */
	.hero-ttl .main{
		line-height: 1;
	}
	.mv-container img {
    position: relative;
    left: 50%;
    width: max(100%, 80.2rem);
    max-width: initial;
    height: 28rem;
    -o-object-fit: cover;
    object-fit: cover;
    transform: translateX(-50%);
}
	.top-post,.top-service{
		grid-template-columns: 1fr;
	}
	.top-post .sec-ttl{
		grid-row: 1 / 2;
    grid-column: 1 / 2;
		text-align: center;
	}
	.top-post .post{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
	}
	.top-post .more-btn {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    text-align: center;
	}
	.top-service .sec-ttl{
		grid-row: 1 / 2;
		grid-column: 1 / 2;
		text-align: center;
	}
	.top-service .txt-wrap{
		grid-row: 3 / 4;
		grid-column: 1 / 2;
		margin-top: 2vh;
	}
	.top-service img{
		grid-row: 2 / 3;
		grid-column: 1 / 2;
	}	
	.company-list{
		grid-template-columns: 1fr 1fr;
	}
	.company-list li:nth-of-type(odd){
		border-left: none;
	}	
	/* ========================================
	お問い合わせボタン
	========================================= */
	#btn-contact{
		right: 0.5vw;
	}
	#btn-contact a{
		width: 118px;
    height: 101px;
	}
	/* ========================================
	FOTRER
	========================================= */
	#page-top{
		bottom: 0.5vw !important;
	}
	.footer-content{
		grid-template-columns: 1fr;
		gap: 2rem;
		margin: 0 4vw;
	}
	.f-info-conpany{
		display: flex;
    flex-direction: column;
    align-items: center;
	}
	.f-logo{
		max-width: 30vw;
	}
	.f-info-sns .Instagram::before,
	.f-info-sns .Twitter::before,
	.f-info-sns .LINE::before{
		margin-right: 2px;
	}
	.no-accordion{
		display: none;
	}
	.accordion{
		display: block;
	}
	.accordion-02 summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding-right: 1em;
		cursor: pointer;
		transition: all 1s;
	}
	.accordion-02 summary::-webkit-details-marker {
		display: none;
	}
	.accordion-02 summary::after {
		transform: translateY(-25%) rotate(45deg);
		content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 10px;
    border-bottom: 1px solid #333333b3;
    border-right: 1px solid #333333b3;
    transition: transform .3s;
	}
	.accordion-02[open] summary::after {
		transform: rotate(225deg);
	}
	.accordion-02 .details-content {
		transform: translateY(-10px);
		opacity: 0;
		margin: 0;
		transition: transform 1s, opacity 1s;
	}
	.accordion-02[open] .details-content {
		transform: none;
		opacity: 1;
	}
	details[open] .details-content {
		animation: ac-fadeIn 0.5s ease;
	}
	@keyframes ac-fadeIn {
		0% {
			opacity: 0; /* 透明 */
			transform: translateY(-10px); /* 上から表示 */
		}
		100% {
			opacity: 1;
			transform: none;
		}
	}
	
	/* ========================================
	下層ページ共通
	========================================= */
	.breadcrumb{
		display: none;
	}
	.wp-pagenavi .current{
		padding: 0.33rem 0.7rem;
	}
	/* ========================================
	SERVICE
	========================================= */
	.feature-list{
		grid-template-columns: 1fr;
	}
	.service-list li{
		display: block;
	}
	.service-list li .img-wrap,.service-list li .txt-wrap{
		width: 100%;
	}
	/* ========================================
	COMPANY
	========================================= */
	.message-container{
		grid-template-columns: 1fr;
	}
	/* ========================================
	POST
	========================================= */
	#page-post-container{
		grid-template-columns: 1fr;
	}
	/* ========================================
	CONTACT
	========================================= */
	.tel-wrap h3, .mailform-wrap h3{
		font-size: 1.3rem;
		top: -1rem;
	}
	.tel-box a{
		font-size: 1.88rem;
	}
	.tel-wrap, .mailform-wrap{
		padding: 3rem 10px;
	}
	table.formTable tr{
    grid-template-columns: 1fr;
	}
	table.formTable th p{
		font-size: 1rem;
    font-weight: 500;
	}
	.agree .ex{
		text-align: start;
		display: block;
	}
}