@charset "utf-8";
/* CSS Document */
/* 
	font-family: "acumin-pro-condensed", sans-serif;
	font-family: "Zen Kaku Gothic New", sans-serif;
-------------------------------------------------- */
@media print {
	* {
		display: none;
		opacity: 0;
		height: 0;
		visibility: hidden;
	}
}


body {
	font-family:'Zen Kaku Gothic New', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	line-height: 1;
	font-size:10px;
	color: #231815;
}


a {
	display:inline-block;
	text-decoration: none;
	transition: .3s all;
}
a:hover {
	filter: alpha(opacity=50); /* MSIE/PC */
	-moz-opacity: 0.85; /* Mozilla 1.6 and older */
	opacity: 0.85;
}

sup {
	font-size:.35em !important;
	vertical-align: top !important;
}
img { max-width:100%; width:100%; height: auto; transition: .3s all;}

.inner { 
	position: relative;
	width:min(1340px, 96%);
	margin:0 auto;
}
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
	.inner { 
		width:min(1340px, 88.83720930232558%);
	}
}
@media (max-width: 480px) {
/* SP用 */
	body {}
}


/* 
-------------------------------------------------- */
main {
	position:relative;
	z-index: 1;
}
@media (min-width: 769px) {
/* tablet+PC用 */
	.is--pc { display:block;}
	.is--sp { display: none;}
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
	.is--pc { display: none;}
	.is--sp { display:block;}
	
	main { overflow-x: hidden;}
}
@media (max-width: 480px) {
/* SP用 */
}



