@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Roboto:wght@400;500;700&display=swap');

body {
	font-family: 'Roboto','Noto Sans JP', sans-serif;
	color: #403b37;
}

iframe {
	border: none;
}


.display-5 {
	font-size: clamp(2.4rem, 0.978rem + 2.96vw, 3.2rem);
	font-weight: 500;
	line-height: 1.2
}
.text-body {
	color: #403b37 !important;
}

.text-shadow-w {
	text-shadow: 0 0 10px #fff;
}

.text-ofa {
	color: #7d7670 !important;
}
.text-ofa365 {
	color: #a6b0bb !important;
}
.text-lastofa {
	color: #791c39 !important;
}

.badge {
	padding: .5em 1em 0.3em;
}
.badge-white {
	color: #403b37;
	background-color: rgba(255, 255, 255, 0.8);
}

.bg-ofa {
	background-color: #e4e0dc;
}
.bg-ofa365 {
	background-color: #e3e6ef;
}

.btn-ofa {
	color: #fff;
	background-color: #557a8a;
	border-color: #557a8a;
}
.btn-ofa:hover {
	color: #fff;
	background-color: #346274;
	border-color: #346274;
}

.btn > .fa-arrow-left,
.btn > .fa-arrow-right {
	transition: all .2s ease-in-out;
	transition-property: transform;
}
.btn:hover > .fa-arrow-right {
	transform: translateX(.25rem);
}




/* ナビゲーション */
.navbar {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	background: rgba(255, 255, 255, 0.95);
}
.navbar-brand {
	color: #7d7670 !important;
	font-size: 1.25rem;
	font-weight: 400;
}
.navbar.border-bottom {
	border-color: #837a71 !important;
}
.navbar-light .navbar-nav .nav-link {
	font-size: 0.875rem;
	color: #403b37;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
	color: #791c39;
}

.dropdown-menu {
	color: #791c39;
}
.list-styled-link {
	color: #403b37;
}
.breadcrumb-item + .breadcrumb-item::before {
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	padding-right: .5rem;
	font-weight: 900;
	content: "\f105";
}



.bp-r100 #jarallax-container-0 > div {
	background-position: 100% 100% !important;
}

@media screen and (max-width: 480px) {
	.hero h1.display-3 {
		font-size: calc(42vw*100 / 320);
	}
}


.tab-content .dropdown-toggle {
	white-space: normal;
}


@media screen and (max-width: 480px) {
	.about h1.h3 {
		font-size: calc(22vw*100 / 320);
	}
}

.custom-control-img {
}
.custom-control-img .custom-control-label {
	width: auto;
	cursor: auto;
	min-width: 3rem;
	text-align: center;
	border: 1px solid #ddd;
}


.flickity-slider .caption-text {
	display: block;
	margin-top: 0.4rem;
	color: #666;
	font-size: 0.8125rem;
}

.nav-link:hover {
	color: #791c39;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	color: #791c39 !important;
}
.nav-link.active:focus,
.nav-link.active:hover {
	color: #791c39 !important;
}
.nav-link.active::before {
	border-top: 1px solid #791c39;
}

.custom-control-size .custom-control-input[disabled]~.custom-control-label {
	background-color: #ddd;
	cursor: default;
}
.custom-control-size .custom-control-input:checked~.custom-control-label {
	border-color: #fd7065;
	outline: 1px solid #fd7065;
}


.table.table-spec {
	color: #333;
	font-size: 0.875rem !important;
}
.table.table-spec th {
	background: #e3e6ef;
	font-weight: 400;
}
.table.table-spec td, .table th {
	border-top: 1px solid #9ba1b0;
}

.table.table-spec tr:last-child th,
.table.table-spec tr:last-child td {
	border-bottom: 1px solid #9ba1b0;
}
.table .nowrap {
	white-space: nowrap;
}

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

.table-spec .text-nowrap {
	white-space: normal !important;
}
}


.dropdown-toggle::after,
.dropright-toggle::after {
	font-family: "Font Awesome 5 Free";
	float: right;
	margin-left: .255em;
	border: 0;
	font-weight: 900;
	content: "\f078";
}

.mens-campaign {
	color: #fff;
	background: url("/common/img/covers/cover2.jpg") center center / cover no-repeat !important;
}
.mens-campaign h2, .mens-campaign strong {
	color: #c5003d;
	font-weight: normal;
}
.mens-campaign strong {
	font-size: 1.2rem;
}
.mens-campaign ul, .campaign-price ul {
	padding-left: 20px;
}
.mens-campaign li a {
	color: #fff;
}
.mens-campaign li a > .fa-arrow-right {
	transition: all .2s ease-in-out;
	transition-property: transform;
}
.mens-campaign li a:hover > .fa-arrow-right {
	transform: translateX(0.25rem);
}

@media screen and (max-width: 1000px) {
	.mens-campaign {
		background: url("/common/img/covers/cover2.jpg") left 30% center / cover no-repeat !important;
	}
	.mens-campaign h2 {
		font-size: 1.8rem;
	}
}
@media (min-width: 576px) {
	.mens-campaign .container {
		max-width: 100%;
	}
}
@media screen and (max-width: 575px) {
	.mens-campaign {
		padding-top: 0 !important;
		background-image: none !important;
		background: #222 !important;
	}
	.mens-campaign .img-wrap {
		height: 400px;
		background: url(/common/img/covers/cover2-sp.jpg) center center /cover;
	}
	.mens-campaign .text-wrap {
		background: #242424;
	}
	.mens-campaign h2 {
		font-size: 1.6rem;
	}
}

