@charset "UTF-8";

/* Scss Document */
/*=============================================
 * body
 *=============================================*/
body {
	color: #000000;
	font-family: 'Noto Sans JP';
	font-size: 16px;
	line-height: 24px;
	background: #fff;
	min-height: inherit;
	max-height: 100%;
	letter-spacing: 1.5px;
	min-width: 1366px;
}

@media only screen and (max-width: 560px) {
	body {
		font-size: 4.11vw;
		line-height: 1.8;
		min-width: 100vw;
		letter-spacing: 0.27vw;
	}
}

/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/
.fnt-mincho {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.fnt-meiryo {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fnt-gothic {
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/* noto-sans-jp-regular - japanese_latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/noto-sans-jp-v53-japanese_latin-regular.woff2') format('woff2');
}

/* noto-sans-jp-500 - japanese_latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/noto-sans-jp-v53-japanese_latin-500.woff2') format('woff2');
}

/* noto-sans-jp-600 - japanese_latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/noto-sans-jp-v53-japanese_latin-600.woff2') format('woff2');
}

/* noto-sans-jp-700 - japanese_latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/noto-sans-jp-v53-japanese_latin-700.woff2') format('woff2');
}

.fnt-noto-san {
	font-family: 'Noto Sans JP';
}

.fnt-shippori {
	font-family: 'Shippori Mincho';
}

.fnt-barlow {
	font-family: 'Barlow';
}

/*=============================================
 ******************* main **********************
 *=============================================*/
main {
	clear: both;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.wrap {

	width: 1080px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

img {
	max-width: 100%;
	width: auto;
	height: auto;
}

/*=============================================
 ******************** header ******************
 *=============================================*/
header {
	position: relative;
	width: 100%;
	z-index: 100;
}


header .logo a {
	text-decoration: none;
}

.mb10 {
	margin-bottom: 10px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb25 {
	margin-bottom: 25px;
}

.mb30 {
	margin-bottom: 30px;
}

.mb35 {
	margin-bottom: 35px;
}

.mb40 {
	margin-bottom: 40px;
}

.mb45 {
	margin-bottom: 45px;
}

.mb50 {
	margin-bottom: 50px;
}

.mb55 {
	margin-bottom: 55px;
}

.mb60 {
	margin-bottom: 60px;
}

.mb65 {
	margin-bottom: 65px;
}

.mb70 {
	margin-bottom: 70px;
}

.mb75 {
	margin-bottom: 75px;
}

.mb80 {
	margin-bottom: 80px;
}

.mb85 {
	margin-bottom: 85px;
}

.pb120 {
	padding-bottom: 120px !important;
}

.w180 {
	width: 180px;
}

.h54 a {
	line-height: 54px;
}

.pt10 {
	padding-top: 10px !important;
}

.pt40 {
	padding-top: 40px;
}

.pt50 {
	padding-top: 50px;
}

.pt60 {
	padding-top: 60px;
}

.fz22 {
	font-size: 22px;
}

/* header */
.header-box {
	padding: 0;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.19);
}

.header-box .logo {
	width: 252px;
	position: absolute;
	top: 77px;
	left: 0;
}

.nav__top {
	text-align: right;
	position: absolute;
	top: 23px;
	right: -2px;
}

.nav__top li {
	display: inline-block;
	position: relative;
	padding: 0 15px;
	font-size: 14px;
	letter-spacing: 0px;
}

.nav__top li::before {
	content: "";
	background: #004267;
	width: 1px;
	height: 15px;
	position: absolute;
	top: 58%;
	transform: translateY(-50%);
	right: -3px;
}

.nav__top li:last-child {
	padding-right: 0;
}

.nav__top li:last-child::before {
	display: none;
}

.header-nav {
	padding: 72px 0 23px;
	align-items: center;
	height: 51px;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	width: 100%;
	justify-content: end;
}

.header-nav .logo {
	width: 252px;
}

.header-nav .bnr__web {
	margin-right: 0;
	margin-left: 0;
}

.nav__menu {
	gap: 10px;
}

.nav__menu li a {
	font-size: 15px;
	font-weight: 600;
}

.nav__top li a:hover,
.nav__menu li a:hover {
	-webkit-text-decoration-line: underline;
	text-decoration-line: underline;
	text-underline-offset: 6px;
}

.favourite {
	width: 58px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	border-radius: 10px;
	overflow: hidden;
	margin: 0 20px 0 27px;
}

@media only screen and (max-width: 560px) {
	#head-key {
		height: 91.07vw;
		padding-top: 14.46vw;
	}

	.header-box {
		padding: 4.46vw 0;
		position: fixed;
		background: #fff;
		box-shadow: 0 0.54vw 1.07vw rgba(0, 0, 0, 0.19);
	}

	.header-box .logo {
		width: 42.86vw;
		position: relative;
		top: 0;
	}

	.header-nav .bnr__web {
		margin-right: auto;
		margin-left: auto;
	}

	.nav__top {
		text-align: left;
		padding-top: 3.57vw;
		padding-bottom: 17.86vw;
		position: relative;
		top: 0;
		left: 0;
	}

	.nav__top li {
		padding: 3.57vw 7.14vw 0;
		font-size: 3.21vw;
		display: block;
	}

	.nav__top li::before {
		display: none;
	}

	.nav__top li:last-child {
		padding-right: 0;
	}

	.header-nav {
		padding: 20vw 0 30vw;
		height: auto;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		visibility: hidden;
		transition: all 0.35s ease;
		overflow: auto;
		z-index: 99;
		background: #fff;
	}

	.header-nav .logo {
		width: 45vw;
	}

	.menu-open .header-nav {
		opacity: 1;
		visibility: visible;
	}

	.nav__menu {
		gap: 0;
		display: block !important;
		padding: 0 3.57vw;
	}

	.nav__menu li {
		display: block;
		position: relative;
	}

	.nav__menu li::after {
		content: "";
		height: 0.18vw;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #DDEAF1;
		box-shadow: 0 0.18vw 0.54vw rgba(0, 0, 0, 0.16);
	}

	.nav__menu li a {
		font-size: 3.57vw;
		font-weight: 500;
		color: #004267;
		padding: 3.57vw;
		display: block;
	}

	.favourite {
		display: none;
	}

	.bnr__web {
		width: 47.14vw !important;
	}

	.header-nav .bnr__shared.bnr__web a {
		font-size: 3.21vw;
	}


}

.heading__title__icon {
	font-size: 23px;
	font-weight: 600;
	margin-bottom: 48px;
	padding-left: 41px;
}

.heading__title__icon span {
	position: relative;
	padding-left: 40px;
}

.heading__title__icon span::after {
	content: "";
	background: #707070;
	left: 106%;
	width: 330%;
	position: absolute;
	top: 50%;
	margin-top: -3px;
	height: 1px;
}

.heading__title__icon span::before {
	content: "";
	background: url(../img/shared/icon_square.webp) no-repeat;
	background-size: 100% auto;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: -15px;
	transform: translateY(-50%);
}

.heading__title__icon small {
	color: #4399C9;
	font-size: 28px;
	letter-spacing: 0px;
}

.title__heading_h3 {
	font-size: 24px;
	position: relative;
	font-weight: 600;
	padding-left: 16px;
	letter-spacing: 1px;
}

.title__heading_h3::before {
	content: "";
	background: #4399C9;
	width: 4px;
	height: 27px;
	border-radius: 5px;
	position: absolute;
	top: 48%;
	left: 0;
	transform: translateY(-50%);
}

@media only screen and (max-width: 560px) {
	.title__heading_h3 {
		font-size: 5.54vw;
	}
	
	.title__heading_h3::before {
		height: 5.36vw;
		top: 55%;
	}
	.heading__title__icon {
		padding-left: 3.57vw;
		font-size: 5.71vw;
		line-height: 1.6;
	}

	.heading__title__icon span {
		display: inline-block;
	}

	.heading__title__icon small {
		display: block;
		padding-top: 0vw;
		font-size: 5.71vw;
	}
}

/* END header */
.icon {
	position: relative;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	width: 100%;
}

.icon::before {
	content: "";
	display: inline-block;
	margin-right: 10px;
}

.icon__lugs::before {
	background: url(../img/shared/icon_bag.webp) no-repeat;
	background-size: 100% auto;
	width: 28px;
	height: 25px;
}

.icon__books::before {
	background: url(../img/shared/icon_book.webp) no-repeat;
	background-size: 100% auto;
	width: 33px;
	height: 25px;
}

.icon__locations::before {
	background: url(../img/shared/icon_location.webp) no-repeat;
	background-size: 100% auto;
	width: 20px;
	height: 30px;
}

.icon__notebooks::before {
	background: url(../img/shared/icon_note.webp) no-repeat;
	background-size: 100% auto;
	width: 26px;
	height: 35px;
}

.icon__searchs::before {
	background: url(../img/shared/icon_search.webp) no-repeat;
	background-size: 100% auto;
	width: 30px;
	height: 30px;
}

/*=============================================
 ******************* nav-fixed ****************
 *=============================================*/

.js-scroll {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
}

.js-scroll-left {
	align-items: center;
	margin-left: 50px;
}

/*=============================================
 ******************* keyvisual ****************
 *=============================================*/


/*=============================================
===============================================
===============================================
*************** responsive header ************
===============================================
===============================================
*=============================================*/
/*@media screen and (max-width: $width-wrap - 1px) and (min-width: $width-sp) {	*/
@media only screen and (max-width: 560px) {
	main {
		min-width: 100vw;
	}

	.hamberger-btn {
		position: fixed;

		right: 4%;
		width: 8.93vw;
		height: 8.93vw;
		display: block;
		z-index: 201;
		transition: all 0.4s ease;
		overflow: hidden;
	}

	.hamberger-btn::after {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		content: "";
		text-align: center;
		font-size: 1.79vw;
		line-height: 3.57vw;
	}

	.hamberger-btn span {
		width: 8.57vw;
		height: 0.54vw;
		position: absolute;
		top: 35%;
		transform: translate3D(-50%, -50%, 0);
		left: 50%;
		background: #004267;
	}

	.hamberger-btn span::before,
	.hamberger-btn span::after {
		width: 8.57vw;
		height: 0.54vw;
		position: absolute;
		left: 0;
		background: #004267;
		content: "";
	}

	.hamberger-btn span::after {
		top: -1.79vw;
	}

	.hamberger-btn span::before {
		top: 1.79vw;
	}

	.nav-header .sub-nav::before {
		display: none;
	}

	.menu-open .hamberger-btn span {
		transform: rotate(360deg);
	}

	.menu-open .hamberger-btn span {
		transform: rotate(142deg) translateX(3.57vw);
		top: 0.89vw;
		left: 46%;
	}

	.menu-open .hamberger-btn span::after {
		transform: rotate(-105deg) translateX(0vw);
		top: 0;
	}

	.menu-open .hamberger-btn::after {
		content: "";
	}

	.menu-open .hamberger-btn span::before {
		opacity: 0;
	}

	.nav-header {
		width: 100%;
		height: 100vh;
		background: #FFF;
		position: fixed;
		top: 0;
		left: 0;
		transition: all 0.5s ease;
		opacity: 0;
		visibility: hidden;
	}

	.menu-open .nav-header {
		left: 0%;
		visibility: visible;
		overflow: auto;
		transition: all 0.5s ease;
		opacity: 1;
	}

	.js-scroll {
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
		padding-bottom: 8.93vw;
	}

	.hide-nav {
		width: 8.93vw;
		display: flex;
		justify-content: center;
		margin: 2.68vw auto;
		height: 8.93vw;
	}
}

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

	.hamberger-btn {
		top: 5.18vw;
	}

}

/*=============================================
 ******************* footer *******************
 *=============================================*/
/* FOOTER */
footer {
	background: #F8FCFF;
	padding: 69px 0 40px;
}

footer address {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0;
	padding: 0;
}

.footer__row {
	padding: 0 50px 109px 88px;
}

.logo__footer {
	width: 400px;
}

.footer__nav {
	width: 412px;
}

.footer__nav a:hover {
	-webkit-text-decoration-line: underline;
	text-decoration-line: underline;
	text-underline-offset: 6px;
}

.footer__nav ul {
	width: 46%;
}

.footer__nav ul li {
	font-size: 15px;
	letter-spacing: 0;
}

.footer__nav ul li+li {
	margin-top: 12px;
}

.footer__nav ul+ul {
	width: 53%;
}

@media only screen and (max-width: 560px) {
	footer {
		padding: 12.5vw 0 10vw;
	}

	footer address {
		font-size: 2.68vw;
	}

	.footer__row {
		padding: 0 3.57vw 8.93vw 3.57vw;
		display: block !important;
	}

	.logo__footer {
		width: 41.25vw;
		margin: 0 auto 8.93vw;
	}

	.footer__nav {
		width: auto;
	}

	.footer__nav ul {
		width: 100%;
	}

	.footer__nav ul li {
		font-size: 3.75vw;
	}

	.footer__nav ul li+li {
		margin-top: 3.57vw;
	}

	.footer__nav ul+ul {
		width: 100%;
		padding-top: 3.57vw;
	}
}

/* END FOOTER */
.bnr__shared {
	margin-left: auto;
	margin-right: auto;
	max-width: 300px;
	display: block;
}

.bnr__shared a {
	display: block;
	color: #fff;
	line-height: 65px;
	font-weight: 500;
	border-radius: 3px;
	text-align: center;
	border: 2px solid #fff;
	transition: all .4s ease;
	font-size: 18px;
	overflow: hidden;
	letter-spacing: 0;
}

.bnr__shared--orange a {
	background: #FF9900;
	border: 2px solid #FF9900;
}

.bnr__shared--orange a:hover {
	border-color: #FF9900;
	background: #fff;
	color: #FF9900;
}

.bnr__shared--blue {
	width: 264px;
	background: #0F1339;
	border: 2px solid #0F1339;
	color: #fff;
	font-weight: 600;
	height: 54px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .4s ease;
}

.bnr__shared--blue:hover {
	border: 2px solid #0F1339;
	background: #fff;
	color: #0F1339;
}


.bnr__shared--darkblue a {
	background: #0F1339;
	border: 2px solid #0F1339;
}

.bnr__shared--darkblue a:hover {
	border-color: #0F1339;
	background: #fff;
	color: #0F1339;
}
.bnr__orange__link a {
	background: #FF5700;
	border: 2px solid #FF5700;
	color: #fff;
	font-weight: 600;
	text-align: center;
	border-radius: 5px;
	transition: all .4s ease;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 30px;
}
.bnr__orange__link a:hover {
	color: #FF5700;
	background: #fff;
}
.darkblueW172 {
	max-width: 172px;
}

.darkblueW172 a {
	line-height: 54px;
}

.bnr__darkorange {
	width: 252px;
	background: #FF5700;
	border: 2px solid #FF5700;
	color: #fff;
	font-weight: 600;
	height: 54px;
	line-height: 54px;
	text-align: center;
	border-radius: 5px;
	transition: all .4s ease;
	margin-left: auto;
	margin-right: auto;
}


.bnr__web {
	width: 160px;
}

.bnr__web a {
	line-height: 51px;
	font-size: 15px;
	background: #FF5700;
	border: 2px solid #FF5700;
}

.bnr__web a:hover {
	border-color: #FF5700;
	background: #fff;
	color: #FF5700;
}

.w272 {
	width: 272px;
}

.bnr__shared--white a {
	background: #fff;
	color: #004267;
	border: 2px solid #004267;
}

.bnr__shared--white a:hover {
	border-color: #004267;
	background: #004267;
	color: #fff;
}

@media only screen and (max-width: 560px) {
	.darkblueW172 a {
		line-height: 12.5vw;
	}

	.bnr__shared a {
		font-size: 4.46vw;
	}
}

.title__heading__sub {
	position: relative;
}

.title__heading__sub h2 {
	color: #012D46;
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 40px;
	position: relative;
	letter-spacing: 0;
}

.title__heading__sub h2::before {
	content: "";
	background: #003366;
	background: linear-gradient(90deg, #003366 0%, #003366 30%, #00e0f8 100%);
	position: absolute;
	bottom: -23px;
	left: 0;
	right: 0;
	width: 200%;
	transform: translateX(-50%);
	height: 4px;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16);
}

.title__heading__sub p {
	color: #C0C2C2;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
}

@media only screen and (max-width: 560px) {
	.title__heading__sub h2 {
		font-size: 6.61vw;
		margin-bottom: 9.82vw;
	}

	.title__heading__sub h2::before {
		bottom: -5.89vw;
		left: -8%;
		width: 105%;
		transform: translateX(0);
	}

	.title__heading__sub p {
		font-size: 4.46vw;
	}
}

.title__heading__slash {
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 66px;
}

.title__heading__slash span {
	position: relative;
	display: inline-block;
}

.title__heading__slash span::after,
.title__heading__slash span::before {
	content: "";
	background: #707070;
	width: 1px;
	height: 35px;
	position: absolute;
	top: 50%;
	left: -37px;
	transform: translateY(-50%) rotate(-45deg);
}

.title__heading__slash span::after {
	left: auto;
	transform: translateY(-50%) rotate(45deg);
	right: -37px;
}

@media only screen and (max-width: 560px) {
	.title__heading__slash {
		font-size: 5.54vw;
		margin-bottom: 7.14vw;
	}

	.title__heading__slash span::after,
	.title__heading__slash span::before {
		height: 6.25vw;
	}
}

.txt__center__sp,
.txt__center {
	text-align: center;
}

.box__shadow {
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.19);
}

.ob-img {
	background-size: cover;
	background-position: center center;
	position: relative;
	display: block;
}

.ob-img img {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100% !important;
	height: 100% !important;
}

@media screen and (min-width: 768px) {
	.ob-img img {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
	}
}

.d__flex {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
}

.d__flex-jus {
	justify-content: space-between;
}

.d__flex-center {
	align-items: center;
}

.slick-dots {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	width: 100%;
	padding-top: 15px;
	align-items: center;
}

.slick-dots li {
	width: 12px;
	height: 12px;
	margin: 0 8px;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}

.slick-dots li button {
	width: 100%;
	height: 100%;
	line-height: 0;
	font-size: 0;
	border: 1px solid #B4B4B4;
	border-radius: 50%;
	cursor: pointer;
	background: #B4B4B4;
}

.slick-dots li.slick-active {
	width: 15px;
	height: 15px;
}

.slick-dots li.slick-active button {
	background: #004267;
	border: 1px solid #004267;
}

button.slick-arrow {
	background: url(../img/shared/icon_prev.webp) no-repeat center;
	background-size: cover;
	width: 44px;
	height: 44px;
	position: absolute;
	top: 30%;
	left: 0;
	font-size: 0;
	border: none;
	cursor: pointer;
	transition: all .4s ease;
	z-index: 10;
}

button.slick-arrow:hover {
	opacity: .6;
}

button.slick-arrow.slick-prev {
	right: calc(50% + 525px);
	left: auto;
}

button.slick-arrow.slick-next {
	right: auto;
	left: calc(50% + 525px);
	transform: rotate(180deg);
}

@media only screen and (max-width: 560px) {
	.slick-dots li.slick-active {
		width: 2.68vw;
		height: 2.68vw;
	}

	button.slick-arrow {
		width: 7.86vw;
		height: 7.86vw;
		top: 30%;
		left: 0;
	}

	button.slick-arrow.slick-prev {
		right: auto;
		left: 5.36vw;
	}

	button.slick-arrow.slick-next {
		right: 5.36vw;
		left: auto;
	}
}

@media only screen and (min-width: 561px) and (max-width: 1499px) {
	button.slick-arrow.slick-prev {
		right: auto;
		left: 30px;
	}

	button.slick-arrow.slick-next {
		left: auto;
		right: 30px;
	}

}

.zindex {
	z-index: 203;
}

.cl-grey {
	color: #ccc;
}

/*POPUP*/
.remodal {
	max-width: 820px;
	height: 583px;
	padding: 40px 0;
}

.remodal-close {
	width: 20px;
	height: 20px;
	background: url(../img/shared/close.webp) no-repeat;
	background-size: 100% auto;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	right: 0;
	margin-left: auto;
	margin-bottom: -20px;
	margin-right: 35px;
}

.remodal-close::before {
	display: none;
}

.remodal__title__select {
	font-size: 18px;
	margin-bottom: 20px;
	text-align: left;
	padding-left: 4%;
}

.remodal__wrap .tabs-switch {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	margin-bottom: 20px;
}

.remodal__wrap .tab-link {
	width: 40%;
	height: 362px;
	overflow-y: scroll;
}

.remodal__wrap .tab-link li {
	font-size: 16px;
	position: relative;
	line-height: 45px;
	width: 80%;
	padding: 0 10%;
	text-align: left;
}

.remodal__wrap .tab-link li::after {
	content: "";
	background: url(../img/shared/icon_arrow02.webp) no-repeat;
	width: 6px;
	height: 10px;
	background-size: 100% auto;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

.remodal__wrap .tab-link li.active {
	background: #E1E7EB;
}

.remodal__wrap .tab-content {
	width: 60%;
}

.remodal__list__pp {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	overflow-y: scroll;
	height: 342px;
	padding: 20px 13% 0 8%;
	align-content: flex-start;
}

.remodal__i-custom {
	cursor: pointer;
	display: block;
	margin: 0 0 26px;
	position: relative;
	width: 100%;
	text-align: left;
}

.remodal__i-custom input[type="checkbox"] {
	display: inline-block;
	width: auto;
	padding: 5px 10px;
	color: #303030;
	font: inherit;
	line-height: 1.25;
	background: #FEFEFE;
	border-radius: 3px;
	border: 1px solid #c9c9c9;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	opacity: 0;
	position: absolute;
}

.remodal__i-custom span {
	padding-left: 40px;
	position: relative;
}

.remodal__i-custom span::before,
.remodal__i-custom span::after {
	content: "";
	margin: auto;
	border-radius: 2px;
	position: absolute;
	top: 0;
	bottom: 0;
	transition: all .3s ease;
}

.remodal__i-custom span::before {
	background: #FEFEFE;
	width: 25px;
	height: 25px;
	border: 1px solid #ACACAC;
	left: 0;
	border-radius: 3px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
}

.remodal__i-custom span::after {
	opacity: 0;
	background: url(../img/shared/icon_check.webp) no-repeat;
	background-size: 100% auto;
	width: 23px;
	height: 23px;
	left: 2px;
	transform: scale(0);
}

.remodal__i-custom input:checked~span:after {
	opacity: 1;
	transform: scale(1);
}

.remodal__bnr__text {
	color: #707070;
	/*	font-size: 16px;*/
	background: none;
	border: none;
	cursor: pointer;
	display: block;
	text-align: center;
	width: 50%;
	padding-top: 16px;
	text-decoration: underline;
	transition: all .4s ease;
	margin: 0 auto;
}

.remodal__bnr__text:hover {
	text-decoration: none;
}

/*=============================================
***************** copyright ******************
*=============================================*/
#pagetop {
	cursor: pointer;
	transition: all 0.3s ease;
	position: fixed;
	bottom: 0;
	right: 0;
}

#pagetop:hover {
	opacity: 0.9;
}

#socialbuttons {
	max-width: 350px;
}

