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

@media screen and (max-width: 768px) {
	body {
		font-size: 4vw !important;
	}

	#wrap {
		margin: 0;
	}

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

	.img-90 {
		width: 90%;
		height: auto;
		margin: 0 5%;
	}

	.img-50 {
		width: 50%;
		height: auto;
		margin: 0 25%;
	}

	.sp-img-w80 {
		width: 80px;
	}

	.sp-none {
		display: none;
	}

	header {
		display: none;
	}

	#wrap section {
		width: 94%;
		margin: 0 3%;
	}

	.flex-bt {
		display: block;
	}

	/*font*/

	.f-left-sp {
		text-align: left !important;
	}

	/*font*/
	.fs-15 {
		font-size: 3vw;
	}

	.fs-24 {
		font-size: 4vw;
	}

	.fs-28 {
		font-size: 6vw;
	}

	.fs-32 {
		font-size: 7vw;
	}

	.fs-38 {
		font-size: 8vw;
	}

	.fs-48 {
		font-size: 12vw !important;
	}

	.fs-64 {
		font-size: 10vw;
	}

	.fs-74 {
		font-size: 12vw;
	}

	/*margin*/
	.mb10 {
		margin-bottom: 5px;
	}

	.mb20 {
		margin-bottom: 10px;
	}

	.mb40 {
		margin-bottom: 20px;
	}

	.mb80 {
		margin-bottom: 40px;
	}

	.mg40 {
		margin: 20px;
	}

	.mr20 {
		margin-right: 10px;
	}

	.mr40 {
		margin-right: 20px;
	}

	.sp-mb20 {
		margin-bottom: 20px;
	}

	/*padding*/
	.pd20 {
		padding: 10px 3%;
	}

	.pd40 {
		padding: 10px 5%;
	}

	.ptb40 {
		padding: 20px 0;
	}

	.ptb80 {
		padding: 40px 0;
	}

	/*block_three*/
	.w60 {
		width: 100%;
	}

	.w40 li {
		width: 90%;
	}

	.w50 li {
		width: 98%;
	}

	.sp-block {
		display: block;
	}

	/*H2*/
	h2 {
		font-size: 7.5vw;
		padding: 0 0.5em;
		display: block;
	}

	/*点線大*/
	h2 .inner_b::before,
	h2 .inner_b::after {
		width: 30px;
		height: 57px;
		bottom: 0;
	}

	h2 .line_kon::before {
		background: url(../images/line_kon_l.png) left bottom no-repeat;
		background-size: 30px 57px;
	}

	h2 .line_kon::after {
		background: url(../images/line_kon_r.png) left bottom no-repeat;
		background-size: 30px 57px;
	}

	h2 .line_blue::before {
		background: url(../images/line_blue_l.png) left bottom no-repeat;
		background-size: 30px 57px;
	}

	h2 .line_blue::after {
		background: url(../images/line_blue_r.png) left bottom no-repeat;
		background-size: 30px 57px;
	}

	/*点線小*/
	h2 .inner_s::before,
	h2 .inner_s::after {
		width: 15px;
		height: 31px;
		bottom: 5px;
	}

	h2 .inner_s::before {
		left: 3em;
	}

	h2 .inner_s::after {
		right: 3em;
	}

	h2 .line_red::before {
		background: url(../images/line_red_l.png) left bottom no-repeat;
		background-size: 15px 31px;
	}

	h2 .line_red::after {
		background: url(../images/line_red_r.png) left bottom no-repeat;
		background-size: 15px 31px;
	}

	h2 .line_konS::before {
		background: url(../images/line_konS_l.png) left bottom no-repeat;
		background-size: 15px 31px;
		margin-left: -1.5em;
		bottom: 0;
	}

	h2 .line_konS::after {
		background: url(../images/line_konS_r.png) left bottom no-repeat;
		background-size: 15px 31px;
		margin-right: -1.5em;
		bottom: 0;
	}

	/*吹き出し*/
	.fuki p {
		font-size: 6vw;
		padding: 0.25em 0.5em;
	}

	.fuki_bgblue p {
		margin: 0 0 20px 0;
	}

	/*H3*/
	h3 {
		font-size: 7vw;
	}

	.h3_line::before {
		width: 30px;
		height: 2px;
	}

	/*====================================
	 header
	====================================*/
	header {
		padding: 10px 0;
		height: 30px;
		position: relative;
	}

	header .container {
		max-width: 94%;
		padding: 0 3%;
	}

	header .container .logo img {
		height: 20px;
	}

	header .container .tel img {
		height: 20px;
	}

	/*main*/
	.main {
		padding: 0;
		background: none;
	}

	/*about*/
	.about {
		border: 3px solid #36abfc;
		padding: 20px 5% 10px 5%;
	}

	.about .qtt {
		margin: 0 0 0 -25px;
		width: 50px;
		line-height: 50px;
		top: -50px;
	}

	.about h3 {
		font-size: 6vw;
	}

	.about p {
		font-size: 3.5vw;
	}

	/*reason*/
	.reason {
		background: #eaebdb;
		width: 100%;
		padding: 0;
		min-height: auto;
		border-radius: 0 0 20px 20px;
	}

	.reason h3 {
		font-size: 6.5vw;
		padding: 1em 0 0.5em 0;
	}

	.reason h3:after {
		width: 30px;
		height: 2px;
	}

	.reason ul {
		padding: 0 5%;
	}

	.reason li {
		font-size: 4vw;
		padding: 0 0 15px 50px;
	}

	.reason li:nth-child(1),
	.reason li:nth-child(2),
	.reason li:nth-child(3) {
		background-size: 40px auto;
	}

	/*pack*/
	#wrap .menu section {
		width: 94%;
	}

	.pack {
		width: 100%;
		padding: 0 0 20px 0;
		margin: 0 0 20px 0;
	}

	.pack .ttl {
		font-size: 6.5vw;
		margin: 15px 0;
	}

	.pack .free {
		font-size: 18px;
	}

	.pack .price {
		font-size: 4.5vw;
	}

	.pack .price span {
		font-size: 10vw;
	}

	.pack .cv-btn {
		width: calc(100% - 60px);
		padding: 10px;
		margin: 0 auto;
	}

	.pack .cv-btn a {
		font-size: 6vw;
	}

	/*option*/
	.otoku {
		padding: 1rem 3%;
		font-size: 18px;
	}

	.otoku .fs-32 {
		font-size: 7vw;
	}

	.option {
		padding: 0 3%;
		margin: 0 auto 20px auto;
		width: 100%;
	}

	.option li {
		padding: 10px 0;
		margin: 0;
	}

	.option li:last-child {
		border-bottom: none;
		padding: 10px 0;
	}

	.option li h3 {
		font-size: 20px;
		margin: 0;
	}

	.option li p {
		font-size: 13px;
	}

	.option li .f-mdl s {
		font-size: 17px;
	}

	.option li .fc-red {
		font-size: 28px;
	}

	.more {
		width: 100%;
	}

	.more .fs-28 {
		font-size: 6vw;
	}

	.more ul {
		padding: 0 0 10px 0;
	}

	.more li {
		font-size: 4vw;
		margin: 0;
	}

	.more li:first-child {
		width: 100%;
	}

	.more li:last-child {
		margin: 0 0 0 2rem;
	}

	.more p {
		font-size: 4vw;
	}

	.more .fs-38 {
		font-size: 8vw;
	}

	/*select_box*/
	.select_ttl:before {
		width: 52px;
		height: 64px;
		left: 0;
		margin-left: 0;
		background: url(../images/bear_01.png) left 0 no-repeat;
		background-size: 52px 64px;
	}

	.select_ttl:after {
		width: 71px;
		height: 72px;
		right: 0;
		margin-right: 0;
		background: url(../images/bear_02.png) left 0 no-repeat;
		background-size: 71px 72px;
	}

	.select_box dt {
		font-size: 6vw;
	}

	.select_box dd {
		padding: 10px 3%;
	}

	.btn_select_box {
		font-size: 6vw;
		display: block;
	}

	.btn_select_box a {
		padding: 0 1em;
	}

	.select_last ul {
		padding: 0;
	}

	.select_last p {
		position: relative;
		right: 0;
	}

	/*option*/


	/*step*/
	.step-comment {
		margin: 40px 0 20px 0;
	}

	.step-comment dt {
		font-size: 4vw;
	}

	.step-comment dt span {
		padding: 5px 10px;
	}

	.step-comment dd {
		padding: 15px;
		font-size: 5.5vw;
	}

	.step li {
		font-size: 1em;
		margin: 0 20px 0 0;
	}

	.step li:after {
		background-size: 12px auto;
		width: 12px;
		height: 20px;
		top: 50%;
		right: -17px;
	}

	.step li p:before {
		width: 25px;
		height: 25px;
		margin: 0.5em 0.25em 0 0;
	}

	/*area*/
	.area {
		height: auto;
	}

	.area li:nth-child(1) {
		position: relative;
		border: 4px solid #e5e5e5;
		width: 100%;
		font-size: 4vw;
		margin: 0 0 20px 0;
		top: 0;
		transform: none;
	}

	.area li:nth-child(2) {
		position: relative;
		text-align: center;
		left: 0;
		top: 0;
	}

	.area li:nth-child(2) img {
		width: 70%;
	}

	/*voice*/
	.yorokobi h2 {
		margin: -60px 0 20px 0;
	}

	.voice li {
		padding: 3px 5px;
		font-size: 4vw;
		margin: 0 0.5em 0 0;
		display: inline;
		text-align: center;
	}

	/*faq*/
	.faq dl {
		font-size: 1em;
		padding: 15px 5%;
	}

	.faq dt {
		padding: 0 0 0 1.5em;
	}

	.faq dt:before {
		font-size: 1.1em;
		top: -0.2em;
	}

	.faq dd {
		padding: 0 0 0 1.5em;
	}

	.faq dd:before {
		font-size: 1.1em;
	}

	/*caution*/
	.caution {
		padding: 20px 5%;
	}

	.caution h3 {
		font-size: 6vw;
	}

	/*cv*/
	.cv {
		padding: 20px 5%;
		font-size: 4vw;
	}

	.cv2 {
		padding: 20px 5% 40px 5%;
	}

	.cv dt {
		padding: 5px 10px;
	}

	.cv dd span {
		font-size: 5.5vw;
	}

	.cv dd span:before {
		width: 11px;
		height: 14px;
		background-size: 11px auto;
		left: -20px;
	}

	.cv dd span:after {
		width: 11px;
		height: 14px;
		right: -20px;
		background-size: 11px auto;
	}

	.cv-btn {
		width: calc(100% - 30px);
		padding: 10px 15px;
	}

	.cv-btn a {
		font-size: 6.5vw;
		line-height: 1.3;
		text-align: center;
		background-size: 12px auto;
	}


	/*====================================
	 FOOTER
	====================================*/
	footer {
		font-size: 1em;
	}

	footer .mb15 {
		margin-bottom: 15px;
	}

	footer .container {
		padding: 10px 3%;
		width: 94%;
	}

	footer ul {
		padding-bottom: 10px;
	}

	footer ul li a {
		font-size: 4vw;
		padding: 0 0.5em;
	}

	#scrollUp {
		bottom: 50px;
	}

	#scrollUp img {
		width: 50px;
	}
}