@charset "UTF-8";
/* CSS Document */

/* Fonts

font-family: source-han-sans-cjk-ja,sans-serif;
font-weight: 400;
font-style: normal;

font-family: source-han-sans-cjk-ja,sans-serif;
font-weight: 500;
font-style: normal;

font-family: source-han-sans-cjk-ja,sans-serif;
font-weight: 700;
font-style: normal;

font-family: alternate-gothic-no-3-d,sans-serif;
font-weight: 400;
font-style: normal;

*/

:root{
	/* color */
	--black:rgba(75,75,75,1);
	--gray:rgba(225,225,225,1);
	--white:rgba(255,255,255,1);
	--white-filter:rgba(255,255,255,.95);
	--red:rgba(229,23,26,1);
	--red-filter:rgba(229,23,26,.75);
	--yellow:rgba(255,216,0,1);
	--yellow-filter:rgba(255,216,0,.2);
}

* {
	color: var(--black);
	font-family: source-han-sans-cjk-ja,sans-serif;
	font-style: normal;
	font-weight: 500;
	box-sizing: border-box;
	text-decoration: none;
}

html { height: 100%; }
body {
	height: 100%;
	font-size: 13px;
	text-align: justify;
	line-height: 2;
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,div,dl,dt,dd,ul,li,img,a,p,span,iframe,small,strong,figure,address,select,input,button,textarea,i,b,hr,sub,time,em,mark {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	list-style: none;
	text-align: justify;
	outline: none;
	background: none;
	border: none;
}
select,input {
	cursor: pointer;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
button { cursor: pointer; }
p {}
mark { background-color: var(--yellow-filter); }
picture { display: block; }
br { line-height: 1; }
sub { bottom: initial; }
svg { display: block; }
small { font-size: 85%; }
img {
	display: block;
	width: 100%;
}

hr {}

main {}
section { position: relative; }
em { font-family: alternate-gothic-no-3-d,sans-serif; }

/* Indention */
.verWid { display: block !important; }
.verMid { display: none !important; }
.verNar { display: none !important; }

/* underconstruction */
.underconstruction {
	padding: 300px;
}
.underconstruction p {
	margin: auto;
	text-align: center;
}


/* Header ===================== */
header {}
header h1 {
	display: flex;
	align-items: center;
	position: absolute;
	top: 35px;
	left: 65px;
}
header h1 > * {
	display: flex;
	align-items: center;
}
header h1 i {
	width: 110px;
	margin: 0 20px 0 0;
}
header h1 em {
	margin: 2px 0 0 0;
	line-height: 1.2;
}

.clip {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 125px;
	background-color: var(--white-filter);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.clip > * {
	color: var(--red);
	line-height: 1.2;
	letter-spacing: .05rem;
}
.clip h1 {
	top: 50%;
	left: 3.5%;
	transform: translate(0,-50%);
}
.clip h1 i {
	width: 120px;
	margin: 2px 20px 0 0;
}
.clip h1 em { color: var(--red); }
.clip ul {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: 0 0 0 5%;
}
.clip ul li {
	height: 100%;
	margin: 0 6.5%;
}
.clip ul li > * {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 0 0 15px 0;
	position: relative;
}
.clip ul li > *:before {
	content: '';
	width: 4px;
	height: 4px;
	border-bottom: 1px solid var(--red);
	border-right: 1px solid var(--red);
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translate(-50%,0) rotate(45deg);
	transition: .2s ease-out;
}
.clip ul li > *:hover:before { bottom: 20px; }
.clip ul li em {
	font-size: 18px;
	letter-spacing: .05rem;
	white-space: nowrap;
}
.clip ul li i {
	margin: 2px 0 0 0;
	font-size: 10px;
	white-space: nowrap;
}

.btnForm {
	position: absolute;
	bottom: 20px;
	right: 20px;
}
.btnForm a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 180px;
	height: 180px;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	position: relative;
	z-index: 1;
}
.btnForm a:before {
	content: '';
	width: 100%;
	height: 100%;
	background-image: url(/images/common/ico-star.svg);
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	transform: scaleX(1);
	transition: .3s ease-out;
	z-index: -1;
}
.btnForm a:hover:before { transform: scaleX(-1); }
.btnForm a i {
	width: 27px;
	height: 27px;
	margin: 10px 0 5px 0;
}
.btnForm a b {
	text-align: center;
	color: var(--black);
}

.humb {
	width: 150px;
	height: 95px;
	position: fixed;
	top: 0;
	right: 0;
	overflow: hidden;
	z-index: 100;
}
.humb button{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: var(--red);
	transform: translate(150px,0);
	transition: .5s ease-out;
}
.humb.fadein button { transform: translate(0,0); }
.humb > * { color: var(--white); }
.humb i {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 30px;
}
.humb hr {
	width: 30px;
	height: 3px;
	margin: 2px 0;
	background-color: var(--white);
	position: relative;
	left: 50%;
	transform: translate(-50%,0);
	transition: .3s ease-out;
}
.humb:hover hr:nth-child(1) { transform: translate(-40%,0); }
.humb:hover hr:nth-child(2) { transform: translate(-50%,0); }
.humb:hover hr:nth-child(3) { transform: translate(-60%,0); }
.humb em { margin: 2px 0 0 0; }

.sns ul {
	display: flex;
	align-items: center;
}
.sns ul li {
	width: 27px;
	margin: 0 0 0 9px;
}
.sns ul li img { transition: .3s ease-out; }
.sns ul li:hover img { opacity: .75; }

/* Main ===================== */
main {}
main section {
	display: flex;
	flex-direction: column;
}

.inner {
	display: flex;
	width: 100%;
	max-width: 1300px;
	margin: auto;
	position: relative;
}

.block {
	width: calc(100% - 275px);
	position: relative;
}

.starright:before {
	content: '';
	width: 100%;
	height: 85%;
	background-image: url(/images/common/line-track.svg);
	background-size: 215px;
	background-position: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-40%) skewY(-17.5deg);
	opacity: .12;
	z-index: -1;
}

.ttlBasic {
	display: flex;
	flex-direction: column;
	width: 185px;
	line-height: 1.2;
}
.ttlBasic >  * { color: var(--red); }
.ttlBasic em { font-size: 62px; }
.ttlBasic i { font-size: 12px; }

.ttlTri i {
	padding: 0 0 0 18px;
	position: relative;
}
.ttlTri i:before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 4px 0 4px;
	border-color: var(--black) transparent transparent transparent;
	position: absolute;
	top: 7px;
	left: 3px;
}
.ttlImage {
	display: flex;
	align-items: center;
}
.ttlImage i {
	width: 30px;
	height: 30px;
	margin: 0 10px 0 0;
}