address {
	padding: 25px 0 10px;
}

address span {
	display: block;
}

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

	#fixed-sp {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 8.93vw;
		background: #3b2718;
		z-index: 99;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.fixed-btn #fixed-sp {
		opacity: 1;
	}


}


/*=============================================
===============================================
===============================================
*************** css for iphone 5 ************
===============================================
===============================================
*=============================================*/
/*=============================================
===============================================
===============================================
***************** css for ie 11 ***************
===============================================
===============================================
*=============================================*/

/* Scss Document */
/*=============================================
 ******************* RESPONSIVE ****************
 *=============================================*/
.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

@media only screen and (max-width: 560px) {
	html {
		min-width: 100vw;
	}

	html a:hover {
		text-decoration: none;
	}

	html img {
		max-width: 100%;
		width: 100%;
		height: auto;
	}

	html .wrap {
		padding: 0 5%;
		width: auto;
		max-width: 100%;
	}

	.sp {
		display: block !important;
	}

	.pc {
		display: none !important;
	}
}

@media only screen and (max-width: 560px) {
	html #socialbuttons .social-line {
		width: 16.43vw;
		overflow: hidden;
	}
}

@media only screen and (max-width: 320px) {
	html.responsive {
		min-width: 320px !important;
	}
}

/*=============================================
 *************** responsive common ************
 *=============================================*/
