@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*設定する場合→ font-family:'Noto sans japanese', sans-serif; を追加*/
/*同時に他のWEBフォントを使う場合はhtml側に記載すること*/

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: inherit;
}

body {
	font-size: 14px;
	background: #FFFFFF;
	font-family: Meiryo, Tahoma, Verdana, Arial, sans-serif;
}

#wrapper {
	min-width: 320px;
	max-width: 600px;
	margin: 0 auto;
}

img {
	vertical-align: bottom;
	width: 100%;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=submit],
input[type=button] {
	-webkit-appearance: none;
	border: 1px solid #999999;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}


.for-pc {
	display: none !important;
}

.sp-br {
	display: block;
}

.content {
	width: 100%;
	min-width: 320px;
	max-width: 600px;
	padding: 0px 4px;
	margin: 0 auto;
	overflow: hidden;
}

/*共通
----------------------------------------------------------------------------------------------------*/

/* ヘルパー */
.hl_mb-4 {
	margin-bottom: 4rem;
}

.hl_my-2 {
	margin: 2rem auto 2rem;
}

.hl_py-4 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.hl_pt-4 {
	padding-top: 4rem;
}

.hl_py-10 {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.hl_pb-2 {
	padding-bottom: 2rem;
}

.hl_pb-20 {
	padding-bottom: 12rem;
}

.hl_pt-0 {
	padding-top: 0rem;
}

/* 
.hl_pb-0 {
    padding-bottom: 0rem;
} */


/* 背景 */
.bg-normal {
	background: #fcedcb;
}


.bg-red {
	background: url('./../img/item/bg_red.png') repeat;
	position: relative;
}

.bg-red_after::after {
	content: "";
	width: 100%;
	height: 33vw;
	display: block;
	background: url(./../img/item/bg_red_bottom.png) repeat-x;
	position: absolute;
	bottom: -18vw;
}

.bg-red_before::before {
	content: "";
	width: 100%;
	height: 22vw;
	display: block;
	background: url(./../img/item/bg_red_top.png) repeat-x;
	position: absolute;
	top: -7vw;
}

.bg-yellow {
	background: url('./../img/item/bg_yellow.png') repeat;
	position: relative;
}

.bg-yellow_after::after {
	content: "";
	width: 100%;
	height: 33vw;
	display: block;
	background: url(./../img/item/bg_yellow_bottom.png) repeat-x;
	position: absolute;
	bottom: -18vw;
}

.bg-yellow_before::before {
	content: "";
	width: 100%;
	height: 22vw;
	display: block;
	background: url(./../img/item/bg_yellow_top.png) repeat-x;
	position: absolute;
	top: -7vw;
}

.button-box {
	text-align: center;
}

.image-button {
	display: block;
	margin-bottom: 1rem;
}

.button-box_flex {
	display: flex;
	gap: 1rem;
	width: 90%;
	margin: auto;
}

.button-box_flex>* {
	flex: 0 1 50%;
}

.button-box_flex>*>img {
	width: 100%;
}

.image-button_spacial-rate {
	display: block;
	margin: 2rem 1rem 0;
}

.rate-box {
	display: flex;
}

.rate-box__item {}

.rate-box__num {
	display: block;
	width: auto;
	height: 16vw;
}

.rate-box__decimal {
	display: block;
	width: auto;
	height: 8vw;
}

.banner-box {
	display: block;
	margin: 1rem 0;
}

.banner-box img {
	width: 100%;
}

/*ヘッダー
----------------------------------------------------------------------------------------------------*/
#right-menu {
	position: fixed;
	right: 12px;
	top: 12px;
	z-index: 9999;
}

#right-menu img {
	width: 50px;
	height: 100px;
	object-fit: contain;
}

.main-navigation {
	display: none;
	opacity: 0;
	transition: all 0.7s;
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 9998;
	background: #2f2a1e70;
}

.main-navigation__inner {
	position: relative;
	width: 96%;
	padding-top: 3%;
	max-width: 580px;
	height: 96vh;
	margin: auto;
}


.navigation {
	padding: 1rem 0.4rem;
}

.main-navigation__front {
	border-radius: 12px;
	background: url(./../img/item/bg_cream.png);
	border-bottom: 20px solid #fee1ad;
}



.navigation__ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.navigation__item {
	color: #2d1d1c;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 600;
}

.navigation__link {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	padding: 0.5rem;
}


.navigation__img {
	width: 100%;
}


/*メインコンテンツ
----------------------------------------------------------------------------------------------------*/
#main {}

.hero {
	background: url('./../img/item/head_bg_sp.png')no-repeat center;
	background-size: cover;
	min-height: 100dvh;
	position: relative;
	padding: 0 0 1rem;
}

.head-rate {
	display: flex;
	align-items: center;
	position: relative;
	margin: -2rem auto 0;
}

.head-rate__item-block {
	position: absolute;
	top: 57%;
	left: 46vw;
	transform: translateY(-50%);
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18vw;
}

.head-rate__rate-bg {
	width: 84vw;
	margin: auto;
}

.head-rate__img {
	width: 100%;
}

.head-rate__number:nth-child(2) {
	transform: translateY(-0.3rem);
}

.head-rate__number:last-child {
	transform: translateY(-0.5rem);
}

.head-rate__item {
	justify-content: center;
	width: 44vw;
}

.head-rate__number {
	display: block;
	width: auto;
	height: 16vw;
}

.head-rate__decimal {
	display: block;
	width: auto;
	height: 8vw;
}

.head-rate__title {
	margin: 1rem auto 0;
	width: 80%;
}

.head-title__logo {
	width: 100%;
}




