/* =======================================================================================
	Layout
======================================================================================= */
.inner {
	max-width: 1200px;
	margin: 0 auto;
}

.newline-pc-diff { display: block; }

@media screen and (max-width: 1199px) {
	.inner { 
		width: calc(100% - 70px);
		margin: 0 auto;
	} 
}

.information,
.aboutau,
.ourbusiness,
.recruit,
.contact { padding: 100px 0; }

.newline-sp { display: inline; }



/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fffef6;
  z-index: 9999999;
  text-align:center;
  color:#694e38;
}

#splash-logo {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#splash-logo p {
	font-family: 'Yomogi', cursive;
}


/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
  z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
  left: 0;
    transform: scaleX(0);
    background-color: #f8ecd1;
  animation-name:PageAnime;
  animation-duration:1.2s;
  animation-timing-function:ease-in-out;
  animation-fill-mode:forwards;
}

@keyframes PageAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
  opacity: 0;
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
  animation-name:PageAnimeAppear;
  animation-duration:1s;
  animation-delay: 0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes PageAnimeAppear{
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/*==================
タイトル
==================*/

.ttl {
	font-family: 'Train One', cursive;
	font-size: 46px;
	color: #ccb8a7;
	font-weight: normal;
	line-height: 1;
}

.ttl-sub {
	font-size: 24px;
	font-weight: bold;
}

/* 右線 */
.right-line{
	display: flex;
	align-items: center;
}

.right-line:after {
	content: "";
	width: 30px;
	border-top: 4px solid #ffb273;
	border-radius: 20px;
	margin-left: 1rem;
}

/* 両サイド線 */
.ttl-box-center { text-align: center; }
.line {
	display: flex;
	justify-content: center;
	align-items: center;
}

.line:before,
.line:after {
	content: "";
	width: 30px;
	border-top: 4px solid #ffb273;
	border-radius: 20px;
}

.line:before { margin-right: 1rem; }
.line:after { margin-left: 1rem; }


/*==================
リンクボタン
==================*/

.link-btn {
	width: 230px;
	margin-left: auto;
	text-align: center;
}

.btntransform {
	width: 100%;
	display: inline-block;
	color: #553e2f;
	font-weight: bold;
	text-decoration: none;
	outline: none;
	line-height: 3.2;
	position: relative;  
	z-index: 1;
}

/* 丸が動く */
.btntransform::before{
	content:'';
	position:absolute;
		left:0;
	z-index: -1;
	width:50px;
	height:50px;
	background:#fbedb5;
	border-radius:25px;
	transition:.3s ease-out;
}

/*hoverした際の形状*/
.btntransform:hover::before { width:100%; }

/* 矢印の形状 */
.btntransform::after {
	position: absolute;
	content: '';
	top: 39%;
	right: 20px;
	width: 14px;
  height: 14px;
  border-top: 4px solid #ffd40d;
	border-right: 4px solid #ffd40d;
	border-radius: 2px;
	transform: rotate(45deg);
}

@media screen and (max-width: 640px) { 
	.information,
	.aboutau,
	.ourbusiness,
	.recruit,
	.contact { padding: 50px 0; }
	.ttl { font-size: 26px; }
	.right-line:after { width: 25px; }
	.line:before, .line:after { width: 25px; }
	.ttl-sub { font-size: 14px; }

	.link-btn { width: 180px; }
	.btntransform::before {
		width: 40px;
		height: 40px;
	}

	.btntransform::after {
		top: 36%;
		right: 8px;
	}
}


/*==================
フェード アニメーション
==================*/

.fadeUp { opacity: 0; }
.fadeIn { opacity: 0; }
.play.fadeUp {
	animation: fadeUp 1s forwards 0s;
	-webkit-animation: fadeUp 1s forwards 0s; 
}
.play.fadeIn {
	animation: fadeIn 1s forwards 0s;
	-webkit-animation: fadeIn 1s forwards 0s;}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translate(0px, 10px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.zoomIn { opacity: 0; }
.play.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
	from { transform: scale(0.6) translateX(0px); }
	to {
		opacity: 1;
		transform: scale(1) translateX(0px);
	}
}

/* 遅延 */

.play.delay-1 { animation-delay: 0.2s; }
.play.delay-2 { animation-delay: 0.4s; }
.play.delay-3 { animation-delay: 0.6s; }
.play.delay-4 { animation-delay: 0.8s; }


/* =======================================================================================
	header
======================================================================================= */

.header-wrap { background: #fffef6; }
/*==================
ナビ
==================*/

header h1 {
	padding: 14px 0;
	line-height: 1.5;
}
.small-h1 {
	font-size: 11px;
	font-weight: normal;
	padding-left: 14px;
}

.nav-box {
	display: flex;
  flex-direction: row-reverse;
}

.sub-menu {
	display: flex;
	position: fixed;
	padding: 10px 10px 5px;
	background: #fff;
	border-radius: 10px;
	box-shadow: rgba(165, 159, 149, 0.2) 0px 2px 6px;
	z-index: 1000;
	top: 10px;
}

.sub-menu li {
	padding: 0 20px;
	position: relative;
}

.sub-menu li a {
	display: block;
	width: 100%;
	font-weight: bold;
}


.small {
	display: inline;
	font-size: 11px;
	font-weight: normal;
}

.double-4 {
	padding-bottom: 8px;
  background:
    linear-gradient(currentColor 0 0) 0 100% /var(--d, 0) 2px no-repeat,
    linear-gradient(currentColor 0 0) 100% calc(100% - 4px) /var(--d, 0) 2px no-repeat;
	transition: 0.3s 0.5s, background-size 0.5s;
}

.double-4:hover {
  --d: 100%;
  background-position: 0% calc(100% - 3px), 100% calc(100% - 3px);
	transition: 0.3s, background-position 0.3s 0.3s;
	color: #f3c900;
}

.nav-text {
	display: none;
}


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

	.double-4 {
		padding-bottom: 8px;
		background: inherit;
	transition: inherit;
	}

	.double-4:hover {
		--d: 100%;
		background-position: inherit;
		transition: inherit;
		color: inherit;
	}

	.open {
		position: fixed;
		top: 12px;
		right: 20px;
		width: 50px;
		height: 50px;
		display: block;
		cursor: pointer;
		transition: opacity 0.2s linear;
		z-index: 1000;
	}

	.open span {
		display: block;
		float: left;
		clear: both;
		height: 4px;
		width: 40px;
		border-radius: 40px;
		background-color: #553e2f;
		position: absolute;
		right: 3px;
		top: 3px;
		overflow: hidden;
		transition: all 0.4s ease;
	}

	.open span:nth-child(1) {
		margin-top: 0;
		z-index: 10000;
	}

	.open span:nth-child(2) { margin-top: 15px; }
	.open span:nth-child(3) { margin-top: 30px; }
	
	.sub-menu {
		opacity: 0;
		flex-direction: column;
		padding-left: 7%;
		transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		height: 0;
		width: 0;
    right: 10px;
    top: 30px;
		position: absolute;
		background-color: rgb(237, 184, 149, .8);
    background-image: linear-gradient( transparent 95%, rgba(237, 210, 149, 1) 50%, rgba(237, 210, 149, 1)), linear-gradient( 90deg, transparent 95%, rgba(237, 210, 149, 1) 50%, rgba(237, 210, 149, 1) );
    background-size: 20px 20px;
    background-repeat: repeat;
		z-index: 18;
		overflow: hidden;
	}

	.nav-text {
		display: block;
		margin-top: 30px;
	}

	

	.sub-menu .nav-text-link a { font-size: 12px; }
	.sub-menu .nav-text-link.privacy { margin-top: -15px;}
	.nav-text p:first-of-type {
		margin-bottom: 0px;
		font-size: 14px;
		font-weight: bold;
		transition-delay: 0.25s;
	}

	.nav-text p:nth-of-type(2) {
		font-size: 12px;
		margin-bottom: 8px;
		transition-delay: 0.25s;
	}

	.nav-text p:nth-of-type(3),
	.nav-text p:nth-of-type(4){
		font-size: 12px;
		transition-delay: 0.25s;
	}

	.nav-text p:nth-of-type(3) {
		position: relative;
		display: inline-block;
	}

	.nav-text p:nth-of-type(3)::before {
		content: '';
    background: url(../img/nav-map.png) no-repeat center center / 100%;
    width: 10px;
    height: 31px;
    position: absolute;
    top: -2px;
    right: -15px;
	}

	.nav-text p:nth-of-type(4){
		margin-top: 0;
		font-size: 10px;
	}

	.sub-menu li {
		display: block;
		float: right;
		clear: both;
		height: auto;
		margin-right: -160px;
		transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	.sub-menu li:first-child { margin-top: 160px; }
	.sub-menu li:nth-child(1) { transition-delay: 0.05s; }
	.sub-menu li:nth-child(2) { transition-delay: 0.1s; }
	.sub-menu li:nth-child(3) { transition-delay: 0.15s; }
	.sub-menu li:nth-child(4) { transition-delay: 0.2s; }
	.sub-menu li:nth-child(5) { transition-delay: 0.25s; }
	.sub-menu li a {
		font-size: 20px;
		font-weight: bold;
		width: 100%;
		display: block;
		padding: 3px 0;
		float: left;
	}

	.oppenned .sub-menu {
		opacity: 1;
		height: 670px;
    width: 480px;
		border-radius: 30px;
	}

	.oppenned span:nth-child(2) { overflow: visible; }
	.oppenned span:nth-child(1), .oppenned span:nth-child(3) {
		z-index: 100;
		transform: rotate(45deg);
	}

	.oppenned span:nth-child(1) { transform: rotate(45deg) translateY(12px) translateX(12px); }
	.oppenned span:nth-child(2) {
		height: 720px;
    width: 500px;
		right: -160px;
		top: -160px;
		background: rgba(255, 243, 183, .8);
	}
	
	.oppenned span:nth-child(3) { transform: rotate(-45deg) translateY(-10px) translateX(10px); }
	.oppenned li { margin-right: 140px; }
	
	@-webkit-keyframes updown {
		0%, 50%, 100% { transform: translatey(0); }
		20% { transform: translatey(5px); }
		25% { transform: translatey(-20px); }
		30% { transform: translatey(20px); }
		35% { transform: translatey(-5px); }
	}
	@keyframes updown {
		0%, 50%, 100% { transform: translatey(0); }
		20% { transform: translatey(5px); }
		25% { transform: translatey(-20px); }
		30% { transform: translatey(20px); }
		35% { transform: translatey(-5px); }
	}
}


/* =======================================================================================
	privacy policy
======================================================================================= */
.privacy-box {
	background: #f8ecd1;
	margin: 100px 0;
	padding: 50px 100px;
	border-radius: 10px;
}

.privacy-box h2 { margin-bottom: 20px; }
.privacy-box section { margin-bottom: 30px; }
.privacy-mb30 { margin-bottom: 30px; }

@media screen and (max-width: 640px) {
	.privacy-box {
		background: #f8ecd1;
		margin: 50px 0;
		padding: 30px 20px;
	}
}


/* =======================================================================================
	お問い合わせフォーム
======================================================================================= */
.form { padding: 100px 0; }
.form-text { text-align: center; }
.form-tel {
	max-width: 500px;
	width: 100%;
	margin: 50px auto 50px;
	background: #f8ecd1;
	border-radius: 10px;
	border: 1px solid #807368;
	text-align: center;
	line-height: 1;
}

.form-tel img {
	margin-bottom: -15px;
	width: 40px;
	vertical-align: sub;
}

.form-tel a {
	display: block;
	width: 100%;
	padding: 30px 0 30px;
	font-size: 30px;
	font-weight: 900;
}

.form-tel a span {
	display: block;
	font-size: 14px;
}

#mailformpro {
	max-width: 1200px;
	width: 100%;
	padding: 50px;
	background: #f8ecd1;
	border-radius: 10px;
}

.mailform {
	max-width: 730px;
	width: 100%;
	margin: 0 auto;
}

.mfp input,
.mfp textarea,
.mfp select {
	padding: 10px;
	background: #fff;
	color: #553e2f;
}

.mfp_buttons-text {
	display: inline-block;
	max-width:  500px;
	width: 100%;
	padding: 20px 35px 15px 20px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	background: #f9bc76;
	border-radius: 40px;
	position: relative;
	transition: .3s all;
}

.mfp_buttons button {
	position: relative;
	max-width:  500px;
	width: 100%;
}

.mfp_buttons button::after {
	display: block;
  content: '';
	max-width:  500px;
	width: 100%;
	height: 68px;
	background: transparent;
	border: 1px solid #47310d ;
	border-radius: 40px;
	position: absolute;
	top: -5px;
	left: 5px;
}

.mfp_buttons:hover .mfp_buttons-text {
	transform: translate(5px,-5px);
	transition: .3s all;
}

div.mfp_buttons { padding: 40px 0 0; }
.mfp_buttons-text img {
	width: 30px;
	vertical-align: sub;
}

.mfp_buttons button#mfp_button_send.mfp_element_button,
.mfp_buttons button#mfp_button_cancel.mfp_element_button {
	max-width: 240px;
	width: 100%;
	padding: 15px 0;
	border-radius: 30px;
	border: solid 1px #807368;
	margin-bottom: 15px;
	position: relative;
}