@media only screen and (min-width: 560px) {
	body {
		position: static !important;
		top: 0 !important;
	}
}

.ob img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}


.fadein-bottom {
	transition: all 1s;
	transform: translate(0, 50px);
	opacity: 0
}

.fadein-bottom.scroll-fade {
	transform: translate(0, 0);
	opacity: 1
}

body.search--opened,
body.menu-open {
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch;
}

body.search--opened,
body.search--opened *,
body.search--opened *:hover,
body.search--opened *:focus,
body.search--opened *:active,
body.menu-open,
body.menu-open *,
body.menu-open *:hover,
body.menu-open *:focus,
body.menu-open *:active {
	pointer-events: none !important;
	touch-action: none !important;
}

body.search--opened .search-jobs__form__sp,
body.search--opened .search-jobs__form__sp *,
body.menu-open .hamberger-btn,
body.menu-open .header-nav,
body.menu-open .header-nav * {
	pointer-events: visible !important;
	touch-action: auto !important;
}



@media only screen and (max-width: 560px) {
	.darkblueW172 {
		max-width: 44.64vw;
	}

	.icon__lugs::before {
		width: 5.71vw;
		height: 5.36vw;
	}

	.icon__books::before {
		width: 6.43vw;
		height: 5.18vw;
	}

	.icon__locations::before {
		width: 4.29vw;
		height: 6.25vw;
	}

	.icon__searchs::before {
		width: 6.25vw;
		height: 6.43vw;
	}

	.bnr__shared--blue {
		width: 55.36vw;
		height: 12.5vw;
	}
	.over__scroll {
		overflow-x: auto;
		width: 100%;
		white-space: nowrap;
	}
	.over__scroll.w105 {
		width: 105%;
	}
	.over__scroll.w110 {
		width: 110%;
	}
	.over__scroll .tag__inline {
		display: inline-block;
		margin-bottom: 1.79vw!important;
	}

	.over__scroll .tag__inline .tag-item {
		margin-right: 1.79vw;
	}
	.tag__inline p {
		display: inline-block;
	}
	
	
	
}


