@charset "UTF-8";

/***  top-msg start ***/
.top-msg
{
	background-color:#DDE7DA;
}

.top-msg h2
{
	font-size:2rem;
	font-weight: 700;
    line-height: 1.2;

}

/***  top-msg end ***/

/***  input-birth start ***/
.wrap-input-birth h2
{
	font-size:1.2rem;
}
/***  input-birth end ***/

/***  what start ***/

.what-item-content h2 , .oilinfo-contents h2 , .enjoy h2
{
	font-size:1.2rem;
}

.what-item-content h3 , .oilinfo-contents h3 , .enjoy h3
{
	font-size:1.8rem;
}

img.what_suuhi
{
	margin-right:0.8rem;
	margin-bottom:0.5rem;
}

.what-msg
{
/*	line-height:1.8rem;*/
}
/***  what end ***/


/*** singup start ***/
.singup_title
{
	background-color:var(--bs-primary);
	color:#ffffff;

	border-top-left-radius: 10px;
	border-top-right-radius: 10px;

	font-size:1.2rem;
	font-weight:600;
	padding:0.8rem;
}

.singup-item-title
{
	font-size:1rem;
}

.singup-item
{
	font-size:0.9rem;
}

.wrap_kiyaku
{

	border:1px solid #ced4da;
	border-radius: 10px;
	height:180px;
/*	border-radius: 10px 0 0 10px;*/


/*	overflow:scroll;*/
/*	white-space:nowrap;*/
/*	overflow-x: hidden;*/

}


/*** singup end ***/

/*** oilinfo Start ***/
.oilinfo-carousel .owl-stage-outer {
    margin-top: 58px;
    margin-right: -1px;
}

.oilinfo .owl-nav .owl-prev {
    position: absolute;
/*    top: -58px;*/
/*    top: calc( ( 100% / 2 ) - 20px );*/
    top: 30px;

    left: -20px;
    background: var(--bs-primary);
    color: var(--bs-white);

	width:40px;
	height:40px;

	padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    transition: 0.5s;
}

.oilinfo .owl-nav .owl-prev:hover {
    background: var(--bs-dark);
    color: var(--bs-white);
}

.oilinfo .owl-nav .owl-next {
    position: absolute;
/*    top: -58px;*/
/*    top: calc( ( 100% / 2 ) - 20px );*/
    top: 30px;

    right: -20px;
    background: var(--bs-primary);
    color: var(--bs-white);
	width:40px;
	height:40px;

	padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    transition: 0.5s;
}

.oilinfo .owl-nav .owl-next:hover {
    background: var(--bs-dark);
    color: var(--bs-white);
}
.oil-item h3
{
	font-size:0.8rem;
	font-weight:600;
	color:#787878;

	margin-bottom:0;
}
.oil-item h4
{
	font-size:1.2rem;
	font-weight:600;

	margin-bottom:0;
}

.oilinfo-msg
{

	font-size:0.9rem;

}

.wrap_oil_image
{
	height:100px;

	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    overflow: hidden;

}

.oil-item img
 {
    transition: 0.5s;
}

.oil-item:hover img {
    transform: scale(1.2);
}


/*** oilinfo End ***/


/*** enjoy Start ***/
.enjoy .enjoy-item {
    border-radius: 10px;
    transition: 0.5s;
}

.enjoy .enjoy-item:hover {
    box-shadow: 0 0 45px rgba(0, 0, 0, .1);
}

.enjoy .enjoy-item:hover .enjoy-content {
    background: var(--bs-white);
}

.enjoy .enjoy-item .enjoy-img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    overflow: hidden;
}

.enjoy .enjoy-item .enjoy-img img
 {
    transition: 0.5s;
}

.enjoy .enjoy-item:hover .enjoy-img img {
    transform: scale(1.2);
}


.enjoy .enjoy-item .enjoy-img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    background: rgba(255, 255, 255, .3);

    transition: 0.5s;

    z-index: 1;
}

.enjoy .enjoy-item:hover .enjoy-img::after
 {
    height: 100%;
}

/*.enjoy .enjoy-item .enjoy-img .enjoy-categiry {*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    border-top-left-radius: 10px;*/
/*    display: inline-flex;*/
/*    color: var(--bs-white);*/
/*    background: var(--bs-primary);*/
/*    z-index: 9;*/
/*}*/
/**/
.enjoy .enjoy-item .enjoy-content {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: var(--bs-light);
}

.enjoy .enjoy-item .enjoy-content a.btn {
    color: var(--bs-dark);
}

.enjoy .enjoy-item:hover .enjoy-content a.btn:hover {
    color: var(--bs-primary);

}

.enjoy_title
{
	font-size:1.1rem;
}

/*** enjoy End ***/

