@charset "utf-8";

/* -----------------------
common.css：リセット・汎用
-----------------------　*/

/* reset
----------------------------------- */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}


/* common
----------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	position: relative;
	background: #fff;
	font-family: 'NotoSansCJKjp','Noto Sans JP', sans-serif;
	color: #222;
	word-wrap: break-word;
	word-break: break-all;
	-webkit-text-size-adjust: 100%;
	-moz-transition: all 0.4s linear;
	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;
}

/* tel_pc_cut */
@media (min-width: 600px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

/* a
----------------------------------- */

a:link {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: 0.3s;
}

a:visited {
	color: #fff;
	text-decoration: none;
}

a:active {
	color: #fff;
	text-decoration: none;
}

a[href^="tel"] {
	color: #222;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px)  {

	a[href^="tel"] {
		color: #fff;
	}

	#flow a[href^="tel"],
	#company a[href^="tel"] {
		color: #222;
		text-decoration: underline;
	}

}

/* p
----------------------------------- */

p {
	line-height: 2;
	margin: 0 0 30px 0;
}


/* .btn
----------------------------------- */

.btn_wrap {
	position: relative;
	width: fit-content;
	margin: 60px auto;

  text-align: center;
}

.btn_wrap span.btn_fukidashi {
	display: block;
	position: absolute;
	left: 14%;
	top: -25px;

	width: fit-content;
	margin: 0 auto;
	padding: 0 10px;
	background: #fff;
	border-radius: 4px;

	text-align: center;
	color: #222;
	font-weight: 600;

	z-index: 100;
}

.btn_wrap span.btn_fukidashi::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;

  transform: translateX(-50%);
  width: 0;
  height: 0;

  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}


.btn {
	position: relative;
	display: inline-block;
	cursor: pointer;

	width: 430px;
	padding: 20px;
	border: none;
  border-radius: 6px;

	text-align: center;
  font-weight: bold;
	font-size: 1.2em;

	color: #fff;
	text-decoration: none;

  transition: all .2s;
}

.btn._confirm,
.btn._contact {
	background: #B90000;
  box-shadow: 0 5px 0 #5C0000;
}

.btn._line {
	background: #3EB921;
  box-shadow: 0 5px 0 #156F00;
}

.btn._tel {
	background: #3C92D0;
  box-shadow: 0 5px 0 #1767A2;
}

.btn._cta_tel {
	background: #fff;
  box-shadow: 0 5px 0 #1C0000;
	color: #390403;
}

.btn._mail {
	background: #575757;
  box-shadow: 0 5px 0 #1C1C1C;
}

.btn::after {
  content: "";
  position: absolute;
  top: 51%;
  right: 10px;
  width: 0;
  height: 0;
	transform: translateY(-50%);
}

.btn._line::after,
.btn._tel::after {
	border-left: 6px solid #fff;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}

.btn._mail::after {
	border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #fff;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1279px) {

	.btn_wrap,
	.btn {
		width: fit-content;
	}
	.btn {
		padding: 10px 30px;
	}
	.btn_wrap:active,
	.btn:active {
		box-shadow: none;
	  transform: none;
	}
	.btn_wrap span.btn_fukidashi {
		left: 9%;
		top: -15px;
		font-size: .8em;
	}
	.btn._green {
		font-size: 1em;
		padding: 20px 40px;
	}

}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1279px) {
	.btn {
		font-weight: 600;
		appearance: none;
		-webkit-appearance: none;
	}
}

/* btn_animation */
.btn:hover,
.btn._return:hover,
.btn._line:hover,
.btn._mail:hover,
.btn._navy:hover,
.btn._orange:hover {
  box-shadow: none;
  transform: translateY(5px);
}

.btn:active {
	box-shadow: none;
  transform: translateY(5px);
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1279px) {

	.btn:hover,
	.btn:active {
  	box-shadow: 0 5px 0 #5A0000;
	  transform: none;
	}

	.btn._green:hover,
	.btn._green:active {
  	box-shadow: 0 5px 0 #0E7106;
	  transform: none;
	}

}


/* section
----------------------------------- */
.sec {
	padding: 0 0 60px 0;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1279px) {
	.sec {
		padding: 20px;
	}
}