.pConfirm .header-nav {
	opacity: 0;
	visibility: hidden;
}
.pConfirm .header-box .logo {
	pointer-events: none !important;
	touch-action: none !important;
}
.pConfirm .footer__row {
	padding: 0 50px 80px;
}
.pConfirm .logo__footer {
	margin: 0 auto;
}
.pConfirm .footer__nav {
	display: none;
}
.pConfirm .hamberger-btn {
	display: none;
}


.i-custom {
	cursor: pointer;
	display: inline-block;
	margin: 0 10px;
	position: relative;
}

.i-custom+.i-custom {}

.i-custom input {
	opacity: 0;
	position: absolute;
}

.i-custom span {
	padding-left: 38px;
	position: relative;
	letter-spacing: 1px;
}

.i-custom span:before,
.i-custom span:after {
	content: "";
	margin: auto;
	border-radius: 2px;
	position: absolute;
	top: 0;
	bottom: 0;
	transition: all .3s ease;
}

.i-custom input[type="radio"]~span:before,
.i-custom input[type="radio"]~span:after {
	border-radius: 100%;
}

.i-custom span:before {
	background: #FEFEFE;
	width: 22px;
	height: 22px;
	border: 1px solid #ccc;
	left: 0;
}

.i-custom span:after {
	opacity: 0;
	background: #607D8B;
	width: 12px;
	height: 12px;
	left: 6px;
	transform: scale(0);
}

