@charset "utf-8";
/*******************************************************************************共通設定*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}
nav ul {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
/* change colours to suit your needs */
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
/* change colours to suit your needs */
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
/* change border colour to suit your needs */
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}
input, select {
	vertical-align:middle;
}


/*******************************************************************************ファーストビュー*/
#firstview_container{
	height: 100%;
	/*background-color: #eaf6fd;*/
	position: relative;
}
#logo{
	position: absolute;
	left: 3%;
	top:5%;
	z-index:20;
}
h1{
	/*text-align: right;*/
	padding-left:8%;
	padding-top: 10%;
	padding-bottom: 10%;
	line-height: 2em;
	font-weight: normal;
}
#pr_container{
	position: absolute;
	left: 3%;
	bottom: 3%;
	z-index: 20;
}

.firstview_item{

}
.firstview_item img{
	height: auto;
}
.title{
	text-align: center;
}

/* メディアクエリ */
@media screen and (min-width: 481px) {
	#first_img_sp img ,.sp_only {
		display: none;
	}
	#first_img_pc img {
		width: 100%;
		height: auto;
		z-index: 10;
	}
	#firstview_copy{
		position: absolute;
		left: 10%;
		top: 30%;
		z-index: 20;
		width: 60%;
		margin-left: -10%;
		letter-spacing: 0.05em;
		font-size: 2vw;
	}
	#logo img{
		width: 25vmax;
	}
	.firstview_item img{
		width: 26vw;
	}
}
@media screen and (max-width: 480px) {
	html{
		font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	}
	#first_img_pc img ,.pc_only{
		display: none;
	}
	#first_img_sp img {
		height: auto;
		width: 100%;
		max-width: 100%;
		background-size: cover;
		position: relative;
		z-index: 10;
	}
	#firstview_container{
    position: relative;
    margin: auto;
    width: 100%;
	}
	h1{
		font-family: "游明朝", "YuMincho";
		line-height: 1.6em;
		width: 100%;
	}
	#logo img{
		width: 40%;
	}
	#pr_container{
		position: absolute;
		right: 0%;
    bottom: 3%;
		z-index: 20;
	}
	.firstview_item{
		position: relative;
	}
	.firstview_item img{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 50%;
	}
	#firstview_copy{
		font-size: 100%;
    position: absolute;
    right: 5%;
    top: 8%;
		z-index: 20;
	}
	#firstview_copy h1{
		writing-mode: vertical-rl;
	}
}

/*******************************************************************************バナー*/
.drop{
	margin-left: 20%;
}
.drop img{
	width: 10%;
	height: auto;
}
.title_banner_7{
	text-align: center;
	font-size: 150%;
	font-weight: bold;
	height: 10%;
	margin-top: -6%;
}
#free_trial_pc ,#free_trial_sp{
	text-align: center;
	/*max-height: 100vh;*/
	position: relative;
}
#free_trial_pc img{
	width: 90%;
	height: auto;
	padding-top: 3%;
	padding-bottom: 3%;
}
/*.free_button_container{
	background-color:#f7c6bd;
	text-align: center;
	padding-top: 1%;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 5%;
	margin:auto;
	width: 40%;
	height: 50px;
	border-radius:20px;
}*/
#banner_plan{
	background-color:#eaf6fd;
	height: 350px;
	margin-bottom: 5%;
	position: relative;
}
.details{
	position: absolute;
	bottom: 5%;
	right:0;
	text-align: right;
	padding-right: 3%;
}