/* .ttl
----------------------------------- */

.ttl {
	padding: 60px 0;

	text-align: center;
	line-height: 1.6;

	font-size: 2.4em;
}

.sub_ttl {
	margin: 0 0 30px 0;
}

.sub_ttl .icon {
	display: inline-block;
	background: #222;
	margin: 0 10px 0 0;
	padding: 5px 15px;

	font-size: .9em;
	color: #fff;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1279px) {
	.ttl {
		padding: 10px 0 30px 0;
		font-size: 1.5em;
	}
	.ttl._info {
		margin: 40px 0 30px 0;
	}
	.ttl._new .txt {
		position: absolute;
		top: -2.5em;
		left: -1.8em;
	}
	.sub .ttl._new .txt {
		left: -1em;
	}
	.sub_ttl {
		padding: 0 0 0 15px;
		font-size: 1.2em;
	}
	.sub_ttl .icon {
		margin: 0 10px 5px 0;
		padding: 2px 7px;

		font-size: .9em;
	}
}

/* .inner
----------------------------------- */

.inner {
	width: 1100px;
	margin: 0 auto;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px)  {

	.inner {
		width: 100%;
		margin: 0;
		padding: 0;
	}

}

/* .txt
----------------------------------- */

.txt {
	margin: 0 0 60px 0;

	line-height: 2.4;
	text-align: center;
	font-size: 18px;
}

.txt b {
	font-size: 1.2em;
}

@media screen and (max-width: 912px) {
	.txt {
		margin: 0 60px;
		text-align: left;
	}
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1279px) {

	.txt {
		margin: 0;
		text-align: left;
		font-size: .9em;
	}

	.txt p {
		line-height: 1.6;
	}

	.txt._ctr {
		text-align: left;
	}

	.sub .txt {
		margin: 20px 0;
	}

	.sub .txt p {
		margin: 0 0 20px;
	}
}



/* .content_box
----------------------------------- */

.content_box {
	display: flex;
	gap: 30px;

	width: 1100px;
  margin: 40px auto 60px auto;
}

.content_box .content {
	width: 50%;
	background: #fff;
	padding: 30px;
	border-radius: 10px;

	font-size: 1.1em;
}

.content_box .content h3 {
	width: 360px;
	margin: -115px 0 0 50px;
}

.content_box .content dl {
	display: flex;
	gap: 20px;
	margin: 0 0 20px 0;

	align-items: center;
}

.content_box .content dl:last-child {
	margin: 0;
}

.content_box .content dl dt {
	width: 200px;

	text-align: center;
	color: #fff;
}

.content_box .content dl dd {
	width: 360px;

	font-size: .9em;
}


/* .point
----------------------------------- */

.point {
	font-weight: 800;
	color: #D45737;
}


/* .img_list
----------------------------------- */

.img_list {
	display: flex;
	gap: 30px;
	margin: 0 0 30px 0;
}

/* tablet */
@media (max-width: 1180px) and (max-height: 820px) {
	.img_list {
		display: flex;
		grid-template-columns: auto;
		gap: 10px;
	}
	.img_list li:nth-child(3) {
		grid-column: auto;
		width: inherit;
	}
}

/* sp_other */
@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1279px) {

	.img_list {
		display: grid;
	  grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.img_list li:nth-child(3) {
	  grid-column: span 2;
	  width: 100%;
	}
	.img_list li img {
		width: 100%;
	}

}


/* .tabs
----------------------------------- */

.tabs-container {
  width: 100%;
  max-width: 1100px;
  margin: 20px auto 40px auto;
	}

.tabs {
  display: flex;
	align-items: flex-end;
}

.tabs .tab-button {
	border-radius: 10px 10px 0 0;
}

.tab-button {
	position: relative;

	width: 50%;
	height: 60px;
	border: none;

  cursor: pointer;
	transition: 0.3s ease;

	font-weight: 600;
	font-size: 1.2em;
	color: #fff;

}

.tab-button.active,
.tab-button:hover {
	height: 70px;
}

.tab-content {
  display: none;
	padding: 40px;
	border-radius: 0 0 10px 10px;

  opacity: 0;
  transition: opacity 0.5s ease;
}

.tab-content .inner {
	padding: 5px;
}

.tab-content.active {
  display: block;
  opacity: 1;
}

/* content_box */
.content_box._pc {
	display: flex;
}
.content_box li {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);

	padding: 20px;

	text-align: center;
	font-weight: 600;
	font-size: 1.4em;
}
.content_box li span {
	color: #B90000;
}
.content_box .sareta01 {
	background: url("../img/bg_escalate_sareta01.jpg") no-repeat 0 0 / cover;
}
.content_box .sareta02 {
	background: url("../img/bg_escalate_sareta02.jpg") no-repeat 0 0 / cover;
}
.content_box .shita01 {
	background: url("../img/bg_escalate_shita01.jpg") no-repeat 0 0 / cover;
}
.content_box .shita02 {
	background: url("../img/bg_escalate_shita02.jpg") no-repeat 0 0 / cover;
}


