@charset "utf-8";

/* ============================================================
pc css setting
============================================================ */
.flowting {
	width: 100%;
	display:flex;
}
.flowting-btn {
	display: none;
}

.flowting_add {
	display: none;
}

@media screen and (max-width: 480px) {
	.flowting_add {
		width: 100%;
		display:flex;
	}
	.flowting-btn1 {
		display: block;
		position: fixed;
		bottom: 83px;
		left: 10px;
		background: #f7a42e;
		color: #FFF;
		font-weight: bold;
		letter-spacing: .1em;
		text-indent: .1em;
		border-radius: 0px;
		border: 2px solid #FFF;
		padding: 1.7em 2em;
		z-index: 9999;
		transition: .3s;
		width: calc(100% / 1.8);
	}

	.flowting-btn1 span {
		background: #FFF;
        color: #f7a42e;
        padding: 7px 5px;
        margin-right: 18px;
		border-radius: 2px;
	}

	.flowting-btn1:hover {
		opacity: .9;
	}
}
.flowting-btn2 {
	display: none;
}

.flowting-btn1 a{
	color: #FFF !important;
    cursor: pointer;
}

.flowting-btn2 a{
	color: #FFF !important;
    cursor: pointer;
}

@media screen and (max-width: 480px) {
	.flowting-btn2 {
		display: block;
		position: fixed;
		bottom: 10px;
		left: 10px;
		background: #007aff;;
		color: #FFF;
		font-weight: bold;
		letter-spacing: .1em;
		text-indent: .1em;
		border-radius: 0px;
		border: 2px solid #FFF;
		padding: 1em 2em;
		z-index: 9999;
		transition: .3s;
		width: calc(100% / 1.8);
	}

    .flowting-btn2.display-none {
        display: none;
    }

    .flowting-btn2 span {
		padding: 3px 4px;
		margin-right: 6px;
		border-radius: 2px;
	}
	.flowting-btn2 span img {
		max-width: 10% !important;
	}

	.flowting-btn2:hover {
		opacity: .9;
	}
	.flowting-font{
		font-size: 1.2ex;
		background:none;
		color: #FFF;
	}
	
}


/* ============================================================
ボタン　元 css setting
============================================================ */
@media screen and (max-width: 768px) {
	.flowting-btn {
        display: block;
        position: fixed;
        bottom: 10px;
        left: 10px;
        background: #f7a42e;
        color: #FFF;
        font-weight: bold;
        letter-spacing: .1em;
        text-indent: .1em;
        border-radius: 300px;
        border: 2px solid #FFF;
        padding: 1em 2em;
        z-index: 9999;
        transition: .3s;
	}

	.flowting-btn.display-none {
	    display: none;
	}

	.flowting-btn span {
		background: #FFF;
        color: #f7a42e;
        padding: 3px 4px;
        margin-right: 6px;
        border-radius: 2px;
	}

	.flowting-btn:hover {
		opacity: .9;
	}
}

/* ============================================================
フローティングボタン　改_20240731
============================================================ */
.flowting_add2{
	display: none;
}
.flowting-btn_yoko1 {
	display: none;
}

.flowting-btn_yoko1 a{
    cursor: pointer;
	color: #FFF;
}

@media screen and (max-width: 480px) {
	.flowting_add2 {
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		gap: 1rem;
		width: fit-content;
	}
	.flowting-btn_yoko1 {
		display: block;
        position: fixed;
        bottom: 0px;
        left: 8px;
        color: #FFF;
        font-weight: bold;
        letter-spacing: .1em;
        text-indent: .1em;
        border-radius: 10px;
        padding: 8px 5px;
        z-index: 9999;
        transition: .3s;
        width: calc(100% / 2.1);
        box-sizing: border-box;
        margin: 10px 0;
        background-color: #f7a42d;
        border: solid 2px #f7a42d;
	}

	.flowting-btn_yoko1 span {
		padding: 3px 4px;
		margin-right: 6px;
		border-radius: 2px;
	}
	.flowting-btn_yoko1 span img {
		max-width: 12% !important;
	}
}

.flowting-btn_yoko2 {
	display: none;
}

.flowting-btn_yoko2 a{
    cursor: pointer;
	color: #f7a42d;
}

@media screen and (max-width: 480px) {
	.flowting-btn_yoko2 {
		display: block;
        position: fixed;
        bottom: 0px;
        right: 8px;
        color: #FFF;
        font-weight: bold;
        letter-spacing: .1em;
        text-indent: .1em;
        border-radius: 10px;
        padding: 8px 5px;
        z-index: 9999;
        transition: .3s;
        width: calc(100% / 2.1);
        box-sizing: border-box;
        margin: 10px 0;
        background-color: #fff;
        border: solid 2px #f7a42d;
	}

	.flowting-btn_yoko2 span {
		padding: 3px 4px;
		margin-right: 6px;
		border-radius: 2px;
	}
	.flowting-btn_yoko2 span img {
		max-width: 12% !important;
	}

	.flowting-btn_yoko2:hover {
		opacity: .9;
	}
	.flowting-font{
		font-size: 1.2ex;
		background:none;
		color: #FFF;
	}
	.hidden{
		position: absolute;
		opacity: 0;
	}
	button:focus{
		outline: 0;
	}
	
}