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

/*spから作成*/


html{
	font-size:62.5%; /*16px x 62.5% = 10px */
	overflow-x: hidden;
	height: 100%;
}

body{

	font-family: 'Nunito','Noto Sans JP', sans-serif;
	font-size:1.4rem;
	background-color: #EE9C1D;
	margin: 0;
	padding: 0;
	color: #333;
}
p{
	font-size: 1.4rem;
	line-height: 1.7;
	
}
a{
	font-size: 1.4rem;
	line-height: 1.7;
	text-decoration: none;
	color:#333333;
}
h1{
	font-size:3.6rem;
}
h2{
	font-size: 2.0rem;
}

.fa i{
	font-size:2rem;
}

.title{
	margin: 80px auto 30px;
	font-weight: 600;
}
.button{
	display: block;
	background-color: #BEDF40;
	width: 60vw;
	border-radius: 5px;
	color:#fff;
	padding: 13px 20px;
	margin: 30px auto; 
	box-shadow: 2px 2px 4px gray;
}
.button_form{
	border:none;
	border-radius: 30px;
}
.button_short{
	width: 40%;
}
/*navigation*/


/*-------------------header_start--------------------*/

header{
	background-color: #fff;
	margin: 0;
	padding: 0;
}
.logo1{
	width: 10rem;
}
.topimg{
	width: 100vw;
	margin-bottom: -10px;
}
header h1,header p{
	text-align: center;
}

.green{
	color:#063C02;
	min-width: 120px;
	padding: 0;
	margin: 0;
	text-shadow: 1px 1px 3px #fff;
}
.strong{
	font-size:2.0rem;
	color:#fff;
}
img{
	border-radius: 3px;
}


/*-------------------header_end---------------------*/
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  background: #fff;
}

/*humburger*/
.drawer{
	position:fixed;
	top:0;
	right:0;
	z-index:300;
}
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  position: relative;
  top:5px;
  right:5px;
	border-radius: 3px;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
  background: linear-gradient(to right,#8BB90B,#CDEB4D);
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background:#fff ;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.drawer-content {
  width: 90%;
  height: 90%;
  position: fixed;
  top: 10px;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(237,160,68,0.95);
  border-radius: 50px 30px 50px 30px;
  transition: .5s;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left:5%;/* メニューを画面に入れる */
}

/*navigation*/
.nav{
	margin: 40px auto 30px;
}
.nav a{
	display: block;
	width: 100%;
	padding: 30px 0;
	text-align: center;
	color:#fff;
	font-weight: bold;
	text-shadow: 1px 1px 3px rgba(51,51,51,0.4);
}
.sns{
	display: block;
	text-align: center;
	color:#fff;
	font-weight: bold;
	padding: 20px 0 0;
	text-shadow: 1px 1px 3px rgba(51,51,51,0.4);
}
.item_sns{
	display: flex;
	justify-content: center;
	width: 30%;
	margin: 20px auto 0;
}
.item_sns a{
	display: inline-block;
	padding: 10px 0;
	
}

.back{
	/*background-image: url("../img/topname.png");
	background-repeat: no-repeat;
	background-position: center;*/
	background-color: rgba(234,146,40,0.88);
	margin: 30px auto 0;
	min-width: 200px;
	width: 70%;
	height: auto;
	min-height:200px;
	border-radius: 50% 50%;
	box-shadow:     0 20px 0 -5px rgba(255,204,0,0.7),
    0 40px 0 -15px rgba(255,151,5,0.6),
    0 60px 0 -20px rgba(255,236,5,0.3);
}
.header_style h1{
	font-size:2.4rem;
	padding: 50px 20px 10px;
	display: block;
}
.header_style p{
	display: block;
	padding: 10px 5px 50px;
}
.header_style img{
	margin-top:30px;
}
/*scroll*/
.scroll {
  display: block;
  padding-top: 60px;
  padding-bottom: 30px;
  position: relative;
  background-color:#EE9C1D;
}