/* header
-------------------------------------------------- */
.header {
	position: fixed;
	width:100%;
	z-index: 114;
}
.header .inner {
	position: relative;
	display:flex;
	justify-content: space-between;
}
.header--logo {
	position:relative;
	z-index: 101;
}
@media (min-width: 769px) {
/* tablet+PC用 */
	.header .inner {
		max-width:1340px;
		margin: 0 auto;
		padding:18px 0 0 0;
	}
	.header h1 {
		width:85px;
		margin-bottom: 13px;
	}
	
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
	.header,
	.header .inner { width:100%;}
	.header h1 {
		width:15.8139534883%;
		margin:15px 6.976744186%;
	}
	
	.header .ul--nav {}
	.header .ul--nav li {
		margin: 0 0 2.3em;
		font-size:14px;
	}
	.header .ul--nav li a {
		color: #000;
	}
	.header .ul--nav li .ul--subNav {
		display: flex;
		justify-content: space-between;
		margin-top:1em;
	}
	.header .ul--nav li:nth-child(3) .ul--subNav li {
		width:23.5%;
		margin-bottom: 0;
		font-size:13px;
	}
	.header .ul--nav li:nth-child(3) .ul--subNav li span {
		display: block;
		margin-top: .6em;
		font-size:11px;
	}
	
	.header .ul--nav li.online .ul--subNav {
		display:grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.header .ul--nav li.online .ul--subNav {
		width:100%;
		margin:12px 0 20px;
		font-size:13px;
	}
	.header .ul--nav li.online .ul--subNav li {
		display: block;
		margin: 0;
	}
}
@media (max-width: 480px) {
/* SP用 */
}



/* btn--menu
-------------------------------------------------- */
.btn--menu { position: relative; z-index: 1001;}
.btn--menu:hover { cursor:pointer;}
.btn--menu span {
	display: block;
	width:40px;
	height:2px;
	background: #111;
	transition:.5s all;
}
.btn--menu { position: fixed; right:7.1%; top:33px;}
.btn--menu .bars { position: absolute; height: 20px;}

.btn--menu .bars span:nth-child(1) {
	position: absolute;
	top:50%;
	left:0;
	transform: translateY(-5px);
}
.btn--menu .bars span:nth-child(2) {
	position: absolute;
	top:50%;
	left:0;
	transform: translateY(5px);
}
.is--open .btn--menu span:nth-child(1) {
	transform: rotate(24deg) scale(1.1);
}
.is--open .btn--menu span:nth-child(2) {
	transform: rotate(-24deg) scale(1.1);
}

.btn--menu .txt small { 
	position: relative; 
	display: block; 
	height: 20px;	
}
.btn--menu .txt small::before {
	content:'MENU'; 
	font-size:18px; font-weight: 500; text-align: center;
	font-family: "acumin-pro-condensed", sans-serif;
}

@media (min-width: 769px) {
/* tablet+PC用 */
	
	.btn--menu { position: absolute; right:0; top:33px;
		display: flex; width:94px; justify-content: space-between; align-items: center;}
	.btn--menu .txt { transform: translateY(2px);}
	.btn--menu .bars { left: 54px;}
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
	.btn--menu {
		position:fixed;
		right: 7.9333%;
        top: 1.6em;
		
		width:36px;
		height:36px;
	}
	
	.menu--wrapper { padding: 24% 5.5%;}
	
	.sp--menu {
		position: absolute;
		left: 0;
		top:55px;
		width:100%;
		height:calc(100vh - 55px);
		padding:9% 5.33333%;
		background: #fffbf0;
		transition:.5s all;
		
		opacity: 0;
		visibility: hidden;		
	}
	.is--open .sp--menu {
		opacity: 1;
		visibility: visible;
	}
	.header .ul--nav > li {
		font-family: "Libre Baskerville", serif;
		font-weight: 700;
	}
}
@media (max-width: 480px) {
/* SP用 */
}

/* menu--wrapper
-------------------------------------------------- */
.menu {
	position: fixed; left: 0; top:0; right:0; bottom:0;
	z-index: 111;
	background: #fff;
	transition: .4s all;
	opacity: 0; visibility: hidden;
}
.is--open .menu { opacity: 1; visibility: visible;}

.menu--wrapper {}
.menu--wrapper .top { margin-bottom: 6em;}
.menu--wrapper h4 {
	position: relative;
	margin-bottom: 1.5em;
	padding-left: 1em;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size:min(24px, 4.3vw);; 
	font-weight: 500;
	letter-spacing: .1em;
	color: #111;
}
.menu--wrapper h4 a { color: #111;}
.menu--wrapper h4::before {
	content:'';
	position: absolute; left: 0; top:50%; transform: translateY(-40%);
	width:9px; height:9px;
	background: #FF931E; border-radius: 8px;
}

.ul--nav { padding-left: 1.2em;}
.ul--nav li {
	position: relative;
	margin-bottom: 2em;
	padding:0 0 0 1em;
	font-size:min(18px, 3.4vw);
	font-family: "acumin-pro-condensed", sans-serif;
	letter-spacing: .1em;
}
.ul--nav li a { color: #111;}
.ul--nav li::before {
	content:'';
	position: absolute; left: 0; top:50%; transform: translateY(-40%);
	width:5px; height:5px;
	background: #FF931E; border-radius: 8px;
}
/* target="_blank" が設定されている aタグだけに適用 */
.ul--nav li a[target="_blank"] {
	display: block;
	position: relative;
	transition: .3s all;
}
.ul--nav li a[target="_blank"]::after {
	content:'';
	position: absolute; right: 0; top:50%; transform: translateY(-50%);
	width:13px; height: 13px;
	background: url("../img/ar_blank.svg") right center no-repeat;
	background-size: 100% auto;
}
.ul--nav li a[target="_blank"]:hover::after {
	background: url("../img/ar_blank_h.svg") right center no-repeat;
	background-size: 100% auto;
}

.toL { width:min(260px, 88%); margin:6em auto;}
.toL a { position: relative; display: block; padding:1.2em 1.5em;
	font-size:min(18px, 4vw); color: #fff; 
	font-family: "acumin-pro-condensed", sans-serif;
	background: #FF931E; border-radius: 18px;
	letter-spacing: .1em;
}
.toL a::after { 
	content:'';
	position: absolute; right:1.5em; top:50%; transform: translateY(-50%);
	width:11px; height:11px;
	background:url("../img/wht_arrow.svg") center center no-repeat;
	background-size:100% auto;
}

@media (min-width: 769px) {
/* tablet+PC用 */
	.menu {
		padding-left:50%;
	}
	.menu::before {
		content:'';
		position: absolute; left: 0; top:0;
		width:50%; height: 100%;
		background: url("../img/bg_menu.jpg") left center no-repeat;
		background-size:cover;
	}
	
	.menu--wrapper { width:min(508px, 80%); margin:0 auto; padding:14em 0 0;}
	.menu--nav > div { width:47.5%;}
	
	.menu--nav { display: flex; justify-content: space-between;}
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
	.ul--nav { display: flex; flex-wrap: wrap; justify-content: space-between;}
	.ul--nav li { width:48.5%;}	
	.ul--nav li a[target="_blank"]::after { right:5%;}
	
	.online { margin-top: 4em;}
}
@media (max-width: 480px) {
/* SP用 */
	.toL a { padding:1.333em 1.4em;}
}


/* footer
-------------------------------------------------- */
.footer {
	position: relative;
	background: #FF931E;
	z-index: 1;
}
.footer .inner { width:min(1280px, 94%); margin: 0 auto; padding: 60px 0 30px;}
.footer .ft--ttl {
	margin-bottom:.4em;
	text-align: center; color: #fff; font-size:min(36px, 36px);
	font-family: "acumin-pro-condensed", sans-serif;
	font-weight: 500;
	letter-spacing: .1em;
}

.ul--ft {
	display: flex; justify-content: space-between; flex-wrap: wrap;
}
.ul--ft li { width:160px;}
.ul--ft li p { 
	margin-top: 36px;
	font-size:min(16px, 3.2vw); 
	font-weight: bold; 
	text-align: center; 
	white-space: nowrap; 
	color: #fff;
}
.ul--company { display: flex;}
.ul--company li { margin-right: 1.6em;}
.ul--company a { font-size:1.4em; color: #fff; text-decoration: underline;}

.ft--copy { font-size:min(14px, 3vw); color: #fff;}

@media (min-width: 769px) {
/* tablet+PC用 */
	.ul--company { margin: 8em 0 2.2em;}
	
	.ft--copy { display:flex; justify-content: space-between;}
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
	.footer .inner { width:min(1280px, 90%);}
	.footer .ft--ttl { margin-bottom: 0;}
	
	.ul--ft { padding:0 8% 10%;}
	.ul--ft li { width:130px; margin-top: 20px;}
	
	.ul--company { flex-direction: column; margin-bottom: 15%;}
	.ul--company li { margin-bottom: 1.88em; text-align: center;}
	.ul--company a { font-size:1.3em;}
	
	.ft--copy .att { margin-bottom: 1.3em; font-size:2.5vw; text-align: center;}
	.copyright { font-size:11px; text-align: center;}
}
@media (max-width: 480px) {
/* SP用 */
}


/* ----------------------------------------------- */
/* main
-------------------------------------------------- */
/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}


/* btn style
-------------------------------------------------- */
/*---- .btn01 ----*/
.btn--link a {
	display: block;
	position: relative;
	padding: .85em 1.24em 1.15em;
	font-family: "Zen Old Mincho", serif;
	color: #000;
	border:1px solid #000;
	background: #fff;
	transition:.4s all;
}
.btn--link a::after {
	content:'';
	position: absolute;
	right:20px;
	top:50%;
	transform: translate(0, -50%);
	width:32px;
	height: 4px;
	background: url("../img/common/arrows_01_off.svg") right bottom no-repeat;
	backgroudn-size:100% auto;
	transition:.4s all;
}
.btn--link a:hover {
	color: #fff;
	background: #3e3a39;
}
.btn--link a:hover::after {
	right:16px;
	background: url("../img/common/arrows_01_on.svg") right bottom no-repeat;
	backgroudn-size:100% auto;
}
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}

/*---- clearfix ----*/
.btn--proBuy ul:after {
	content: '';
	display: block;
	clear: both;
}
.btn--proBuy ul::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -17px;
    transform: translateX(-50%);
    border-bottom: 17px solid #8f80c4;
    border-left: 25px solid rgba(0,0,0,0.00);
    border-right: 25px solid rgba(0,0,0,0.00);
    transition: .4s;
}


@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}

/* .modal-video
-------------------------------------------------- */
.modal-video {
	background: rgba(0,0,0,.9);
}
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}


/* 
-------------------------------------------------- */

@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}







/* 
-------------------------------------------------- */

@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}



/* 
-------------------------------------------------- */

@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}



/* 
-------------------------------------------------- */

@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}