.mfp_buttons button#mfp_button_send.mfp_element_button::after,
.mfp_buttons button#mfp_button_cancel.mfp_element_button::after { content: none; }

button#mfp_button_send.mfp_element_button {
	background: #f9bc76;
	margin-left: 15px;
	font-weight: bold;
}

button#mfp_button_send.mfp_element_button::before {
	content: "";
	background: url(../img/icon_contact.png) no-repeat;
	background-size: 100%;
	width: 30px;
	height: 30px;
	position: absolute;
		left: 44px;
    top: 12px;
}

button#mfp_button_cancel.mfp_element_button { background: #faf6f3; }

#mfp_overlay_inner h4 { padding: 30px 0; }

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

	.form { padding: 50px 0; }
	.form-tel a {
		padding: 20px 0 20px;
		font-size: 20px;
		line-height: 1.5;
	}

	.form-tel img {
		margin-bottom: 0px;
		width: 22px;
	}

	.form-tel a span { font-size: 11px; }
	#mailformpro { padding: 15px; }

	.mfp input,
	.mfp textarea,
	.mfp select {
		width: 100%;
		padding: 5px;
	}

	.mfp select {
		font-size: 12px;
	}

	.mfp input.check {
		width: 20px;
		font-size: 11px;
	}

	.form#mailformpro dl dt { margin-bottom: -10px; }
	.mfp_buttons-text {
		font-size: 16px;
		padding: 10px 35px 15px 20px;
	}

	.mfp_buttons button::after { height: 55px; }
	button#mfp_button_send.mfp_element_button { margin-left: 0px; }
	form#mailformpro label { font-size: 12px !important;}
	
}