@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1279px) {

	.tabs {
		width: 100%;
	}
	.tabs .tab-button {
		padding: 0 10px;
		font-size: 1em;
	}
	.tabs .tab_item {
		line-height: 1.3;
		font-size: 1.2em;
		padding: 20px 0;
	}
	.tabs .tab_item._tab01,
	.tabs .tab_item._tab02 {
		margin: 10px 0 0 0;
	}
	.tabs .tab_item._tab01:hover,
	.tabs .tab_item._tab02:hover {
		opacity: 1;
	}
	.tabs input:checked + .tab_item._tab01,
	.tabs input:checked + .tab_item._tab02 {
		padding: 25px 0;
	}


	/* .worries_box */
	._ptn01 .tab-button.tabs01,
	._ptn01 .tab-button.tabs02 {
		padding: 0 0 0 40px;
	}
	._ptn01 .tab-button.tabs01::before,
	._ptn01 .tab-button.tabs02::before {
		position: absolute;
		left: 10px;
		top: 5px;

		content: "";
		width: 50px;
		height: 50px;
	}
	._ptn01 .tab-button.tabs01.active::before,
	._ptn01 .tab-button.tabs02.active::before {
		top: 10px;
	}

	._ptn01 .tab-button.tabs01 {
		background: #A60100;
	}
	._ptn01 .tab-button.tabs01::before {
		background: url("../img/icon_sareta.png") no-repeat 0 0 / contain;
	}
	._ptn01 .tab-button.tabs02 {
		background: #7D01D9;
	}
	._ptn01 .tab-button.tabs02::before {
		background: url("../img/icon_shita.png") no-repeat 0 0 / contain;
	}

	.tab-content.tabs01 {
		border-top: 4px solid #A60100;
		background: #FFEAEA;
	}

	.tab-content.tabs02 {
		border-top: 4px solid #7D01D9;
		background: #F0F7FF;
	}


	#all_content,
	#tab02_content {
		padding: 20px 10px;
	}
	.tab-content {
		padding: 15px;
	}
	.tab-content p {
		line-height: 1.6;
		font-size: 1em;
	}
	.tab-content .txt {
		font-size: 1em;
	}
	.tab-content .sub_ttl {
		padding: 0;
		margin: 10px 0 20px 0;

		text-align: center;
	}


	/* content_box */
	.content_box._pc {
		display: none;
	}
	.content_box {
		width: 100%;
		margin: 0;
	}
	.content_box .content {
		width: 100%;
		background: none;
		padding: 0;
	}
	.content_box .content ul {
		margin: 0 0 20px 0;
		padding: 50px 20px;
		border-radius: 6px;
	}
	.content_box .content ul:last-child {
		margin: 0;
	}
	.content_box .content li {
		font-size: 1em;
	}
	.content_arrow {
		margin: 0 0 10px 0;
		text-align: center;
	}

}

/* table
----------------------------------- */

.tbl_box table {
	width: 100%;
}

.tbl_box th {
	width: 20%;
	background: #444;
	padding: 10px 20px;

	font-size: .9em;
	color: #fff;
}

.tbl_box td {
	width: 80%;
	background: #fff;
	padding: 10px 20px;

	font-size: .9em;
}