.i-custom:hover span:after {
	opacity: .5;
	transform: scale(1);
}

.i-custom input:checked~span:after {
	opacity: 1;
	transform: scale(1);
}


.icon__heart .i-custom span:after, 
.icon_check .i-custom span:after, 
#privacy_checkbox .i-custom span:after {
    opacity: 0;
    width: 24px;
    height: 24px;
    left: 0;
    transform: scale(0);
    background: url(../img/shared/icon_check.webp) no-repeat center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    top: 0px;
}
.icon__heart .i-custom span:before {
	background: url(../img/shared/icon_heart_small.webp) no-repeat;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	border: none;
	width: 25px;
	height: 22px;
	
}

.icon__heart .i-custom input:checked~span:before {
	opacity: 0;
	visibility: hidden;
}
.icon__heart .i-custom span:after {
	left: 50%;
	margin-left: -12px;
	background: url(../img/shared/icon_heart_small_on.webp) no-repeat;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	width: 25px;
	height: 22px;
}

.icon__heart .i-custom:hover span:after, 
.icon_check .i-custom:hover span:after, 
#privacy_checkbox .i-custom:hover span:after {
    opacity: 0;
    transform: scale(1);
}
.icon__heart .i-custom input:checked~span:after, 
.icon_check .i-custom input:checked~span:after, 
#privacy_checkbox .i-custom input:checked~span:after {
    opacity: 1;
    transform: scale(1);
}


.icon__heart .i-custom {
	margin: 0;
	padding-top: 30px;
}
.icon__heart .i-custom span {
	padding-left: 0;
	padding-top: 50px;
}

.icon__heart .i-custom span:before {
	left: 50%;
	margin-left: -12px;
}