.ribbon {
	background: #fbc02a;
	position: absolute;
	z-index: 9;
	left: 0;
	right: 0;
	margin: auto;
	overflow: unset;
	bottom: -1rem;
	margin: 0 4px;
	width: auto;
}

.ribbon::before {
	content: "";
	display: block;
	width: 137px;
	height: 39px;
	background: url(./../img/item/ribbon_before.png) no-repeat;
	position: absolute;
	right: 0;
	top: -39px;
	z-index: 99;
}

.ribbon::after {
	content: "";
	display: block;
	width: 137px;
	height: 39px;
	background: url(./../img/item/ribbon_after.png) no-repeat;
	position: absolute;
	left: 0;
	bottom: -39px;
	z-index: 99;
}

.site-message {
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 900;
	color: #2d1d1c;
	letter-spacing: 0.6px;
}



/*  */

.three-point {}

.three-point__inner {
	display: flex;
}

.three-point__item {
	flex: 1 1 100%;
}

.three-point__img {
	width: 100%;
}

.shortest-time {
	position: relative;
}

.shortest-time__children {
	position: absolute;
	left: -10%;
	right: 0;
	bottom: 41%;
	/*  */
	display: flex;
	justify-content: center;
	/*  */
	width: fit-content;
	margin: auto;
	transform: rotate(-12deg);
}

.shortest-time__child {
	flex: 0 1 20%;
}

.shortest-time__img {
	width: 100%;
}

/*  */

.image-button__image {
	width: 100%;
}


/*  */

.rate-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 1rem;
}

.rate-list__item {
	flex: 1 1 33%;
	position: relative;
}

.rate-list__img {
	width: 100%;
}

.rate-list__rate-box {
	position: absolute;
	bottom: 12%;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
}


/*  */


.arrow-table__st,
.arrow-table__th {
	text-align: center;
	margin-bottom: 1rem;
	font-weight: bold;
	font-size: 1.2rem;
	color: #2d1d1c;
}

.arrow-table__tr {
	margin-bottom: 2rem;
}

.arrow-table__st-img {
	width: 100%;
}

.arrow-table__th img {
	width: 100%;
	height: 10vw;
	padding: 0 2rem;
	object-fit: contain;
}


.radio-btn-box {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.radio-btn {
	flex: 0 1 33.3%;
	max-width: fit-content;
}

.radio-btn__input {
	display: none;
}

.radio-btn__label {
	cursor: pointer;
}

.radio-btn__label img {
	width: 100%;
}

.input-num-box {
	padding: 1rem;
	background: #fff;
	border-radius: 8px;
	border-bottom: 10px solid #f69229;
	width: 100%;
	margin: auto;
}

.num-box {}

.num-box__input {
	width: 95%;
	display: block;
	margin: auto;
	height: 4rem;
	padding: 4px;
	font-size: 2rem;
	text-align: center;
	background: #e5e5e5;
	border-radius: 4px;
	border: unset;
	box-shadow: inset 0.2rem 0.2rem #000;
	overflow: hidden;
}

.input-view-box {
	display: flex;
	gap: 1rem;
	width: 100%;
	margin: 0 auto var(--tmp-margin) 10rem;
	align-items: end;
	padding: 1rem;
	background: #fff;
	border-radius: 8px;
	border-bottom: 10px solid #f69229;
	margin: auto;
}

.view-box {
	width: calc(100% - 4rem);
}

.view-box__input {
	display: block;
	width: 100%;
	height: 4rem;
	padding: 8px 8px 8px 80px;
	font-size: 3.2rem;
	border: unset;
	font-weight: 600;
	color: red;
	text-align: center;
}

.input-view-box__yen {
	font-weight: 600;
	font-size: 3rem;

	/*  */
	color: #04172b;
}

/*  */
.group {}

.group__st {
	text-align: center;
	width: 80%;
	margin: auto;
}

.group__st-img {
	width: 100%;
}

.group__list {}

.group__ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 8px;

	background: url('./../img/item/group-space.png') no-repeat;
}

.group__ul_odd {
	background-position: 80% 100%;
	background-size: 30% auto;
}

.group__ul_even {
	background: none;
}

.group__li {
	flex: 0 1 47%;
	border-radius: 8px;
	overflow: hidden;
}

.group__link {
	display: block;
	width: 100%;
	height: 100%;
}

.group__img {
	width: 100%;
}

/*フッター
----------------------------------------------------------------------------------------------------*/
.footer__global-nav {
	width: fit-content;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: auto;
}

.footer__nav-item {}

.footer__link {
	display: block;
	width: 100%;
	font-weight: bold;
	font-size: 1.4rem;
	line-height: 1.2;
}

.footer__link_before-ball {
	padding: 1rem 0rem 1rem 2.4rem;
	background: url(./../img/item/baloon.png) no-repeat center;
	background-size: 2rem;
	background-position-x: 0%;
}

small {
	text-align: center;
	margin: 2rem 0 0;
	display: block;
	font-size: .875rem;
	width: 100%;
}

.foot-inner--flex {
	display: flex;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: auto;
	gap: 2rem 0;
}

.foot-inner__item {
	flex: 0 0 100%;
}

.footer__ttl {
	font-size: 1.25rem;
	font-weight: 600;
	border-bottom: 1px solid;
	margin-bottom: .5rem;
	padding-bottom: .5rem;
}

.footer__nav {
	display: flex;
	flex-wrap: wrap;
	flex-direction: unset;
	margin: unset;
	gap: 1rem;
}

.footer__nav-item {
	flex: 0 1 calc(50% - 1rem / 2);
}

.footer__nav-link {
	font-size: 1rem;
	font-weight: normal;
}

.fixed-banner {
	width: 100%;
	margin: auto;
	/*  */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

.fixed-banner img {
	width: 100%;
}