.thanks-box {
	max-width: 650px;
	width: 100%;
	margin: 0 auto;
	padding: 100px 0;
}

.contact-h2 { text-align: center; }
.thanks-box h2 {
	display: inline-block;
	margin: 0 auto 40px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	position: relative;
}

.thanks-box h2::before {
	content: "";
	width: 140px;
	height: 100px;
	background: url(../img/contact_img.png) no-repeat center center / 100%;
	position: absolute;
		top: -68px;
		left: -80px;
	transform: rotate( -10deg );
} 

.thanks-box p { margin-bottom: 20px; }
.thanks-box .marker { background: linear-gradient(transparent 60%, #feec9a 60%); }

@media screen and (max-width: 640px) {
	.thanks-box { padding: 50px 0; }
	.thanks-box h2 { font-size: 15px; }
	.thanks-box h2::before {
		width: 80px;
		height: 50px;
		top: -35px;
		left: -30px;
	}
}

/* =======================================================================================
	404
======================================================================================= */
.erro-page { background-color: #fffef6; }
.erro-page { padding: 100px 0; }
.erro-page h2 {
	max-width: 600px;
	width: 100%;
	margin:  0 auto;
}

.erro-page h2 img { width: 100%; }
.erro-page p {
	max-width: 300px;
	width: 100%;
	margin: auto;
}

.erro-page p img { width: 100%; }
p.erro-page-top {
	background: #fdd781;
	margin-top: 20px;
	font-weight: bold;
	text-align: center;
}

.erro-page-top a {
	display: block;
	width: 100%;
	padding: 20px 0;
	font-size: 20px;
}

@media screen and (max-width: 640px) { .erro-page-top a { font-size: 16px; } }





/* =======================================================================================
	footer
======================================================================================= */
footer {
	padding: 100px 0 0;
	background: #807368;
	color: #fff;
}

.footer-box { background: url(../img/footer_img.png) no-repeat right bottom / 400px; }
.footer-box-content {
	display: flex;
	gap: 50px;
	padding-bottom: 50px;
}

.copylite {
	font-size: 12px;
}

.footer-text p:nth-of-type(3) {
	margin-top: 20px;
}

.footer-text p:nth-of-type(3) a {
	text-decoration: underline;
	color: #fff;
	font-size: 12px;
}

@media screen and (max-width: 640px) { 
	.footer-box-content {
		gap: 20px;
		flex-direction: column;
	}

	.footer-text p { font-size: 12px; }
	.footer-box { background: url(../img/footer_img.png) no-repeat right bottom / 80%; }
}


/* ▼ SP/TB ======================================================== */
/* ▲ SP/TB ======================================================== */

/* 20240509トランクルーム事業追加 */

.ourbusiness-box {
	justify-content: space-around;
}

.rental-office-link {
	position: fixed;
	background: #fff;
	bottom: 20px;
	right: 20px;
	z-index: 999;
	border-radius: 8px;
	padding: 10px 20px;
	text-align: center;
	box-shadow: 2px 4px 10px 0px #0000001A;
}

.rental-office-link::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	background: transparent;
	transition: all 0.4s;
}

.rental-office-link:hover::before {
	background: #000;
	opacity: 0.1;
}


.rental-office-text {
	border-radius: 10px;
}


.rental-office-link img {
	width: 180px;
	height: auto;
	background: #fff;
	aspect-ratio: 2670 / 1017;
	border-radius: 10px;

}

.is-sp {
	display: none;
}

@media screen and (max-width: 640px) {
	.is-sp {
		display: block;
	}
}


/* =======================================================================================
	trunk
======================================================================================= */

.trunk_top {
	padding-top: 120px;
	padding-bottom: 120px;
	background-color: #f6feff;

}

.trunk-content {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.trunk-ttl {
	padding-bottom: 20px;
	text-align: center;
	font-size: 40px;
	font-family: 'Noto Sans JP', sans-serif;
	color: #442c16;
}

.trunk-content-ttl {
	padding-bottom: 16px;
}

.trunk-content-text p {
	font-size: 1.6rem;
}

.trunk-content-text span {
	font-weight: 700;
}


.trunk-content-img {
	width: 47%;
}

.trunk-content-img img {
	height: auto;
}

.trunk-content-text {
	width: 47%;
}



.trunk-contact-text {
	text-align: center;
	font-size: 18px;
}

.trunk-content-img img {
	border-radius: 20px;
	width: 100%;
}


@media screen and (max-width: 640px) {
	.trunk-content {
		margin-top: 0;
		flex-direction: column-reverse;
		gap: 20px;
	}

	.trunk-content-drawing {
		padding: 20px 10px;
	}

	.trunk-ttl {
		font-size: 22px;
		white-space: nowrap;
	}

	.trunk-content-ttl {
		font-size: 28px;
	}

	.message-content-text.trunk-content-text {
		width: 100%;
	}

	.trunk_top {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.trunk-content-img {
		width: 100%;
	}
	
	.trunk-content-text {
		width: 100%;
	}

	.trunk-contact-text {
		font-size: 14px;
	}
	
}

/* =======================================================================================
	access(trunk)
======================================================================================= */

iframe {
    max-width: 1300px;
    width: 100%;
}

.trunk_access {
	padding-top: 120px;
	padding-bottom: 120px;

}

.trunk_access-inner {
	max-width: 1300px;
	text-align: center;
	width: calc(100% - 30px);
}


.trunk_access-text {
	font-size: 20px;
}

@media screen and (max-width: 640px) {
	.trunk_access {
		padding-block: 80px;
	}
	
	.trunk_access-inner {
		max-width: 350px;
	}
	.trunk_access-inner iframe {
		height: 350px;
	}
}


/* =======================================================================================
	trunk-status
======================================================================================= */

/* セクション全体のスタイル */
.trunk_status {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #f6feff;
}

.trunk_status-inner {
	max-width: 850px;
	text-align: center;
}

/* タイトルボックスのスタイル */
.trunk_status .ttl-box {
}

/* テーブルのスタイル */
.trunk-table {
    width: 850px;
    border-collapse: collapse;
    margin-bottom: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

}



.trunk-table th,
.trunk-table td {
    border: 2px solid #442c16;
    padding: 12px;
    text-align: center;
}

.trunk-table th {
    background-color: #54c0d3;
	font-size: 20px;
    font-weight: bold;
}

.trunk-table tr {
	font-size: 20px;
}

.trunk-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

@media (any-hover: hover) {
.trunk-table tbody tr:hover {
    background-color: #f1f1f1;
}}

/* レスポンシブ対応 */
@media screen and (max-width: 640px) {

	.trunk_status-inner {
		width: 95%;
		overflow-x: auto;
	}
    .trunk-table th,
    .trunk-table td {
        padding: 8px;
    }

    .trunk_status {
        padding: 80px 10px;
    }
	
	.trunk-table th {
		font-size: 18px;
	}
	
	.trunk-table tr {
		font-size: 16px;
		word-break: break-word;

	}
}



/* =======================================================================================
	contact-form(trunk)
======================================================================================= */
.trunk-contact {
	padding-top: 120px;
	padding-bottom: 40px;
	padding-inline: 15px;
}

.trunk-contact-ttl {
	padding-bottom: 0;
}


/*ContactForm7カスタマイズ*/

.contact-form {
	margin-top: 20px;
	padding-bottom: 40px;
}

table.CF7_table{
	width:100%;
	max-width: 880px;
	margin:0 auto;
	background: #442c16;
}

table.CF7_table td{
	background: #fff;
}

.CF7_table th,.C {
	padding-block: 10px;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	width: 100%;
	padding-block: 10px;
}

.CF7_table input:focus, .CF7_table textarea:focus {
	border: 2px solid #b0b0b0;
    outline: none;
}

.CF7_table ::placeholder {
	color:#b0b0b0;
}

.CF7_req{
	position: relative;

}

/*「必須」文字*/
.CF7_req::after{
	position: absolute;
	content: "※必須";
	font-size: 14px;
	padding: 5px;
	color: #fff;
	border-radius: 3px;
	top: 50%;
	right: 5px;
	width: 60px;
	transform: translateY(-50%);
}

.CF7_req p {
	font-size: 16px;
}

.CF7_table p {
	font-size: 16px;
}



/* タイトル列 */
	.CF7_table th{
	width:30%;
	background-color:#54c0d3;
	padding-block: 10px;
	}


.wpcf7-list-item {
	text-align: left;
}

.CF7_date input {
	width: 30%;
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#54c0d3;
	border: 2px solid #54c0d3;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
	width: 200px;
	padding-block: 10px;
	border-radius: 30px;
	transition: all 0.4s;
}

@media (any-hover: hover) {
input.wpcf7-submit:hover {
	background: #fff;
	color: #54c0d3;
}}

.CF7_btn{
	text-align:center;
	margin-top:40px;
}

.CF7_btn .wpcf7-spinner{
	display: none;
}

input.wpcf7-form-control.wpcf7-date.wpcf7-validates-as-date {
    padding-left: 15px;
}

.wpcf7-radio {
	display: flex;
}



/* レスポンシブ */
@media screen and (max-width: 640px){

	.trunk-contact {
		padding-top: 80px;
		padding-bottom: 10px;
		}

	table.CF7_table{
	width:100%;
	}

    .trunk-contact-ttl {
		line-height: 1.15;
	}

	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2em;
	}
	.CF7_table th{
	background-color:#54c0d3;
	}

	/*「必須」文字*/
	.CF7_req::after{
	padding: 0;
	right: 20px;
	}

	.CF7_date input {
		width: 50%;
	}

}

/* =======================================================================================
	trunk_link
======================================================================================= */

.trunk_link {
	display: grid;
    place-items: center;
	padding-bottom: 160px;
}

.trunk_link p {
	font-size: 18px;
	position: relative;
}

.trunk_link .trunk_link-btn {
	width: 200px; 
}

.trunk_link-cta {
	display: grid;
	place-content: center;
	height: 57.59px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	background: #EA734D;
	border-radius: 30px;
	transition: all 0.4s;
	border: 2px solid #EA734D;
}



.trunk_link-cta:hover {
	background: #fff;
	color: #EA734D;
  }
  

@media screen and (max-width: 640px){
	.trunk_link {
		padding-bottom: 100px;
	}

	.trunk_link .link-btn {
		width: 200px;
	}
}

/* =======================================================================================
	trunk_entry
======================================================================================= */
.trunk-entry {
	padding-top: 120px;
	padding-bottom: 120px;
	padding-inline: 15px;
}


.CF7_flex {
	padding-left: 15px;
}


.CF7_flex p {
	display: flex;
	align-items: center;
}

.trunk-attention {
	width: 100%;
	max-width: 880px;
	margin-top: 20px;
	margin-inline: auto;
}

.trunk-attention-ttl p {
	font-size: 18px;
	font-weight: 700;
}

.trunk-attention-items {
	padding-left: 20px;
}

.wpcf7-list-item-label {
	padding-left: 3px;
}

.trunk_agree {
	margin-top: 40px;
	text-align: center;
}

.trunk_agree input[type=checkbox] {
	transform: scale(1.5);
}

.trunk_agree .wpcf7-list-item-label {
	padding-left: 5px;
}

.trunk_agree p {
	font-size: 1.8rem;
}

.契約中 {
	color: red;
}

@media screen and (max-width: 640px){
	.trunk-attention-items {
		padding-left: 8px;
	}

	.trunk-entry .wpcf7-list-item {
		margin-left: 0;
		text-align: left;
	}

	.trunk_agree {
		margin-top: 20px;
	}

}

/* =======================================================================================
	fv-trunk
======================================================================================= */

.fv-trunk {
	color: #442c16;
	background: #F6FEFF;
}

.fv-trunk-inner {
	display: flex;
}

.fv-trunk-picture {
	width: calc((822 / 1440) * 100%);
	display: flex;
}

.fv-trunk-picture img {
	width: 100%;
    object-fit: cover;
}

.fv-trunk-container {
	background: #54C0D3;
	width: calc((618 / 1440) * 100%);
}

.fv-trunk-wrapper {
	padding-top: 49px;
	padding-bottom: 53px;
}

.fv-trunk-copy {
	display: inline-block;
	transform: translateX(-68px);
}

.fv-trunk-title-text {
	display: inline-block;
	background: #fff;
	line-height: 1.5;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: 0.06em;
	padding: 0 10px;
	opacity: 0; /* 初期状態は非表示 */
    animation: slideInItem 0.5s ease forwards; /* アニメーション設定 */
}

/* 各アイテムに異なるディレイを設定
.fv-trunk-title-text:nth-child(1) {
    animation-delay: 0.3s;
}

.fv-trunk-title-text:nth-child(2) {
    animation-delay: 0.6s;
} */

/* フェードインのキーフレーム定義 */
@keyframes slideInItem {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fv-trunk-title-text + .fv-trunk-title-text {
	margin-top: 17px;
}

.fv-trunk-title-text span {
	font-size: 24px;
}

.fv-trunk-description {
	display: inline-block;
	margin-top: 17px;
	font-size: 40px;
	background: #fff;
	line-height: 1.5;
	font-weight: 600;
	padding: 0 10px;
	opacity: 0; /* 初期状態は非表示 */
    animation: slideInItem 0.8s ease forwards; /* アニメーション設定 */
}

.fv-trunk-description span {
	font-size: 64px;
	font-weight: 700;
}

.fv-trunk-items {
	display: flex;
	text-align: center;
	width: 75%;
	gap: 20px;
	padding-left: 10px;
}

.fv-trunk-item {
	background: #fff;
	color: #54C0D3;
	border-radius: 50%;
	width: 113px;
	height: 113px;
	margin-top: 45px;
	display: grid;
	place-content: center;
	font-size: 18px;
	opacity: 0; /* 初期状態は非表示 */
    animation: fadeInItem 0.8s ease forwards; /* アニメーション設定 */
}

/* 各アイテムに異なるディレイを設定 */
.fv-trunk-item:nth-child(1) {
    animation-delay: 0.3s;
}

.fv-trunk-item:nth-child(2) {
    animation-delay: 0.6s;
}

.fv-trunk-item:nth-child(3) {
    animation-delay: 0.9s;
}

/* フェードインのキーフレーム定義 */
@keyframes fadeInItem {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fv-trunk-item span {
	font-size: 24px;
	font-weight: 700;
}

.fv-trunk-cta {
	width: 75%;
	margin-top: 45px;
	display: grid;
	place-content: center;
	padding-left: 10px;
}

.fv-trunk-text {
	font-size: 20px;
	color: #fff;
	text-align: center;
	position: relative;
}

.fv-trunk-text::before {
	position: absolute;
	content: "";
	width: 35px;
	height: 31px;
	left: -15px;
	top: 50%;
	transform: translateY(-50%);
	background: url(../img/trunk-cta-left.svg)no-repeat center center / contain;
}

.fv-trunk-text::after {
	position: absolute;
	content: "";
	width: 35px;
	height: 31px;
	right: -15px;
	top: 50%;
	transform: translateY(-50%);
	background: url(../img/trunk-cta-right.svg)no-repeat center center / contain;
}

.fv-trunk-button {
	font-size: 20px;
	background: #EA734D;
	width: 253px;
	height: 53px;
	border-radius: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
	color: #fff;
	font-weight: 700;
	transition: all 0.4s;
	border: 2px solid #fff;
}

.fv-trunk-button:hover {
	background: #fff;
	color: #EA734D;
}

@media screen and (max-width: 640px){
	.fv-trunk-inner {
		display: block;
		width: 100%;
	}

	.fv-trunk-picture {
		width: 100%;
	}

	.fv-trunk-container {
		width: 100%;
		padding-bottom: 0;
	}

	.fv-trunk-wrapper {
		padding-top: 40px;
		padding-inline: 25px;
	}
	
	.fv-trunk-copy {
		transform: none;
	}

	.fv-trunk-title-text span {
		font-size: 24px;
	}
	
	
	.fv-trunk-title-text {
		font-size: 24px;
	}

	.fv-trunk-title-text + .fv-trunk-title-text {
		margin-top: 10px;
	}
	
	.fv-trunk-title-text span {
		font-size: 16px;
	}
	
	.fv-trunk-description {
		margin-top: 10px;
		font-size: 26px;
	}
	
	.fv-trunk-description span {
		font-size: 32px;
	}
	
	.fv-trunk-items {
		width: 100%;
		gap: 20px;
		padding-left: 0;
	}
	
	.fv-trunk-item {
		width: 100px;
		height: 100px;
		margin-top: 19px;
		font-size: 16px;
		line-height: 1.5;
		}
	
	.fv-trunk-cta {
		width: 100%;
		margin-top: 25px;
		padding-left: 0;
	}

}

/* =======================================================================================
	ヘッダーフッター調整用
======================================================================================= */


.trunk-header-wrap {
	background: #F6FEFF;
}

#trunk-footer {
	background: #54C0D3;
}

.sub-menu li {
	padding: 0 15px;
}
.sub-menu li:nth-child(7) {
	padding: 0;
  }

/* =======================================================================================
	trunk-faq
======================================================================================= */
.trunk_faq {
	padding: 120px 0;

}


.trunk_faq-inner {
	max-width: 600px;
}


.trunk-faq-ttl {

}

.trunk_faq-list {
	margin-inline: auto;
	padding-left: 100px;
}

.trunk_faq-list + .trunk_faq-list {
	margin-top: 20px;
}

.trunk_faq-text {
	font-size: 28px;
}

summary {
  display: block;
  
  &::-webkit-details-marker {
    display: none;
  }

}

.trunk_faq-question {
	font-size: 20px;
	position: relative;
}

.trunk_faq-question span {
	transition: all 4s ease;
}

.trunk_faq-question::before,
.trunk_faq-question::after {
	content: '';
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	background: #553e2f;
}
.trunk_faq-question::before {
	right: 20px;
	width: 20px;
	height: 2px;
}
.trunk_faq-question::after {
	right: 29px;
	width: 2px;
	height: 20px;
	transition: rotate 0.3s ease;
}

@media(any-hover: hover) {
	.trunk_faq-question:hover {
		cursor: pointer;
	}
}

details[open] .trunk_faq-question span {
	background: linear-gradient(transparent 64%,rgba(255, 250, 125, 0.86) 0%);
}

details[open] .trunk_faq-question::after {
  rotate: 90deg;
}


.trunk_faq-answer {
	font-size: 18px;
	padding-bottom: 40px;
}

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

	.trunk_faq {
		padding-top: 80px;
		padding-bottom: 80px;
	
	}

	.trunk_faq-question {
		font-size: 15px;
	}

	.trunk_faq-question::before {
		right: 0;
		width: 15px;
		height: 2px;
	}
	.trunk_faq-question::after {
		right: 7px;
		width: 2px;
		height: 15px;
	}
	
	.trunk_faq-answer {
		font-size: 14px;
	}

	.trunk_faq-list {
		margin-inline: auto;
		padding-left: 0;
	}
	.trunk_faq-text {
		font-size: 20px;
	}

}

/* =======================================================================================
	reason(trunk)
======================================================================================= */
.trunk_reason {
	padding: 120px 0;
}

.inner {

}

.trunk-reason-ttl {

}

.trunk_reason-items {
	display: flex;
	justify-content: space-around;
	margin-top: 40px;
}

.trunk_reason-item {
	width: 30%;
}


.trunk_reason-image img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.trunk_reason-item-ttl {
	font-size: 32px;
	font-weight: 700;
}

.trunk_reason-item-ttl span {
	font-size: 32px;
	color: #54C0D3;
	font-weight: 700;

}

.trunk_reason-text {
	font-size: 18px;
}

.trunk_reason-text span {
	background: #ffff00;
	font-weight: 700;
}

@media screen and (max-width: 640px){
	.trunk_reason {
		padding: 80px 0;
	}
	
	.inner {
	
	}
	
	.trunk-reason-ttl {
		font-size: 24px;
	}
	
	.trunk_reason-items {
		flex-direction: column;
		gap: 40px;
		margin-top: 0px;
	}
	
	.trunk_reason-item {
		width: 100%;
	}
	
	.trunk_reason-image {
		
	}
	.trunk_reason-image img {
		width: 100%;
		border-radius: 20px;
	}
	
	.trunk_reason-item-ttl {
		font-size: 20px;
		font-weight: 700;
	}
	
	.trunk_reason-item-ttl span {
		font-size: 24px;
		color: #54C0D3;
		font-weight: 700;
	
	}
	
	.trunk_reason-text {
		font-size: 18px;
	}
	
	.trunk_reason-text span {
		background: #ffff00;
		font-weight: 700;
	}
}

/* スライダー */
.card {
	padding-block: 10px;
  }
  .card__inner {
	width: min(calc(800px + 20px * 2), 100%);
	padding-inline: 20px;
	margin-inline: auto;
  }
.swiper-wrapper.card__swiper-wrapper {
	transition-timing-function: linear;
  }

.swiper-slide.card__swiper-slide {
	width: 580px;
  }

.swiper-slide.card__swiper-slide p {
	font-weight: 700;
	font-size: 40px;
	color: #54C0D3;
	line-height: 1;

  }

/* =======================================================================================
	use(trunk)
======================================================================================= */
.trunk_use {
	padding-top: 120px;
	padding-bottom: 120px;
	background-color: #f6feff;

}



.trunk_use-inner {
	max-width: 1200px;

}


.trunk-use-ttl {

}



.trunk_use-content {

}

.trunk_use-list {

}

.trunk_use-item {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	padding: 40px;
	background: #fff;
	border: 3px solid #54C0D3;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);


}

.trunk_use-main {

}

.trunk_use-box {

}

.trunk_use-box:not(:first-child) {
	margin-top: 20px;

}
.trunk_use-box h3 {
	font-size: 28px;
	font-weight: 700;

}

.trunk_use-box ul {
	padding-inline-start: 20px;
}

.trunk_use-box li {
	font-size: 18px;
	position: relative;
	padding-left: 1.2em;
}

.trunk_use-box li::before {
	content: "•";
	position: absolute;
	left: 0.5em;
	top: 0;
}

.trunk_use-box li span {
	font-weight: 700;
}

.trunk_use-item-ttl {
	display: inline-block;
	padding-inline: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	background: #54C0D3;
	color: #fff;
	border-radius: 4px;
}

.trunk_use-box p {
	padding-inline-start: 20px;
}

.trunk_use-box p span {
	font-weight: 700;
} 

.trunk_use-voice {
	margin-top: 20px;

}

.trunk_use-voice p {
	padding-inline-start: 20px;
}

.trunk_use-img {
	display: grid;
	width: 28%;
	align-items: center;

}
.trunk_use-img img {
	width: 100%;
	height: auto;

}

@media screen and (max-width: 640px){
	.trunk_use {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.trunk_use-inner {
		width: 100%;
		padding-inline: 15px;
	
	}
	
	.trunk_use-item {
		flex-direction: column;
		margin-top: 20px;
		padding: 20px 15px;
	}
	
	.trunk_use-box h3 {
		font-size: 20px;
	}
	
	.trunk_use-box ul {
		padding-inline-start: 0;
	}
	
	.trunk_use-box li {
		font-size: 16px;
	}
	
	.trunk_use-box li span {
		font-weight: 700;
	}
	
	.trunk_use-item-ttl {
		padding-inline: 10px;
		margin-top: 20px;
		font-size: 16px;
		line-height: 1.5;
	}
	
	.trunk_use-box p {
		padding-inline-start: 0;
	}
	
	.trunk_use-voice {
		margin-top: 20px;
	}
	
	.trunk_use-voice p {
		padding-inline-start: 0;
	}
	
	.trunk_use-img {
		display: grid;
		width: 100%;
		margin-top: 10px;
		align-items: center;
	
	}
	.trunk_use-img img {
		width: 100%;
		height: auto;
	
	}
}

/*----------------------------------
  モーダル
-----------------------------------*/
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.trunk_status-link {
	display: inline-block;
	font-size: 20px;
	color: #007aff;
    cursor: pointer;
	text-decoration: underline;
}

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

.modal-content {
	width: 80%;
}
}

/*----------------------------------
  バナー
-----------------------------------*/
.trunk_banner {
	padding-top: 120px;
	padding-bottom: 120px;
	background-color: #f6feff;

}


.trunk_banner-inner {
	text-align: center;

}

.trunk_banner-content {

}

@media screen and (max-width: 640px){
	.trunk_banner {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.trunk_banner-inner {
		width: 100%;
		
	
	}
}

/* ロゴ */
.trunk_logo {
	padding-bottom: 20px;
}

.trunk_logo_inner {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	
}

.trunk_logo_inner a {
	display: flex;
	justify-content: center;
	gap: 10px;
	transition: 0.4s all;
}

@media(any-hover: hover) {
	.trunk_logo_inner a:hover {
		opacity: 0.7;
		}
}

.trunk_logo_img {
	width: 50px;
	height: 47.98px;
}

.trunk_logo_inner img {
	width: 100%;
	height: auto;
	aspect-ratio: 349 / 335;
}

.trunk_logo_inner p {
	display: flex;
	align-self: center;
	font-size: 20px;
	font-weight: 700;


}

/* 2025.10追記 */
.tr-thanks-box {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 0;
}

.tr-thanks-box .marker
 {
    background: linear-gradient(transparent 60%, #feec9a 60%);
}

.tr-thanks-box h2 {
    display: inline-block;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    position: relative;
}


.tr-thanks-box p
 {
    margin-bottom: 20px;
}

/* ナビメニュー */
.sub-menu li:nth-child(7) {
    padding: 0 15px;
}

.sub-menu li:nth-child(8) {
    padding: 0;
}

@media screen and (max-width: 1199px) {
    .sub-menu
 {
        background-color: rgb(84, 192, 211, .8);
        background-image: none;
  }
}

.tr_title {
	font-size: 2rem;
	font-weight: 700;
}