.btn{
	text-decoration: none;
	width: 40%;
	height: auto;
    font-size:110%;
    font-weight:bold;
    display:inline-block;
    padding:20px 0 20px;
    color:#fff;
    background-color:#f04f3a;
    /*background: rgb(212,206,206);*/
    /*background: linear-gradient(90deg, rgba(212,206,206,1) 6%, rgba(193,189,189,1) 11%, rgba(168,164,164,1) 19%, rgba(112,112,112,1) 50%);*/
    border-radius: 30px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);/*webkit不要*/
    cursor: pointer;
    /*margin-bottom: 5%;*/
}
/* メディアクエリ */
@media screen and (min-width: 481px) {
	#free_trial_sp {
		display: none;
	}
	#banner_container{
		margin:5%;
	}
}
@media screen and (max-width: 480px) {
	#banner_container{
		margin:5% 0;
	}
	#free_trial_pc{
		display: none;
	}
	#free_trial_sp img{
		width: 100%
	}
	.btn{
		width: 70%;
		margin: 8% auto;
	}
}
/*******************************************************************************バナー feel free*/
#feel_free {
	/*height: 80vh;*/
	text-align: center;
	margin-bottom: 5%;
	margin-top: 10%;
}
.campain_until{
	width:fit-content;
	font-size: 90%;
	opacity: 80%;
	color:#4b9cba;
	background-color: #fff;
	border: 1px solid #4b9cba;
	padding: 0.5em 1em;
	margin-bottom: -4em;
	margin-left: 65%;
}
.campain_unti p{
    margin: 0;
    padding: 0;
}
#feel_free img{
	width: 90%;
	height: auto;
}
/* メディアクエリ */
@media screen and (max-width: 480px) {
	.campain_until{
		margin-left: 30%;
		padding: 0.5em 0.5em;
		font-size: 80%;
    margin-bottom: -2.5em;
	}
	#feel_free {
		margin: 15% auto;
	}
	#feel_free img{
		width: 95%;
	}
}
/*******************************************************************************crecla_water*/
#crecla_water_container{
	/*height: 130vh;*/
	margin:5%;
}
#crecla_water{
	text-align: center;
	margin-bottom: 1%;
	margin-top: 10%;
	position: relative;
}
#crecla_water img{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
#tg {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	color:#4b9cba;
	line-height: 2em;
	font-size: 2.2vw;
	font-weight: normal;
	width: 80%;
	height: auto;
}
#tg span{
	font-size: 200%;
	font-weight: bold;
}
#wave_container{
	position: relative;
}
#wave_container img{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
.wave_text{
	position: absolute;
	color:#4b9cba;
	font-size: 1.4vw;
	line-height: 2em;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	margin: 0 auto;
	text-shadow: 30px 30px 15px #fff;
}
#ro_container{
	text-align: center;
}
#ro_container img{
	width: 35%;
	height: auto;
	margin-top: 3%;
	margin-bottom: 3%;
}
/* メディアクエリ */
@media screen and (max-width: 480px) {
	#tg {
		font-size: 60%;
	}
	.wave_text{
		font-size: 80%;
		top: 100%;
		padding: 0 5%;
		text-align: left;
		margin: 5% 0;
	}
	#wave_container img{
		margin: 5% 0;
	}
	#ro_container img{
		margin-top: 45%;
		width: 65%;

	}
	#crecla_water_container{
		margin:12% auto;
	}
}
/*******************************************************************************ベネフィット*/
#benefit{
	background-color:#FFFFDD;
	padding-bottom: 1%;
	margin-top: 5%;
}
#benefit img{
	text-align: center;
	width: 100%;
	height: auto;
}
h2{
	text-align: center;
	margin-top: 4%;
	margin-bottom: 5%;
	font-size: 200%;
	line-height: 1.5em;
}
.img_0103{
	width: 100%;
	height: auto;
}
.benefit_text_0103{
	padding-left: 5%;
	padding-bottom: 3%;
}
.benefit_text_0204{
	padding-left: 5%;
	padding-bottom: 3%;
}
.rotate0103{
/*	writing-mode: vertical-lr;
	text-orientation: mixed;
	font-size: 200%;
	padding-left: 10%;*/
}
.rotate02{
/*	writing-mode: vertical-lr;
	text-orientation: mixed;
	font-size: 200%;
	padding-right:10%;*/
}
#gray_box{
/*	background-color: #dddddd;
	height: 250px;
	width: 80%;
	padding-left: 0;
	margin-left: 0;*/
}
.benefit_container{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 10%;
}