.ttlArea {}
.tab-list {
	display: flex;
  flex-direction: column;
  position: sticky;
  top: 37.5%;
}
.tab-list li {
	width: 110px;
	font-size: 93%;
}
.tab-list > li + li { margin: 4px 0 0 0; }
.tab-list li > * {
	display: flex;
	justify-content: center;
	background-color: var(--white);
	border: 1px solid var(--gray);
	cursor: pointer;
	transition: .3s ease-out;
}
.tab-list li > *:hover {
	background-color: var(--yellow-filter);
}
.tab-list li > *[aria-expanded='true'] {
	background-color: var(--yellow);
	border-color: var(--yellow);
}


/* Modal  */
.modalWindow {
  display: none;
  width: 100%;
  height: 100%;
  background-color: var(--white-filter);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}
.modal-overlay {
  display: flex;
  justify-content: center;
  background: var(--white-filter);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}
.modal-container {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  overflow-y: auto;
  padding: 17.5vh 10% 20vh;
}
.modal-close {
  background: transparent;
  border: 0;
}
.modalWindow button {
  width: 45px;
  height: 45px;
  position: fixed;
  top: 40px;
  left: 45px;
}
.modalWindow button hr {
  width: 100%;
  height: 2px;
  background-color: var(--black);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .3s ease-out;
}
.modalWindow button hr:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.modalWindow button hr:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.modalWindow button:hover hr { transform: translate(-50%,-50%) rotate(0deg); }

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.micromodal-slide {
  display: none;
}
.micromodal-slide.is-open {
  display: block;
}
.micromodal-slide[aria-hidden="false"] .modal-overlay {
  animation: mmfadeIn .3s cubic-bezier(.0, .0, .2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal-container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal-overlay {
  animation: mmfadeOut .3s cubic-bezier(.0, .0, .2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal-container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide .modal-container,
.micromodal-slide .modal-overlay {
  will-change: transform;
}

.info { position: relative; }
.info h3 {
	display: flex;
	align-items: center;
	margin: 0 0 25px 0;
	line-height: 1.5;
}
.info h3 em {
	margin: 0 15px 0 0;
	font-size: 30px;
}
.info h3 i { margin: 0 0 5px 0; }
.info h4 {

}
.info sub {
	margin: 0 0 0 15px;
	text-decoration: underline;
}
.info > ul + ul { margin: 25px 0 0 0; }
.info ul li { line-height: 1.7; }
.info ul > li + li { margin: 5px 0 0 0; }
.info p { margin: 30px 0 0 0; }
.info > p + p { margin: 20px 0 0 0; }
.info span {
	display: block;
	padding: 20px 0 0 0;
}

.info ul li > i + * {
  margin: 0 0 0 10px;
  padding: 0 0 0 15px;
  position: relative;
}
.info ul li > i + i:before,
.info ul li > i + b:before {
  content: '';
  height: 1px;
  background-color: var(--black);
  position: absolute;
}
.info ul li > i + i:before {
	width: 14px;
  top: 10px;
  left: -5px;
	transform: rotate(-45deg);
}
.info ul li > i + b:before {
	width: 12px;
  top: 10px;
  left: -3px;
	transform: rotate(0deg);
}
.info ul li u {
	display: block;
	margin: 0;
	padding: 0;
}
.info ul li u a {
	padding: 0 15px 0 0;
	position: relative;
}
.info ul li u a.active:after {
	content: '';
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--black);
  border-right: 1px solid var(--black);
  position: absolute;
  top: 8px;
  right: 0;
  transform: rotate(45deg);
}
.info strong {
	display: inline-flex;
	padding: 15px 0 0 0;
	color: var(--red);
}

.verGeneral {
	width: 925px;
	padding: 125px 0 75px;
	margin: auto;
}
.verGeneral h2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto;
}
.verGeneral h2 em {
	font-size: 42px;
	line-height: 1.5;
}

.list { margin: 50px 0 0; }
.list dl {
	padding: 30px 0;
	border-top: 1px solid var(--gray);
}
.list dl dt { margin: 0 0 10px 0; }
.list dl dt i {
	padding: 0 0 0 15px;
	position: relative;
}
.list dl dt i:before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 3px 0 3px;
	border-color: var(--black) transparent transparent transparent;
	position: absolute;
	top: 7px;
	left: 0;
}
.list h3 {
	display: block;
	margin: 0 0 12px 0;
}
.list ul { margin: 12px 0 0 0; }
.list p {
	display: flex;
	margin: 12px 0 0 0;
}
.list p i { width: 25px; }
.list p b { width: calc(100% - 25px); }
.list span {
	display: block;
	margin: 12px 0 0 0;
}
.list address {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

/* Footer ===================== */
footer {
	display: flex;
	align-items: center;
	margin: 100px 0 0 0;
	padding: 0 65px 110px;
	position: relative;
}
footer h2 {
	width: 120px;
	margin: 0 40px 0 0;
}
footer ul {
	display: flex;
	align-items: center;
}
footer ul li {
	font-size: 11px;
	position: relative;
}
footer ul > li + li {
	margin: 0 0 0 15px;
	padding: 0 0 0 15px;
}
footer ul > li + li:before {
	content: '';
	width: 1px;
	height: 12px;
	background-color: var(--gray);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
}
footer p {
	font-size: 14px;
	letter-spacing: .02rem;
	position: absolute;
	top: 21px;
	right: 65px;
}
footer span {
	margin: 0 5px 0 0;
	font-size: 15px;
}

/* Overlay ===================== */
.overlay {
	display: none;
	width: 100%;
	height: 100%;
	background-color: var(--white-filter);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}
.overlay .frame {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100%;
}
.overlay .entrance { width: 175px; }
.overlay .entrance .sns ul {
	justify-content: center;
	margin: 12px 0 0 0;
}
.overlay .global { padding: 0 25px 0 75px; }
.overlay .navMain li a {
	display: flex;
	align-items: center;
}
.overlay .navMain em {
	font-size: 42px;
	line-height: 1.5;
}
.overlay .navMain i {
	margin: 0 0 4px 15px;
	font-size: 12px;
}
.overlay .navSub {
	display: flex;
	flex-direction: column;
	margin: 10px 0 0 0;
}
.overlay .navSub li {
	font-size: 12px;
	position: relative;
}
.overlay .navSub > li + li { margin: 1px 0 0 0; }
.overlay .navSub li a {
	padding: 0 0 0 18px;
	position: relative;
}
.overlay .navSub li a:before {
	content: '';
	width: 5px;
	height: 5px;
	background-color: var(--black);
	position: absolute;
	top: 7px;
	left: 5px;
}
.overlay .sns { margin: 27px 0 0 0; }
.overlay .sns ul li { margin: 0 7px 0 0; }
.overlay .btnForm {
	bottom: 50px;
	right: 50px;
}
.overlay button {
	width: 45px;
	height: 45px;
	position: fixed;
	top: 40px;
	left: 45px;
}
.overlay button hr {
	width: 100%;
	height: 2px;
	background-color: var(--black);
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s ease-out;
}
.overlay button hr:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.overlay button hr:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.overlay button:hover hr { transform: translate(-50%,-50%) rotate(0deg); }


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

.clip {
	height: 110px;
	top: 0;
	bottom: initial;
}
.clip ul { display: none; }
.humb { height: 110px; }
.humb button { transform: translate(0,0); }

header h1 { left: 40px; }

.inner {
	flex-direction: column;
	max-width: initial;
	padding: 0 75px;
}
.block { width: 100%; }

.ttlBasic { width: 100%; }
.tab-list {
	flex-direction: row;
	position: relative;
	top: initial;
}
.tab-list > li + li {
	margin: 0;
}
.verGeneral {
	width: 100%;
	padding: 125px 50px;
}

footer { padding: 0 45px 110px; }
footer ul { display: none; }

.modal-container { padding: 17.5vh 5% 20vh; }
.overlay .frame { flex-direction: column; }
.overlay .entrance { width: 135px; }
.overlay .global {
	width: 225px;
	padding: 40px 0;
}
.overlay .navMain li a { justify-content: space-between; }
.overlay .navMain em {
	font-size: 40px;
	line-height: 1.4;
}
.overlay .btnForm {
	bottom: 30px;
	right: 30px;
}

}


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

.inner { padding: 0 50px; }

.btnForm a {
	width: 170px;
	height: 170px;
}

.modal-container { padding: 15vh 5%; }
.overlay .global { width: 210px; }
.overlay .navMain em { font-size: 35px; }

}


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