.tbl_box._type02 th,
.tbl_box._type02 td {
	width: inherit;
	text-align: center;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1024px) {
	.tbl {
		width: 100%;
	}
	.tbl th {
		width: 35%;
	}
	.tbl td {
		width: 100%;
	}
}

/* .carousel
----------------------------------- */

.slick-prev:before,
.slick-next:before {
	color: rgba(0,0,0,0.5);
}

.slick-next {
	right: 10px;
}

.slick-prev {
	left: 10px;
	z-index: 1;
}

.slick-dots {
	bottom: 10px;
}

/* .img_box
----------------------------------- */

.img_box {
	width: 800px;
	margin: 40px auto;
	text-align: center;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1024px) {
	.img_box {
		width: 100%;
		margin: 0;
		padding: 0 20px;
	}

	.img_box img {
		max-width: 100%;
	}
}

/* underline_animation */
.link {
	position: relative;
	white-space: nowrap;
	color: var(--color-text);
}

.link::before,
.link::after {
	position: absolute;
	width: 100%;
	height: 1px;
	background: currentColor;
	top: 100%;
	left: 0;
	pointer-events: none;
}

.u_line_anim::before {
	transform-origin: 100% 50%;
	transform: scale3d(0, 1, 1);
	transition: transform 0.3s;
}

.u_line_anim:hover::before {
	transform-origin: 0% 50%;
	transform: scale3d(1, 1, 1);
}

.g_nav .u_line_anim:hover,
#bread .u_line_anim:hover {
	color: #C92F37;
}

/* color */
.red {
	color: #C92F37;
}

/* layout */
._ctr {
	text-align: center;
    display: block;
}

._left {
	text-align: left;
    display: block;
}

._right {
	text-align: right;
    display: block;
}

/* br */
.br_none {
	display: none;
}

._pc,
._pc_top {
	display: block;
}

._sp,
._sp_bottom {
	display: none;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px)  {
	.sp_br_none {
		display: block;
	}

	._sp,
	._sp_bottom {
		display: block;
	}

	._pc,
	._pc_top {
		display: none;
	}

}

@media screen and (min-width:751px) and ( max-width:1390px) {
	header .r_set {
		display: none!important;
	}
	.outer-menu {
		top: 15px;
		right: 9vw;
	}
}

@media screen and (min-width:1391px) {
	.outer-menu {
		display: none;
	}
}

/* form */
.req {
	background: #911E35;
	margin: 0 10px 0 0;
	padding: 5px;
	border-radius: 6px;

	font-size: .8em;
	color: #fff;
}
.normal {
	background: #9B9B9B;
	margin: 0 10px 0 0;
	padding: 5px;
	border-radius: 6px;

	font-size: .8em;
	color: #fff;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1024px) {
	.req {
		margin: 0 10px 0 0;
	}
}

.any {
	background: #ccc;
	margin: 0 10px 0;
	padding: 5px;
	border-radius: 6px;

	font-size: .8em;
	color: #222;
}


/* content */
.content {
	padding: 0 0 60px 0;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1024px) {
	.content {
		padding: 20px 0 30px 0;
	}
}

.error404 .wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;

	height: 100vh;

	background: #384677 url(/wp/wp-content/themes/otomo_theme/assets/images/bg_kv02.png) 0 0;
}

.error404 footer {
	position: absolute;
	bottom: 0;
}

.error-404 {
	display: flex;
	height: 100vh;
	/*	width: 100%;*/
	margin: 0 auto;
	padding: 0 20px;

	align-items: center;
	color: #fff;
}

.error-404 h1 {
	text-align: center;
	padding: 60px 0 0 0;
}

.error-404 .inner {
	padding: 100px 0;
}

.error-404 .btn {
	color: #fff;
	width: fit-content;
	margin: 0 auto;
}

/* marker */
.marker {
  background: linear-gradient(transparent 50%, rgb(255, 235, 0) 100%);
  display: inline;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1.5s;

	font-weight: 700;
}

.marker.on {
    background-size: 100% 100%;
}


@media screen and (max-width: 768px), screen and (max-width: 1024px) , screen and (max-width: 1024px) {

	.error-404 .inner {
		padding: 0;
	}

}