.campaign-price {
	padding: 1rem;
	border: 2px solid #243450;
	border-radius: 4px;
}
.campaign-price h4 {
	font-size: 1rem;
	color: #243450;
}
.campaign-price li a {
	color: #243450;
}
.campaign-price li a > .fa-arrow-right {
	transition: all .2s ease-in-out;
	transition-property: transform;
}
.campaign-price li a:hover > .fa-arrow-right {
	transform: translateX(0.25rem);
}




.measure-made {
	background: url("/common/img/covers/measure-made-bg.jpg") bottom center / cover no-repeat !important;
	padding-top: 0 !important;
}
.measure-made .text-wrap {
	padding: 0 2rem 3rem 0;
}
.measure-made .text-wrap .text-box {
	background: #fff;
	padding: 2rem;
}
.measure-made h2, .measure-made p {
	color: #6b1d30 !important;
	font-weight: normal;
}

.measure-made .btn-primary {
	background: #6b1d30;
	border: #6b1d30;
	font-size: 1.125rem;
	font-weight: 400 !important;
	height: auto;
	min-width: 400px;
}
.measure-made .btn-primary:hover,
.measure-made .btn-primary:not(:disabled):active {
	background: #b72549;
	border: #b72549;
}



@media screen and (max-width: 1000px) {
	.measure-made {
	}
	.measure-made h2 {
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 767px) {
	.measure-made .btn-primary {
		min-width: auto;
		width: 100%;
	}
}

@media (min-width: 576px) {
	.measure-made .container {
		max-width: 100%;
	}
}
@media screen and (max-width: 575px) {
	.measure-made {
	}
	.measure-made .img-wrap {
		text-align: center;
	}
	.measure-made .img-wrap img {
		width: 80%;
		text-align: center;
	}
	.measure-made .text-wrap {
		padding: 1rem 1rem 2rem;
	}
	.measure-made .text-wrap .text-box {
		padding: 1rem;
	}
	.measure-made h2 {
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 424px) {
	.measure-made .btn-primary {
		font-size: 1rem;
	}
}
@media screen and (max-width: 374px) {
	.measure-made .btn-primary {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 0.9375rem;
	}
}



.min-h-550 {
	min-height: 550px;
}
.min-h-350 {
	min-height: 350px;
}

@media (max-width: 768px) {
	.min-h-responsive {
		min-height: 350px;
	}
}
@media (min-width: 769px) {
	.min-h-responsive {
		min-height: 550px;
	}
}




.trademark {
	font-size: 0.5em;
	vertical-align: super;
	font-weight: 400;
}


.summer-sale {
	background: linear-gradient(90deg,rgba(94, 196, 228, 1) 15%, rgba(87, 199, 133, 1) 50%, rgba(249, 223, 84, 1) 85%);
	color: #fff;

	@media (max-width: 480px) {
		background: linear-gradient(90deg,rgba(94, 196, 228, 1) 5%, rgba(87, 199, 133, 1) 50%, rgba(249, 223, 84, 1) 95%);
	}

	h2 {
		font-size: clamp(3rem, 2.818rem + 0.78vw, 3.4rem);

		span {
			display: block;
			font-size: 0.7em;
			font-weight: 400;
		}
		small {
			font-size: 0.5em;
		}
	}
	h3 {
		display: inline-block;
		padding: 0.4rem 1rem 0.3rem;
		background: #f9df54;
		font-size: 1.3rem;
		font-weight: 400;
		line-height: 1;
		color: #000;
		border-radius: 4px;
	}
	img {
		@media (max-width: 575px) {
			width: 70%;
		}
	}
	li {
		.label {
			padding: 0.15rem 0.4rem 0.1rem;
			background: #009ed1;
			font-size: 0.85em;
			color: #fff;

			@media (max-width: 480px) {
				display: block;
				width: min-content;
				padding: 0.05rem 0.4rem 0rem;
			}
		}
		a {
			color: #000;
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.clearance-sale {
	background:
	linear-gradient(120deg,
	  rgba(255,236,168,1.00) 0%,
	  rgba(255,210,138,1.00) 30%,
	  rgba(255,196,122,1.00) 45%,
	  rgba(227,154,92,1.00) 70%,
	  rgba(198,120,62,1.00) 100%
	);
	color: #fff;

	@media (max-width: 480px) {
		background:
		  linear-gradient(180deg,
			rgba(255,236,168,1.00) 0%,
			rgba(255,210,138,1.00) 45%,
			rgba(255,196,122,1.00) 70%,
			rgba(198,120, 62,1.00) 100%
		  );
	}

	h2 {
		font-size: clamp(3rem, 2.818rem + 0.78vw, 3.4rem);
		color: #FDFCF9;

		span {
			display: block;
			font-size: 0.7em;
			font-weight: 400;
		}
		small {
			font-size: 0.5em;
		}
	}
	h3 {
		display: inline-block;
		padding: 0.4rem 1rem 0.3rem;
		background: #1A355B;
		font-size: 1.3rem;
		font-weight: 400;
		line-height: 1;
		color: #fff;
		border-radius: 4px;
	}
	img {
		@media (max-width: 575px) {
			width: 70%;
		}
	}
	li {
		.label {
			padding: 0.15rem 0.4rem 0.1rem;
			background: #C52828;
			font-size: 0.85em;
			color: #fff;

			@media (max-width: 480px) {
				display: block;
				width: min-content;
				padding: 0.05rem 0.4rem 0rem;
			}
		}
		a {
			color: #000;
			&:hover {
				text-decoration: underline;
			}
		}
	}
}



.form-control {
	font-size: 1rem;
	color: #212529;
	border: 1px solid #b4bcc4;
	border-radius: 0rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
	color: #212529;
	border-color: #3e558a;
	box-shadow: 0 0 0 0.4rem rgba(62, 85, 138, .25);
}
form .error-message {
	margin-top: 5px;
	margin-bottom: 10px;
	color: #fd7065;
	font-size: 0.8125rem;
}