.benefit_container02{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10%;
}
.benefit_02,.benefit_04{
	padding-left: 5%;
	padding-bottom: 3%;
}
/* メディアクエリ */
@media screen and (min-width: 481px) {
	.benefit_img_sp{
		display: none;
	}
}
@media screen and (max-width: 480px) {
	#benefit{
		padding-bottom: 10%;
	}
	#benefit h2 {
		font-size: 120%;
	}
	#benefit h3 ,.benefit_02 ,.benefit_04{
		font-size: 100%;
		padding: 10% 5% 2% 5%;
	}	
	.benefit_container ,.benefit_container02{
		margin-bottom: 0;
	}
	.benefit_text_0103 ,.benefit_text_0204{
		font-size: 80%;
		padding: 1em 5%;
	}
	.benefit_img_pc{
		display: none;
	}
	.benefit_img_sp{
		margin: 5% auto;
	}
}
/*******************************************************************************県内の実績、利用者の声*/
#img_container{
	background-color:#eaf6fd;
	height: 400px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 15px 25px;
}
.img_item{
	background-color: #dddddd;
	height: 350px;
	width: 20%;
	margin: 10px;
}
.img_item p{
	text-align: center;
	padding-top: 15%;
}
/* メディアクエリ */
@media screen and (max-width: 480px) {
	#customersvoice h2 {
		font-size: 120%;
	}
}
/*******************************************************************************メリット*/
#merit_container{
	
}
#box_merit {
    padding: 0.8em 1em;
    margin: 2em auto;
    color: #2c2c2f;
    background: #FCF4E9;
	text-align: center;
	font-size: 130%;
	font-style: bold;
}
#box_merit p{
	color: #9A736E;
	padding:0;
	margin:0;
}
h2.merit{
	position: relative;
}
h2.merit::after {
  content: '';
  width: 110px;
  height: 1px;
  display: inline-block;
  background-color: #000;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 55px)
}
.merit_circle{
	text-align: center;
	background-color:#fff;
	border: solid 0.3px #F0F1EB;
	font-size: 200%;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	right: 0;
	left: 0;
	margin:auto;
	z-index: 40;
	position: relative;

}
.merit_circle_02{
    text-align: center;
	background-color:#fff;
	border: solid 0.3px #F0F1EB;
	font-size: 200%;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	right: 0;
	left: 0;
	margin:auto;
	z-index: 40;
	position: relative;
	margin-top: -50px;
}
#merit_01{
	background-color:#F0F1EB;
	text-align: center;
	/*margin-bottom: 8%;*/
	/*height: 160vh;*/
	position: relative;
	margin-top: -50px;
	z-index: 10;
	padding-bottom: 5%;
}
.merit_01_sub{
	color: #9A736E;
	font-size: 120%;
	line-height: 2em;
}
.merit_text_01{
	position: absolute;
	right: 0;
	left: 0;
}
.merit_text_01 p{
	font-size: 100%;
	color: #808080;
	text-align: left;
	padding:0;
	margin:0;
}
#merit_02{
	background-color:#fff;
	text-align: center;
	margin-bottom: 8%;
	/*height: 500px;*/
	position: relative;
	margin-top: -50px;
	z-index: 10;
}
#merit_01 img{
	width:100%;
	height: auto;
}
#merit_02 img{
	width:100%;
	height: auto;
}
#merit_03{
	background-color:#F0F1EB;
	text-align: center;
	padding-bottom: 8%;
	/*height: 130vh;*/
	position: relative;
	margin-top: -50px;
	z-index: 10;
}
.merit_text_02_03{
	color: #666;
	line-height: 1.5em;
	font-size: 1.6vw;
}
/*.gray_box_merit{
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
}*/

h3{
	font-size: 200%;
	font-weight: normal;
	padding:8% 5% 2% 5%;
}
.gray_box_merit{
	background-color: #dddddd;
	height: 200px;
	width: 50%;
}

