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


/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
small,
dl,
dt,
dd,
ol,
ul,
li {
	margin: 0;
	font-size: 100%;
}

ul {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

img {
	vertical-align: top;
}

li {
	list-style-type: none;
	vertical-align: baseline;
}

input,
button,
textarea,
select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*--------------------------------------
　Base
---------------------------------------*/
html {
    font-size: 62.5%;
}

body {
	color: #000;
	font-family: "Urbanist", "Noto Sans JP", sans-serif;
	font-size: 3rem;
	line-height: 1.7;
}

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

a {
	color: #000;
}
@media (hover: hover) {
	a:hover,
	.modal-open:hover {
		opacity: 0.7;
	}
	
}

span.italic {
    font-family: DM Serif Display;
    line-height: 1.7;
    color: #191919;
    font-style: italic;
}

.txt_bold {
	font-weight: bold;
}
.px-4-5{
	padding: 0 4.5%;
}
.mg-4-5{
	margin: 0 4.5%;
}
.fs-2_1 {
	font-size: 2.1rem;
}
.fs-2_6 {
	font-size: 2.6rem;
}
.fs-3_4 {
	font-size: 3.4rem;
}
.fs-3_8 {
	font-size: 3.8rem;
}
.fs-4_1 {
	font-size: 4.1rem;
}
.fs-4_8 {
	font-size: 4.8rem;
}
.fs-5_2 {
	font-size: 5.2rem;
}
.fs-7_4 {
	font-size: 5.5rem;
}
.bg-white {
	background-color: #fff;
}
.bg-yellow {
	background-color: #FFFF00;
} 
.bg-bk {
	background-color: #000;
	color: #fff;
} 
.lr {
	writing-mode: vertical-lr;
}
span.marker {
	background: linear-gradient(transparent 50%, #ccc 50%);
}
span.bk_dot {
    position: relative;
    z-index: 0;
    padding: 0 1.3rem;
	color: #FFFF00; 
}
span.bk_dot::before{
    content: ""; 
    position: absolute;
    left: 50%;
    top: 50%; 
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px; 
    background-color: black;
    border-radius: 50%;
    z-index: -1;
}
span.wh-line {
	background: linear-gradient(to right, white, white);
	background-repeat: no-repeat;
	background-size: 100% 7px;
	background-position: 0 100%; 
}

.yellow-arrow-bottom {
	background-color: #FFFF00;
	border-bottom: 4px solid #000;
	border-image: linear-gradient(to right, #000 0%, #000 calc(100% - 9px), transparent 100%);
	border-image-slice: 1;
	position: relative;
}
.yellow-arrow-bottom::after {
	content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    transform: translateY(50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16.5px solid #000;
  }

.yellow-arrow-right {
	background-color: #FFFF00;
	border-right: 4px solid #000;
	border-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 9px), transparent 100%);
	border-image-slice: 1;
	position: relative;
}
.yellow-arrow-right::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -2px;
    transform: translateX(50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16.5px solid #000;
  }
/*--------------------------------------
　Footer
---------------------------------------*/

footer {
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.7;
}
footer .l-center {
	padding: 8.3rem 4.5% 9rem;
}
footer .-logo {
	width: 50%;
	margin-bottom: 3.7rem;
}
footer .-prohibited {
	font-size: 1.8rem;
	margin-top: 3.8rem;
}
footer .l-footer-copyright {
	background-color: #D9D9D9;
	font-size: 1.8rem;
}
footer .-copy{
	padding: 2.2rem 4.5%;
}

@media screen and (max-width: 749px) {
	body {
		font-size: 2.25rem;
	}
	.fs-2_6 {
		font-size: 1.95rem;
	}
	.fs-3_4 {
		font-size: 2.55rem;
	}
	.fs-3_8 {
		font-size: 2.85rem;
	}
	.fs-4_1 {
		font-size: 3rem;
	}
	.fs-4_8 {
		font-size: 3.6rem;
	}
	.fs-5_2 {
		font-size: 3.9rem;
	}
	.fs-7_4 {
		font-size: 5.55rem;
	}
	span.bk_dot::before {
		width: 82.5px;
		height: 82.5px; 
	}
	.yellow-arrow-bottom::after {
		border-top: 7.5px solid transparent;
		border-bottom: 7.5px solid transparent;
		border-left: 9.9px solid #000;
	}
	.yellow-arrow-right::after {
		border-left: 7.5px solid transparent;
		border-right: 7.5px solid transparent;
		border-top: 9.9px solid #000;
 }
}

@media screen and (max-width: 500px) {
	body {
		font-size: 1.5rem;
	}
	.fs-2_6 {
		font-size: 1.3rem;
	}
	.fs-3_4 {
		font-size: 1.7rem;
	}
	.fs-3_8 {
		font-size: 1.9rem;
	}
	.fs-4_1 {
		font-size: 2rem;
	}
	.fs-4_8 {
		font-size: 2.4rem;
	}
	.fs-5_2 {
		font-size: 2.6rem;
	}
	.fs-7_4 {
		font-size: 3.7rem;
	}
	span.bk_dot::before{
		width: 55px;
		height: 55px; 
	}
}