.verWid { display: none !important; }
.verMid { display: none !important; }
.verNar { display: block !important; }

.clip { height: 90px; }
.clip h1 i {
	width: 100px;
	margin: 2px 10px 0 0;
}
.humb {
	width: 90px;
	height: 90px;
}
.humb button {
	flex-direction: column;
}
.humb i { width: 30px; }
.humb em {
	margin: 0;
	letter-spacing: .08rem;
}

header h1 {
	top: 25px;
	left: 3.5%;
}
header h1 i {
	width: 100px;
	margin: 2px 10px 0 0;
}

.inner { padding: 0 35px; }
.verGeneral { padding: 125px 35px 50px; }

.ttlBasic em { font-size: 55px; }

footer {
	flex-direction: column;
	justify-content: center;
	padding: 0 0 75px 0;
}
footer h2 {
	width: 110px;
	margin: 0 0 25px 0;
}
footer p {
	font-size: 12px;
	letter-spacing: .02rem;
	position: relative;
	top: initial;
	right: initial;
}
footer span {
	margin: 0 3px 0 0;
	font-size: 14px;
	position: relative;
	top: 0.5px;
}

.modalWindow button {
	top: 20px;
	left: initial;
	right: 20px;
}

.overlay .frame {
	align-items: flex-start;
	padding: 0 16%;
}
.overlay .entrance {
	width: 108px;
	padding: 2lvh 0 0 0;
	position: relative;
	left: -12px;
}
.overlay .global {
	width: 100%;
	max-width: 400px;
	padding:  27px 0;
}
.overlay .navMain em { font-size: 30px; }
.overlay .navSub li a {
	padding: 0 0 0 15px;
}
.overlay .navSub li a:before {
	left: 3px;
}
.overlay .sns { margin: 20px 0 15px; }
.overlay .sns ul li {
	width: 25px;
	margin: 0 6px 0 0;
}
.overlay button {
	top: 20px;
	left: initial;
	right: 20px;
}
.overlay .btnForm {
	bottom: 18px;
	right: 15px;
}
.overlay .btnForm a {
	width: 140px;
	height: 140px;
}
.overlay .btnForm a i {
	width: 22px;
	height: 22px;
	margin: 0 0 5px 0;
}
.overlay .btnForm a b {
	font-size: 11px;
}



}