/* メディアクエリ */
@media screen and (min-width:481px) {
	#box_merit {
		width: 50%;
	}
	#merit_03 video{
		width:70%;
		height: auto;
		padding-top: 5%;
		padding-bottom: 5%;
	}
}
@media screen and (max-width: 480px) {
	#box_merit {
		margin: 0;
	}
	#merit_container h2 {
		font-size: 120%;
		margin: 15% 0;
	}
	.merit_circle ,.merit_circle_02{
		font-size: 140%;
		width: 70px;
		height: 70px;
	}
	.merit_circle{
		margin-left: auto;
		margin-bottom: -8%;
	}
	.merit_circle_02{
    margin-top: -10%;
    margin-bottom: 10%;
	}
	#merit_01{
		padding-top: 5%;
		padding-bottom: 10%;
		margin-top: 0%;
	}
	#merit_02{
		margin-bottom: 5%;
	}
	#merit_02 img{
		padding: 5% 0;
	}
	#merit_03{
		padding-top: 5%;
		margin-top: 0%;
	}
	#merit_03 video{
		width: 95%;
		height: auto;
		padding-top: 8%;
		padding-bottom: 8%;
		}
	#merit_01 h3 ,#merit_02 h3 ,#merit_03 h3{
		font-size: 150%;
		padding: 8% 5% 5% 5%;
	}
	.merit_text_02_03{
		font-size: 80%;
		padding: 3% 10%;
		text-align: left;
	}
}
/*******************************************************************************他者比較*/
#competitor_container{
	position: relative;
	/*height: 100vh;*/
}
#box_comp {
	padding: 0.8em 1em;
	margin: 2em auto;
	color: #2c2c2f;
	background: #FCF4E9;
	text-align: center;
	font-size: 130%;
	font-style: bold;
}
h2.comp{
	position: relative;
}
h2.comp::after {
  content: '';
  width: 110px;
  height: 1px;
  display: inline-block;
  background-color: #000;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 55px)
}
#box_comp p{
	color: #9A736E;
	padding:0;
	margin:0;
}
h3.competitor_text{
	text-align: center;
	padding:3% 5% 2% 5%;
	line-height:1.5em ;
	font-size: 1.6vw;
}
#competitor_container img{
	width: 70%;
	height: auto;
	padding: 5%;
}
/* メディアクエリ */
@media screen and (min-width: 481px) {
	#box_comp {
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	#box_comp {
		margin: 0;
	}
	#competitor_container h2 {
		font-size: 120%;
		padding-top: 10%;
	}
	#competitor_container h3 {
		font-size: 80%;
	}
	h3.competitor_text{
		padding:3% 5% 5% 5%;
	}
	h3.competitor_text p{
		padding: 8% 5%;
		text-align: left;
	}
	#competitor_container img{
		width: 100%;
		padding: 5% 0;
	}
}
/**********************************************************************************一般主婦向け:クリクラがある生活*/
#life_with_creclar{
	background-color:#F0F1EB;
	padding-bottom: 5%;
	/*height: 160vh;*/
	/*margin-top: 10%;*/
}
h2.lwc{
	padding-top: 5%;
	padding-bottom: 3%;
	position: relative;
}
h2.lwc::after {
  content: '';
  width: 110px;
  height: 1px;
  display: inline-block;
  background-color: #000;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 55px);
}

.life_copy_0103 h3{
	text-align: center;
}

.life_copy_0103 img{
	width: 70%;
	height: 300px;
	object-fit: cover;
}
.life_copy_0204{
text-align: right;
}
.life_copy_0204 h3{
	text-align: center;
}
.life_copy_0204 img{
	width: 70%;
	height: 300px;
	object-fit: cover;
	/*margin-bottom: 3%;*/
	/*margin:0 0 3% auto;*/
}
/* メディアクエリ */
@media screen and (max-width: 480px) {
	#life_with_creclar{
		padding-bottom: 15%;
	}
	#life_with_creclar h2{
		font-size: 120%;
		padding-bottom: 0;
		padding-top: 10%;
	}
	#life_with_creclar h3{
		font-size: 120%;
	}
	.life_copy_0103 img ,.life_copy_0204 img{
		height: 100%;
	}
}
/**********************************************************************************よくあるご質問*/
#qa_container{
	background-color:#eaf6fd;
	position: relative;
	padding: 2% 0 10%;
}
#qa_box{
	position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
	height: 80%;
	width: 70%;
	margin-bottom: 5%;
	display: contents;
}
h2.title{
	/* padding-bottom: 5%; */
	padding-top: 5%;
	padding-bottom: 3%;
	position: relative;
}
h2.title::after {
  content: '';
  width: 110px;
  height: 1px;
  display: inline-block;
  background-color: #000;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 55px);
}
.qa_box_each{
	position: relative;
	right: 0;
	left: 0;
	background-color: white;
	width: 70%;
	/*height: 300px;*/
	border: 1px solid #dddddd;
	margin: 0 auto;
	margin-bottom: 5%;
}
.qa_box_each p{
	margin: 0 auto;
	position: relative;
	right: 0;
	left: 0;
	font-size: 150%;
	padding-top: 2%;
	text-align: left;
	line-height: 1.2em;
}
.indent{
	text-indent: 1em;
}
p.border{
	position: relative;
	left: 0;
	right: 0;
	top: 10%;
	margin: 0 auto;
	border-bottom:1px solid #ddd;
	width: 80%;
	text-align: center;
}
.qa_text_q{
	position: relative;
	left: 0;
	right: 0;
	top: 10%;
	margin: 0 auto;
	margin-top: 20px;
	width: 80%;
	text-align: center;
}
.qa_text_a{
	position: relative;
	left: 0;
	right: 0;
	top: 3%;
	margin: 0 auto;
	margin-bottom: 30px;
	width: 80%;
	text-align: center;
}
/* メディアクエリ */
@media screen and (max-width: 480px) {
	#qa_container h2{
		font-size: 120%;
		padding-bottom: 0;
		padding-top: 10%;
	}
	#qa_box{
		font-size: 65%;
	}
	.qa_box_each{
		margin-top: 8%;
		width: 80%;
	}
}
/**********************************************************************************会社概要*/
.text h1{
	font-size: 150%;
	font-weight: bold;
	margin-top: 10%;
}
table{
	text-align: left;
	margin-right:auto;
	margin-left:auto;
	line-height: 3em;
	border: 1px #f5f5f5 solid;
	text-indent: 1em;
	width: 80%;
}
th{
	background-color: #f5f5f5;
}

