@charset "utf-8";

/*
common.css
reset & common
*/

/* 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: #222;
	text-decoration: none;
	cursor: pointer;
	transition: 0.3s;
}

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

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

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


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

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


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

.btn_wrap {
    text-align: center;
}

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

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

    background: #D45737;
    box-shadow: 0 5px 0 #A33114;

	text-align: center;
    font-weight: bold;
	font-size: 22px;

	color: #fff;
    cursor: pointer;

	text-decoration: none;
    transition:  all .2s;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) {
	.btn {
		font-weight: 600;
		font-size: 1em;

		appearance: none;
		-webkit-appearance: none;
	}
}

.btn._return {
    background: #999;
    box-shadow: 0 5px 0 #444;
}

/* line_btn */
.btn._line {
	background: #53BD21;
    box-shadow: 0 5px 0 #267601;

	color: #fff;
}

.btn._line::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 1px 10px 0 -10px;
	background: url(/wp/wp-content/themes/otomo_theme/assets/images/icon_line.svg) no-repeat 0 0;
	background-size: contain;
	vertical-align: middle;
}

.btn._line::after {
	position: absolute;
	right: 10px;
	top: 50%;

	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: -8px 0 0 15px;
	background: url(/wp/wp-content/themes/otomo_theme/assets/images/icon_jump.svg) no-repeat 0 0;
	background-size: contain;
	vertical-align: middle;
}


/* mail_btn */
.btn._mail {
    background: #304EB6;
    box-shadow: 0 5px 0 #102E8E;

	color: #fff;
}

.btn._mail::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 3px 10px 0 -10px;
	background: url(/wp/wp-content/themes/otomo_theme/assets/images/icon_mail.svg) no-repeat 0 0;
	background-size: contain;
	vertical-align: middle;
}

.btn._mail::after {
	position: absolute;
	right: 10px;
	top: 50%;

	content: "";
	display: inline-block;
	width: 12px;
	height: 15px;
	margin: -5px 0 0 15px;
	background: url(/wp/wp-content/themes/otomo_theme/assets/images/icon_triangle.svg) no-repeat 0 5px;
	background-size: contain;
	vertical-align: middle;
}

/* other_btn */
.btn._navy,
.btn._orange {
	padding: 20px 0;
	color: #fff;
}

.btn._navy {
	background: #181F39;
	box-shadow: 0 5px 0 #384677;
}

.btn._orange {
	background: #D45737;
    box-shadow: 0 5px 0 #F28265;
}

.btn._navy::after,
.btn._orange::after {
	position: absolute;
	right: 10px;
	top: 20px;

	content: "";
	display: inline-block;
	width: 12px;
	height: 40px;
	background-size: contain;
	vertical-align: middle;
}

.btn._navy::after,
.btn._orange::after {
	background: url(/wp/wp-content/themes/otomo_theme/assets/images/icon_next_arrow.svg) no-repeat 0 10px;
}

.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);
}

._submit_btn {
    margin: 0 0 30px 60px;
}

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

	.btn._line:hover {
		transform: translateY(0);
		box-shadow: 0 5px 0 #267601;
	}

	.btn._mail:hover {
		transform: translateY(0);
		box-shadow: 0 5px 0 #102E8E;
	}

	.btn._navy::after,
	.btn._orange::after {
		width: 10px;
		height: 20px;

		background: url(/wp/wp-content/themes/otomo_theme/assets/images/icon_next_arrow.svg) no-repeat 0 3px;
		background-size: contain;
	}

}

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

.ttl {
	padding: 60px 0;

	line-height: 1.6;
	text-align: center;
	font-size: 36px;
}

.sub_ttl {
	padding: 40px 0;

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

@media screen and (max-width: 768px), screen and (max-width: 1024px) {
	.ttl {
		padding: 40px 0;
		font-size: 1.3em;
	}
	.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: 1em;
	}
}

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

.txt {
	margin: 0 0 20px 0;

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

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

@media screen and (max-width: 768px), screen and (max-width: 1024px) {
	.txt {
		margin: 0 20px;
		text-align: center;
		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;
	}
}


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

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


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

.tabs {
	width: 1000px;
	background: #fff;

	margin: 0 auto;
	padding: 0 0 60px 0;
}

#all_content,
#shita_content {
	border-top: 10px solid #181F39;
	padding: 60px 30px;
}

#all_content {
	background: #F3EBED;
}

#shita_content {
	background: #ECEEF5;
}