.scroll::before {
  animation: scroll 3.5s infinite;
  border: solid #fff;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 10px;
  height: 10px;
}
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
.txt{
	color:#fff;
	display: block;
	text-align: center;
	letter-spacing: 1rem;
	font-family: 'Architects Daughter', cursive;
}
/*-------------------main_start---------------------*/
.box{
	background: -moz-linear-gradient(90deg,#FEF2C8,#fff 30%,#fff,#fff 70%,#FEF2C8);
	background: -webkit-linear-gradient(90deg,#FEF2C8,#fff 30%,#fff,#fff 70%,#FEF2C8);
	background: linear-gradient(90deg,#FEF2C8,#fff 30%,#fff,#fff 70%,#FEF2C8 );
	margin: 0 10px 30px;
	padding: 50px 1rem;
	border-radius: 8px;
	text-align: center;
}

.catch{
	margin: 0 auto 50px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.important{
	font-size:2.2rem;
	color: #EE9C1D;
}


/*ごあいさつ-----------------*/
.faceimg{
	width: 70%;
	margin: 0 auto;
}
.gray{
	color:#5f5f5f;
	font-size:1.2rem;
	padding-top: 10px;
}
.logo2{
	margin: 30px auto;
}
.orange{
	color:#BA4F00;
}
.left_img{
	position:absolute;
	left:10px;
	width:15%;
	/*position:fixed;*/
	/*top:50px;*/
}
.right_img{
	position:absolute;
	right:10px;
	width: 15%;
}
.key{
	font-size:1.6rem;
	margin-bottom: 40px;
}

/*about-me-----------------*/
.about{
	background-color: #fff;
	border: solid 1px #000;
	border-radius: 3px;
	padding: 30px 10px;
	text-align: left;
}
.aboutme{
	text-align: center;
	margin-bottom: 30px;
}
.aboutme span{
	font-size:1.6rem;
	color:#EE9C1D;
}
.about li{
	list-style: inside;
	font-size:1.4rem;
	line-height: 1.9rem;
}
.liner{
	text-decoration: underline;
}

/*message------------------*/
.message{
	margin: 50px auto 0;
	padding-bottom: 100px;
	line-height: 1.7;
	text-shadow: 1px 2px 3px rgba(186,79,0,0.64);
	background-image: url("../img/hug_img.png");
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: bottom;
}



/*main!survice--------------------*/

.survice_sp{
	display:block;
}
.survice_pc{
	display: none;
}
.survice_sp h3{
	font-size:2.2rem;;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 10px;
}
.survice_sp p{
	font-size:1.4rem;
}
.block{
	position:relative;
}
.block h3,.block p{
	text-align: center;
}
/*image--------------------------------*/
.sur_img1,.sur_img3{
	margin: 10px 0px -20px 30%;
  	width:70% ;
	z-index:100;
}
.sur_img2{
	margin: 10px 25% -20px 0;
  	width:70% ;
}

.sur_img5{
	margin: 10px auto -20px ;
  	width:70% ;
}
/*box--------------------------------*/
.survice_box{
	background-color: rgba(186,221,59,0.52);
	background-image: -webkit-radial-gradient(#fff, rgba(186,221,59,0.52));
 	background-image: radial-gradient(#fff, rgba(186,221,59,0.52));
	border-radius: 3px;
	padding: 20px 0 10px;
	margin:10px 20% 10px 0;
    color:#333;
	z-index:200;
}
.survice_box2{
	background-color: rgba(186,221,59,0.52);
	background-image: -webkit-radial-gradient(#fff, rgba(186,221,59,0.52));
 	background-image: radial-gradient(#fff, rgba(186,221,59,0.52));
	border-radius: 3px;
	padding: 20px 0 10px;
	margin:10px 0% 10px 20%;
    color:#333;
	z-index:200;
}
.orange2{
	color:#EDA044;
	font-size:2.4rem!important;
	font-weight: bold;
	letter-spacing: 3px;
	padding: 50px 0!important;
	margin: 0 auto!important;
	background-image: url("../img/kumo.png");
	background-size: cover;
}
/*voice--------------------*/
.voice{
	margin: 100px auto;
}
.voice p{
	line-height: 1.5;
	margin: 10px auto 30px;
}
.voice img{
	margin: 0 auto;
}
.button_voice{
	background-color: #AEAEAE;
	width: 40%;
}
/*---------------------------------
アコーディオンボックス
--------------------------------*/
.acbox{
  width: auto;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin:10px 10px; /* ボックス全体の位置調整 */
}

.acbox label{
  width: auto;
  font-size: 16px; /* ラベルの文字サイズ */
  font-weight: bold;
  text-align: center;
  background: #F3B92F; /* ラベルの背景色 */
  position: relative;
  display: block;
  padding:8px;
  border-radius: 4px; /* ラベルの角の丸み */
  cursor: pointer;
  color: #fff;
}

.acbox label:hover{
  background: #F3B92F; /* ラベルにマウスを乗せた時の背景色 */
}

.acbox input{
  display: none;
}

.acbox label:after{
  color: #fff;
  content:"▼"; /* ラベルのアイコン */
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}

.acbox input:checked ~ label::after {
  content:"▲"; /* ラベルをクリックした後のアイコン */
}

.acbox div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}

.acbox input:checked ~ div{
  height: auto;
  padding: 15px; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  opacity: 1;
}

.acbox input:checked ~ label {
  background: #F3B92F; /* クリック後のラベルの背景色 */
}

.acbox-under{
  font-size:1.2rem; /* 開いた部分の文字サイズ */
  color: #555555; /* 開いた部分の文字色 */
  line-height: 1.7;
}
.acbox img{
	width: 50%;
	min-width: 185px;
	height: auto;
	margin: 10px auto;
}

/*price--------------------*/
.price img{
	margin: 0 0 -7% 65%;
	width: 100%;
	max-width:63px;
	
}
.small{
	font-size:1.0rem;
	margin-top: 10px;
}
.pricelist-contents li{
	list-style: none;
	background-color: rgba(246,218,87,0.3);
	padding: 10px 30px;
	margin: 0;
	border: double 4px #EDA044;
}
.marker,.marker2{
	min-width: 32%;
	padding: 3px 40px;
	display:inline-block;
	font-size:1.8rem;
	font-weight: bold;
	color:#fff;
	background-color:#EDA044;
	border-radius:3px;
}

.info{
	padding:20px 20px 10px;
	line-height: 1.7;
}
.info_price{
	display:inline-block;
	padding: 10px 50px;
	margin-top: 10px;
	margin-bottom: 30px;
	background-color: #fff;
	border:solid 2px #EDA044;
	border-radius: 50px;
	color:#3063FF;
	font-size:1.6rem;
}

/*-------------------main_end-----------------------*/

/*-------------------form_start---------------------*/

.form img{
	width: 20%;
	margin: -30px 0 0 70%;
}

.formarea{
	text-align: center;
	margin: 0 auto;
}

.form_txt{
		display: block;
		margin-top: 0px;
	}
/*-------------------form_end-----------------------*/

.topbutton {/* ▼配色・配置・文字の装飾など */
   border-radius: 24px;  /* ←角丸の半径 */
   text-align: center;  /* ←文字の位置 */
   font-size: 1.4rem;    
   font-weight: bold; 
   margin: 0px;          /* ←外側の余白 */
   padding: 10px;       /* ←内側の余白 */
}
.topbutton a {
   /* ▼リンクの装飾 */
   color: #EE9225; 
   text-decoration: none; /* ←下線なし */
}
.topbutton a:hover {
   /* ▼マウスが載ったときの装飾 */
   color:#EDA044;              /* ←文字色 */
   text-decoration:none; /* ←下線あり */
}



/*-------------------footer_start-------------------*/
footer{
	background: linear-gradient(0deg,#A5B170, #DAEB8C);
	margin: 0;
	padding: 30px 0 80px;
	text-align: center;
	position:relative
}
footer p{
	font-size:1.2rem;
	color:#fff;
}
.footer_p{
	color:#121AA3;
	text-decoration-line: underline;
}
footer a{
	color:#fff;
	font-size:1.6rem;
}
footer p:first-of-type{
	padding: 30px 0 10px;
}

.footer_sns{
	display: flex;
	justify-content:center;
	margin: 20px auto;
}
.footer_sns a{
	padding: 0 10px;
	font-size:3rem;
	font-weight:bold;
}
small{
	font-size:1rem;
	position:absolute;
	left:10px;
	bottom: 10px;
}
/*-------------------footer_end---------------------*/
.sp_txt,.sp_br,.sp_img{
	display:block;
}
.tab_txt,.tab_br{
	display: none;
}
.tab_sp_br{
	display: block;
}
.header_style{
	display: block;
}

.pc_on,.tab_on{
	display: none;
}
/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media (min-width: 768px) {/*768px*/

	
	body{
		font-size:1.6rem;
	}
	p{
		font-size: 1.6rem;
		line-height: 1.7;
	}
	a{
		font-size: 1.6rem;
		line-height: 1.7;
	}
	h1{
		font-size:3.8rem;
	}
	h2{
		font-size: 2.2rem;
	}
	.nav{
		margin: 100px auto;
	}
	.fa i{
		font-size:3rem;
		}
	.gray{
		font-size:1.4rem;
	}
	
	.logo1{
		width: 15rem;
	}
	.drawer-open{
		right:20px;
		width: 60px;
		height: 60px;
	}
	.drawer-content{
		height: 750px;
	}
	.header{
		margin: 0 20px;
	}
	.back{
		padding: 20px 0;
		margin: 0 auto;
		min-height: 200px;
		background-position: center;
		background-size:60%;
	}
	.box{
		margin-right: 30px;
		margin-left: 30px;
		overflow-x: hidden;
	}
	/*survice*/
	.sur_img1:first-of-type{
		margin-top: 50px;
	}
	
	.survice_box,.survice_box2{
		padding: 25px;
		margin-bottom: 50px;
	}
	.about{
		padding: 30px;
	}
	.message{
		margin-top: 80px;
		padding-top: 80px;
	}
	.survice_box,.survice_box2{
		padding: 50px;
	}
	.survice_box3{
		top:90%;
	}
	.survice_box4{
		top:14%;
		left:-8px;
	}
	.survice_sp{
		display:block;
	}
	.survice_pc{
		display: none;
	}
	.survice_sp p{
		font-size:1.6rem;
	}
	.block_left2{
		margin-left: 40%;;
	}
	.block_left3{
		margin-top: 20%;
		width: 70%;
	}
	.block_left4{
		margin: 50% auto 0;
	}
	.orange2{
		font-size:3.2rem;
		letter-spacing: 0.8rem;
	}
	.flower{
		width: 10%;
	}
	.acbox label{
		padding: 20px;
	}
	.acbox label::after{
		font-size:2.0rem;
		top:45%;
	}
	.acbox img{
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.acbox-under{
		font-size:1.6rem;
	}
	.small{
		font-size:1.4rem;
		line-height: 1.7;
	}

	.form .title{
		margin: 120px auto 30px;
	}
	.sp_iptxt label::first-of-type{
		margin-top: 50px;
	}
	.sp_iptxt input{
		width: 60%;
	}
	.marker,.marker2{
		margin-top: 20px;
		font-size:2rem;
	}
	.info{
		padding-top: 20px;
	}
	.info_price{
		margin-bottom: 20px;
	}
	footer p{
		font-size:1.6rem;
	}
	
	/*----------------------------*/
	.sp_txt,.sp_br{
		display:none;
	}
	.tab_br,.tab_txt,.sp_img{
		display: block;
	}
	.tab_sp_br{
	display: block;
}
	small{
		font-size:1.2rem;
	}
	.header_style{
		display: block;
	}
	.pc_on{
		display:none;
	}
	.tab_on{
		display: block;
	}
}
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media (min-width: 1024px) {
　
	body{
		font-size:1.8rem;
		overflow-x: hidden;
	}
	p{
		font-size: 1.8rem;
		line-height: 1.7;
	}
	a{
		font-size: 1.8rem;
		line-height: 1.7;
	}
	h1{
		font-size:4rem;
	}
	h2{
		font-size: 2.4rem;
	}
	.nav{
		margin: 100px auto;
	}
	.fa i{
		font-size:5rem;
		}
	.gray{
		font-size:1.6rem;
	}
	li{
		list-style: none;
	}
	.logo1{
		width: 100%;
		z-index: 300;
		padding-left: 30px;
	}
	
	/*-------------------------------*/
	.header{
		background-color: rgba(229,229,229,0.46);
		height: 65px;
		width: 100vw;
		position:fixed;
		top:0;
		left:-5px;
		z-index: 500;
		padding-top: 10px;
		margin-top: 0;
		margin-right: 50px;
		margin-left: 5px;
	}
	.header_style{
		display: none;
	}
	.pc_topimg{
		width: 100vw;
		margin-bottom: -5px;
		size:cover;
	}
	.pc_on{
		display: block;
	}
	
	.sp_img{
		display: none;
	}
	.pc-nav{
		display: flex;
		justify-content: space-between;
		margin: 0;
		min-width: 700px;
	}
	.pc_nav_menu{
		font-weight: bold;
		font-size:1.6rem;
		font-color:#333;
		padding-left: 2rem;
		position:relative;
		top:4px;
	}
	.pc-nav li:first-of-type{
		padding-left: 0;
	}
	.pc-nav li:last-of-type{
		padding-right: 35px;
	}
	.contact a{
		border:solid 1px #333;
		border-radius: 50px;
		padding: 10px 15px;
		margin-right: 30px;
		margin-left: 2rem;
		background: linear-gradient(to right, #E9FFAD, #DEFF4B);
	}
	
	.pc_sns a{
		color:#E3941E;
		font-size:3rem;
		margin-bottom: 10px;
		margin-right: 15px;
		position:relative;
		top:-8px;
		padding: 0;
		text-shadow: -2px -2px 1px #fff,-1px -1px 1px #fff,1px 1px 1px #fff,2px 2px 1px #fff,1px -1px 1px #fff,-1px 1px 1px #fff;
	}
	.pc_sns_a{
		font-weight:bold;
	}
	
	.pc_sns_a:last-of-type{
		margin-right: 0px;
	}
	.pc_img{
		display: block;
		background-image: url("../img/og_img.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		height: 860px;
	}
	
	.drawer-open{
		display: none;
	}
	.orange{
		font-size:3.2rem;
		letter-spacing: 0.5rem;
	}
	.key{
		font-size: 3rem;
		margin-top: 30px;
		margin-bottom: 100px;
	}
	.faceimg{
		width: 40%;
	}
	.aboutme span {
		font-size:2.4rem;
	}
	.about{
		padding-left: 30px;
		padding-right: 50px;
	}
	.about li{
		font-size:1.6rem;
	}
	.message{
		margin-top: 100px;
		margin-bottom: 100px;
		padding: 100px auto;
		background-size: contain;
		font-size:2.4rem;
		line-height: 1.9;
	}
	/*サービスpc版-----------------------*/
	.survice_sp{
		display: none;
	}
	.survice_pc{
		display: block;
	}
	
	.survise_pc_top img,.survise_pc_bottom img{
		width: 33.3vw;
		height: 20%;
	}
	.survise_pc_top{
		display: flex;
		justify-content:center;
		margin: 20px auto 0;
	}
	.survise_pc_bottom{
		display: flex;
		justify-content: center;
		margin: -60px 0 20px;
		z-index: 100;
	}
	.survice_pc_txttop{
		width: 31vw;
	}
	.survice_pc_txttop {
		margin:-80px 10px 0;
		padding: 0;
		display:flex;
		justify-content: space-between;
	}
	.pc3{
		margin-top: 10px;
	}
	.survice_pc_txtbottom img{
		width: 31vw;
		z-index: 100;
	}
	.survice_pc_txtbottom{
		margin: -110px 20% 0 22%;
		padding: 0;
		display:flex;
		justify-content: center;
	}

	.pc1,.pc2,.pc3,.pc4,.pc5{
 	 	width: 100%;
  		height: 100%;
  		cursor: pointer;
	}
	/*お客様の声*/
	.flower_pc {
		margin: 0 auto;
		width: 10vw;
	}
	.name{
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	.tab_sp_br{
		display:none;
	}
	
	.acbox label{
		width: 70%;
		margin: 0 auto;
	}
	.acbox-under{
		width: 70%;
		margin: 0 auto;
	}
	.acbox img{
		width: 20vw;
		min-width: 187px;
	}
	.voice p{
		margin-top: 50px;
	}
	.acbox-under{
		display: flex;
	}
	.pricelist-contents{
		display: flex;
		justify-content: space-between;
		list-style:none;
		margin: 0 30px;
		padding: 0;
	}
	/*料金*/
	.price img{
		width: 30vw;
		max-width: 100px;
		margin: -30px 0% -15px 70%;
		z-index:200;
	}
	.info{
		display: block;
	}
	.pricelist-contents li{
		z-index:100;
	}
	.marker{
		display: block;
		padding: 10px 0;
		font-size:2rem;
		margin: 20px auto 30px;
	}
	.marker2{
		display: block;
		padding: 10px 0;
		font-size:2rem;
		margin: 8px auto 8px;
	}
	.info{
		padding-left:10px;
		padding-right: 10px;
		margin-bottom: 20px;
	}
	.info_price{
		display: block;
		margin: auto 20px 20px 20px;
	}
	.small{
		margin-top: 30px;
	}
	.price h3{
		margin-top: 10px;
	}
	.form{
		margin: 0 50px;
	}
	.formarea input,.formarea textarea{
		padding: 20px;
	}
	.button_form{
		width: 30%;
		margin-bottom: 100px;
	}
	.form_txt{
		display: block;
		margin-top: 100px;
	}
	.footer_sns a{
		font-size:3rem;
		padding: 0 20px;
		font-weight:bold;
	}
	footer p{
		font-weight: 600;
	}
	.tab_on{
		display:none;
	}
}