/**********************************************************************************個人情報保護方針*/
ol{
	text-align: left;
	margin-right:auto;
	margin-left:auto;
	line-height: 2em;
	text-indent: 1em;
	width: 70%;
}
.sign{
	text-align: right;
	margin-right:auto;
	margin-left:auto;
	line-height: 2em;
	text-indent: 1em;
	margin-top: 5%;
	margin-right: 10%;
}
/**********************************************************************************特商法*/
#tokushoho_text h1{
	margin-top: 10%;
	font-size: 1.8vw;
  font-weight: bold;
}
.tokushoho_table table, tr, td {
	border-bottom: 1px solid black;
	vertical-align: middle;
	padding: 1em 0;
}
.tokushoho_table th {
	padding: 1em;
}
@media screen and (max-width: 480px) {
	#tokushoho_text h1{
		font-size: 80%;
	}
	.tokushoho_table {
		font-size: 50%;
	}
}
/**********************************************************************************お問い合わせ*/
#contact{
	margin: 10% auto 0;
}
.contact_title{
	position: relative;
	margin: 20% 0 5%;
}
.contact_title img{
	width: 100%;
	max-width: 1280px;
	height: 100%;
	/* margin: 15% 0 5%; */
}
.contact_title h1{
	position: absolute;
	bottom: -40%;
	left: 0%;
	font-size: 200%;
	font-weight: bold;
}
.contact_text p{
	line-height: 2em;
}
.contact_object{
	display: flex;
}
.contact_box{
	display: flex;
	margin: 5%;
	padding: 0.5em 1em;
	font-weight: bold;
	color: #6091d3;
	background: #FFF;
	border: solid 3px #6091d3;
	border-radius: 10px;
}
.contact_box p{
	margin: 0 auto;
	padding: 1em;
	line-height: 2em;
}
.contact_box img{
	width: 15%;
	height: auto;
	margin-left: 3%;
	object-fit: contain;
}
@media screen and (min-width: 481px) {
	#logo a:hover{
		opacity: 0.5;
	}
	#contact{
		max-width: 70%;
	}
}
@media screen and (max-width: 480px) {
	#contact{
		max-width: 100%;
	}
	.contact_title{
		width: 100%;
	}
	.contact_title img{
		margin: 5% 0 5%;
	}
	.contact_title h1{
		position: absolute;
    bottom: 0;
    left: 0%;
	}
	.contact_text{
		width: 85%;
		margin: 5% auto;
	}
	.contact_text p{
		line-height: 2em;
    font-size: 14px;
	}
	.contact_object{
		flex-direction: column;
	}
	.contact_box img{
		width: 15%;
	}
	.contact_box p{
		line-height: 1.4em;
	}
}

/**********************************************************************************footer*/
footer{
	height: 400px;
	text-align: center;
	margin-bottom: 1%;
}
#footer_logo_container{
	display: flex;
	justify-content: center;
	margin-top: 3%;
}
.footer_logo{
	margin: 5%;
}
#nav_container{

}
#nav_container ul{
	height: 10%;
	display: flex;
	justify-content: center;
	flex-direction: row;
	list-style: none;
}
#nav_container ul li{
	margin: 5%;
}
#copy_right{
	height: 3%;
	margin-top: 3%;
}
#ninsyo_no{
	height: 3%;
	text-align: left;
	margin: 3%;
}

/* メディアクエリ */
@media screen and (max-width: 480px) {
	footer{
		font-size: 80%;
		height: 0;
	}
}