.tab_item {
	display: block;
	float: left;

	width: calc(100%/2);
	padding: 40px 0;

	background: #d9d9d9;
	border-radius: 15px 15px 0 0;

	vertical-align: middle;
	line-height: 50px;

	text-align: center;
	font-size: 1.6em;
	font-weight: 600;
	color: #565656;

	transition: all 0.2s ease;
}

.tab_item._sareta {
	color: #911E35;
	padding: 30px 0;
	margin: 20px 0 0 0;
}

.tabs input:checked + .tab_item._sareta {
	background: #911E35;
	color: #fff;
	padding: 40px 0;
	margin: 0;
}

.tab_item._sareta:hover {
	opacity: .8;
}

.tab_item._shita {
	color: #384677;
	padding: 30px 0;
	margin: 20px 0 0 0;
}

.tab_item._shita:hover {
	opacity: .8;
}

.tabs input:checked + .tab_item._shita {
	background: #384677;
	color: #fff;
	padding: 40px 0;
	margin: 0;
}

input[name="tab_item"] {
	display: none;
}

.tab_content {
	display: none;
	padding: 40px 40px 0;
	clear: both;
	overflow: hidden;
}

.tab_content .txt{
	font-size: 22px;
}

#all:checked ~ #all_content,
#shita:checked ~ #shita_content {
	display: block;
}

.tabs input:checked + .tab_item {
	background: #D9D9D9;
	color: #384677;
}

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

	.tabs .tab_item {
		line-height: 1.3;
		font-size: 1.2em;
		padding: 20px 0;
	}

	.tabs input:checked + .tab_item._sareta,
	.tabs input:checked + .tab_item._shita {
		padding: 25px 0;
	}

	#all_content,
	#shita_content {
		padding: 20px 10px;
	}

	.tab_item._sareta,
	.tab_item._shita {
		margin: 10px 0 0 0;
	}

	.tab_item._sareta:hover,
	.tab_item._shita:hover {
		opacity: 1;
	}

}

/* .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) {
	.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 {
	display: inherit;
}

._sp {
	display: none;
}

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

	._sp {
		display: inherit;
	}

	._pc {
		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: #f5f5f5;
	margin: 0 10px 0 0;
	padding: 5px;
	border-radius: 6px;

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

@media screen and (max-width: 768px), 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) {
	.content {
		padding: 20px 0 30px 0;
	}
}

/* twp_layout */
.two_layout {
	margin: 0 auto -50px auto;
	padding: 40px 0 0;
}
.two_layout li {
	width: 100%;
	padding: 30px;
	margin: 0 20px 40px 0;
}
.two_layout .img_box {
	margin: 40px 0;
}
.two_layout .border {
	border: 1px dotted #BEA68E;
}

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

/* three_layout */
.three_layout li {
	width: 100%;
	margin: 0 0 0 10px;
}

.three_layout li:first-child {
	margin: 0;
}

.three_layout .info_box {
	margin: 0;
}

.three_layout .ttl {
	width: fit-content;
	margin: 0 auto;
	padding: 30px 0 30px 60px;

	text-align: left;
	font-size: 100%;
}

.three_layout .ttl._one {
	background: url(../images/ttl_one.svg) no-repeat 8% 45%;
	background-size: 20px;
}

.three_layout .ttl._two {
	background: url(../images/ttl_two.svg) no-repeat 8% 46%;
	background-size: 33px;
}

.three_layout .ttl._three {
	background: url(../images/ttl_three.svg) no-repeat 6% 44%;
	background-size: 30px;
}

@media screen and (max-width: 912px) {
	.three_layout .ttl._two {
		background: url(../images/ttl_two.svg) no-repeat 12% 46%;
		background-size: 33px;
		padding: 42px 0 42px 60px;
		margin: 0 0 0 20px;
	}
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) {
	.three_layout {
		margin: 0;
		padding: 0;
	}
	.three_layout li {
		width: 100%;
	}
	.three_layout .info_box {
		margin: 0 20px;
	}
	.three_layout .ttl._one {
		padding: 40px 40px 40px 80px;
	}
	.three_layout .ttl._two {
		padding: 40px 40px 40px 80px;
	}
	.three_layout .ttl._three {
		padding: 40px 40px 40px 80px;
	}

}

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

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

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

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

	height: 100vh;
	background: #fff;
}

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

.error-404 h1 {
	margin: 0 0 60px 0;

	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 4em;
}

.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;
  color: #A30000;
}

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


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

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

}