@charset "utf-8";
/* CSS Document */
/*-----------------------------------------
			　bootstrap拡張
-----------------------------------------*/
/* font-size */
.fs-7{font-size:calc(1rem - 2px)!important;}
.fs-8{font-size:calc(1rem - 4px)!important;letter-spacing: 0;}
.fs-9{font-size:calc(1rem - 6px)!important;}

/* position */
.end-5{right: 5%!important}

/* height */
.h-5{height: 5em!important;}
.h-6{height: 6em!important;}

/* margin */
.mt-6{margin-top: 5rem!important}

.mb-2h{margin-bottom: .75rem !important;}
.mb-6{margin-bottom: 5rem!important}

/* z-index */
.z-6{z-index: 6!important;}

/* cursor */
.cur-auto{cursor: auto;}
.cur-pointer{cursor: pointer;}

/* transition */
.transition-02{transition: 0.2s}
.transition-03{transition: 0.3s}
.transition-05{transition: 0.5s}

/* aspect-ratio */
.square_box{
	aspect-ratio: 1;
}
.rectangle_box{
	aspect-ratio: 16 / 9;
}

/* hvr-opacity */
.hvr-opacity01:hover{opacity: 0.1;}
.hvr-opacity02:hover{opacity: 0.2;}
.hvr-opacity03:hover{opacity: 0.3;}
.hvr-opacity04:hover{opacity: 0.4;}
.hvr-opacity05:hover{opacity: 0.5;}
.hvr-opacity06:hover{opacity: 0.6;}
.hvr-opacity07:hover{opacity: 0.7;}
.hvr-opacity08:hover{opacity: 0.8;}
.hvr-opacity09:hover{opacity: 0.9;}
.hvr-opacity1:hover{opacity: 1;}
/*-----------------------------------------
                 width
-----------------------------------------*/
.width_150{width: 150px;}
.width_300{width: 300px;}

.n_width_150{width: calc(100% - 150px);}
.n_width_300{width: calc(100% - 300px);}

.width_150,.width_300,
.n_width_150,.n_width_300{box-sizing: border-box;}

/* lg */
@media screen and (min-width: 992px){
    .width_150-lg{width: 150px;}
    .width_300-lg{width: 300px;}
    
    .n_width_150-lg{width: calc(100% - 150px);}
    .n_width_300-lg{width: calc(100% - 300px);}
    
    .width_150-lg,.width_300-lg,
    .n_width_150-lg,.n_width_300-lg{box-sizing: border-box;}
}
/* sm */
@media screen and (min-width: 576px){
    .width_150-sm{width: 150px!important;}
    .width_300-sm{width: 300px;}
    
    .n_width_150-sm{width: calc(100% - 150px);}
    .n_width_300-sm{width: calc(100% - 300px);}
    
    .width_150-sm,.width_300-sm,
    .n_width_150-sm,.n_width_300-sm{box-sizing: border-box;}
}
/*-----------------------------------------
				  全体
-----------------------------------------*/
html, body{
    height: 100%;
}

#wrap{
    min-height: 100%;
}
html{
	font-size: 14px;
}
body{
	line-height: 2;
    font-family: var(--font-jp);
	font-style: normal;
	word-wrap : break-word;
	overflow-wrap : break-word;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
	padding: 50px;
}
a{
	color: currentColor;
	text-decoration: none;
}
ol, ul {
	list-style-type: none;
}
hr {
    margin: 1.5rem 0;
    border-top: var(--bs-border-width) solid var(--color4);
    opacity: 1;
}

/* form */
::placeholder{
	color: var(--dark)!important;
	opacity: 0.2!important;
}
.form-control{
	transition: 0.2s;
	border: solid 1px transparent;
    color: var(--dark)!important;
}
.form-control:focus, .form-select:focus {
	border: solid 1px var(--gray);
    outline: 0;
    box-shadow: none
}
.edit_color input[type="color"] {
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    background: none;
    color: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
}
.radio_custom input[type="radio"] + label{
	padding-left: 30px!important;
	position: relative;
}
.radio_custom input[type="radio"] + label::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
    transition: 0.2s;
}
.radio_custom input[type="radio"] + label::before{
	border-radius: 50%;
	border: solid 1px var(--gray50);
}
.radio_custom input[type="radio"] + label::after{
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    background-color: var(--color1);
    transition: 0.2s;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    margin: auto;
    border-radius: 50%;
	opacity: 0;
}
.radio_custom input[type="radio"]:checked + label::before{
    border-color: var(--color1);
}
.radio_custom input[type="radio"]:checked + label::after{
	opacity: 1;
}

/* modal */
.modal-backdrop{
	background-color: var(--color4);
}

/* swiper */
.swiper-button-next, .swiper-button-prev{
	color: var(--color1);
	top: calc(50% - 15px)!important
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 20px !important;
    color: #fff;
    text-shadow: 0 0 10px black, 0 0 3px black;
}
.swiper-pagination{
	position: static!important;
	margin-top: 10px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0!important;
    width: 20px;
    height: 20px;
    background-color: transparent;
	position: relative;
	opacity: 1;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet::before {
	position: absolute;
	content: "";
	width: 50%;
	height: 50%;
	border-radius: 50%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: var(--color4);
}
.swiper-pagination-bullet-active::before {
	background-color: var(--color1)!important;
}

/*-----------------------------------------
			media query
-----------------------------------------*/
@media screen and (max-width: 1399px){
}

/* xl */
@media screen and (max-width: 1199px){
}
/* lg */
@media screen and (max-width: 991px){
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
		padding: 30px;
	}
}
/* md */
@media screen and (max-width: 767px){
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
		padding: 30px 20px;
	}
}
/* sm */
@media screen and (max-width: 575px){
}