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

.cl{clear: both;}
.cnt{text-align: center;margin:0 auto;display: block;}
.col_2,.col_4{display: flex;justify-content: space-between;}
mark{background-image: linear-gradient(to top,#ffff99 80%,transparent 80%);}
.mark2{background: linear-gradient(transparent 50%, #EEE 0%);}
.red{color:#bd0a07; }

#main{position: relative;padding: 0;margin: 0}
#main h2{font-size: 3.6rem;color: #000;
	padding-bottom: 2em;
	position: absolute;z-index: 3;
	text-shadow: 3px 4px 4px rgba(0, 0, 0, 0.4);
	top:380px;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}
#main li p{font-size: 1.8rem;color: #444;
	line-height: 130%;
	position: absolute;z-index: 4;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
	top:500px;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}
#main li:last-child{margin-top: -400px;}

.txtb{font-size: 24px;margin:20px auto 0;text-align: left;
	border: solid 4px #ddd;width: 500px;padding: 30px 20px;
box-shadow: 0 0 8px gray;}
.txtb2{font-size: 24px;text-align: left;
	padding: 30px 20px;
}

.f14rem{font-size: 1.45rem;font-weight: bold;letter-spacing: 2px;}
.f11rem{font-size: 1.1rem;}

figcaption{font-size: 15px;text-align: center;line-height: 140%;margin-top:10px;}

.logo{ float: left;}
.logo img {width: 300px;margin-right: 15px;margin-top: -10px; display: block;}
.contact{border-radius:25px;padding: 10px;border: solid 2px #808080;width: 200px;text-align: center;}
.shadow{filter:drop-shadow(4px 3px 3px #cccccc);}
#main ul{position: relative;overflow: hidden;}
.btn_top{background: #444;width: 350px;padding: 20px 20px;text-align: center;border-radius: 20px;position: absolute;top:80%;left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}
.btn_top a{color: #FFF;}
.btn_top a:hover{color: antiquewhite;}

.bxslider{width: 100%;}
.bxslider li{float: left; position: relative;}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝アニメーション＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*斜めに光る*/
.about-widget :hover img{opacity: 1;
  -webkit-animation: flash 2.0s;
  animation: flash 2.0s;
}
@-webkit-keyframes flash {
  0% {
    opacity: .6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
/*ズーム*/
.contact a {
  display: inline-block;color: #000;
}
.contact a:hover {color: #868686;
   -webkit-animation: zoom .3s;
  animation: zoom .3s;
}
@-webkit-keyframes zoom {
  50% {-webkit-transform: scale(1.05); }
}
@keyframes zoom {
  50% {transform: scale(1.05); }
}

.marker-animation.active{
background-position: -100% 0.5em;
}
.marker-animation {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,204) 50%);
background-repeat: repeat-x; background-size: 200% .8em;
background-position: 0 0.5em;
transition: all 5s ease;/*速度*/
font-weight: bold;
}

h2{position: relative; font-size: 2.4rem;color:#505050;font-weight: bold;text-align: center;margin: 20px auto 30px;  }
h2 span { position: relative; z-index: 2;  display: inline-block;  margin: 0 2.5em;  padding: 0 1em;  background-color: #fff;  text-align: left;}
h2:before { position: absolute; top: 50%;z-index: 1; content: '';  display: block;  width: 100%;  height: 1px;  background-color: #ccc;}
h3{color: #505050!important;font-weight: bold;}

/*slide-text*/
.slide-heading{text-shadow: 6px 6px 9px #888;margin-bottom:0px; }
.slide-heading span{color:#fff; }

.slide-txt{text-shadow: 1px 1px 2px #808080;}

.navigation-area{float: right;}
.main-menu{display: flex;}
.main-menu li.has-submenu a:hover{text-decoration: underline;}

.about-content p span {	color: #bd0a07!important}
.about-area-wrapper{background: #fff;z-index: 2;}

.book{width: 100%;margin:0 auto 15px;
	display: flex;justify-content: space-between;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */}

.book div{width: 25%;}

.book img{width: 150px;height: 218px; }

#book,.about-area-wrapper {padding: 60px 0;margin:0 auto;}
#book .sd{margin-bottom: 13px; text-shadow: 2px 2px 3px #4d4d4d;text-align: center;}
.sideL{float: left;width: 49%;}
.sideL img{margin:0 auto;display: block}
.sideR{float: right;width: 49%;}
.sideR img{margin:0 auto;display: block}
#book .w_box{margin:0 auto;background: #fff;width:100%;max-width: 1000px;overflow: hidden;padding: 20px; }
#book .w_box p{text-align: center;}
#book h2{text-align: center;margin-top: 20px;}
#book mark span{font-weight: bold;font-size: 18px;text-align: center;background-image: linear-gradient(to top,#ffff99 80%,transparent 60%);position: absolute;left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}


/*==========================7つのサービス=================================*/

#nana,#voice,#kiyaku,#contact,#form{padding: 60px 0;overflow: hidden;}

#nana h3{text-align: left!important;font-size: 1.9rem; margin-top: 20px;line-height: 130%;padding-left: 2em; text-indent: -2em;}
h3 .point{background-color: #bd0a07; border-radius: 50%;font-size: 1.6rem; padding:7px 10px; color: #fff;margin-right: 10px; }
#nana h4{text-align: left!important;font-size: 1.5rem; border-bottom: solid 3px gray; padding-bottom: 5px; margin-bottom: 15px;
	position: relative; line-height: 130%;font-weight: bold;color: #444;}
#nana h4:before {content:  '';  width: 100px; height: 3px; background-color: #bd0a07; display:block;position:absolute; left: 0; bottom: -3px; }
#nana h5{text-align: left!important;font-weight: bold;} 
#nana h5 span{background: linear-gradient(transparent 50%, #EEE 0%);}
#nana .free img{position: relative; left: 50%; top:-90px;  width: 240px;} 

#nana .box{border: solid 3px #AA9A00;margin: 20px auto 30px;padding: 1.5em;display: block;background: #fff8e8;overflow: hidden;border-radius: 15px;}
#nana .box p{font-size: 18px;}

#nana .flex{display: flex; justify-content: space-between; align-items: flex-start;}
#nana .flex p{margin-right: 25px;line-height: 200%!important;}
#nana ul{margin:20px 20px 20px 30px;width: 70%;}
#nana .sq li{list-style: square;margin-bottom: 3px;font-size: 1.2rem;}
#nana .photo img{box-shadow: 3px 3px 5px #dfdfdf;}
#nana .pright{position: absolute;right: 10px;border-bottom: 10px;}

#nana .pflex {display: flex; justify-content: space-around; max-width: 800px;margin:0 auto;}
#nana figure{font-size: 12px; text-align: left; }
#nana .col_4 .name{text-align: center;font-size: 80%;}

/*==========================推薦者の声=================================*/
#voice h2 span,#kiyaku h2 span {background-color: #f8f9fc;}
#voice h3 {font-size: 1.7rem;background: url("/lp/accsz/test/img/rap.png") no-repeat;text-align: left;padding-left: 100px;}


#voice .txtb　span{font-weight: bold;}
#voice .flex{display: flex; display:-webkit-flex;justify-content: space-around; max-width: 1200px;}
#voice .red_box{flex-basis: 45%;background:#fff;border: #A72126 7px solid;padding: 20px 15px 10px;margin-bottom: 30px;border-radius: 20px; }
#voice h5{position: relative;display: inline-block; margin-bottom: 1em;}
#voice h5:before{content: '';  position: absolute;  bottom: -5px;  display: inline-block;
  width: 200px;  height: 1px;  left: 50%; -webkit-transform: translateX(-50%);
  transform: translateX(-50%);  background-color: #A72126; }
#voice .txt2 {display: inline-block; margin: 0 10px 20px 0; vertical-align: top; margin-left: 10px;width: 60%;}
#voice .img2 {overflow: hidden; display: inline-block;width: 180px;vertical-align:center;}

#book h4{text-align: center;margin-top: 5px;}
.rec{display: flex;	flex-wrap: wrap;justify-content: space-between;;margin-bottom: 20px;background: #fff;padding:25px 20px 20px;max-width: 1000px;margin:0 auto; }
.rec .box{/*background: url("/lp/accsz/test/img/naya_bk2.png") no-repeat;*/width:210px; margin:0 auto; }

.box2{margin-right: 20px;width: 70%}
.box2 ul{position: relative;width: 550px;
  display: inline-block;padding: 30px 40px;background: #f3f3f3;box-shadow: 3px 3px 5px #dfdfdf;border-radius: 20px;  }
.box2 ul::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50px;
  margin-top: -15px;
  border: 25px solid transparent;
  border-right: 25px solid #f3f3f3;
}



.rec .box2 li{font-size: 19px;line-height: 160%;margin-bottom: 8px;position: relative;margin-left: 20px;text-align: left;}
.box2 ul li::after {
  display: block;  content: '';
  position: absolute;  top: .5em; left: -1em;
  width: 14px;  height: 6px;
  border-left: 2px solid #bd0a07;  border-bottom: 2px solid #bd0a07;
	-webkit-transform: rotate(-45deg);  transform: rotate(-45deg);}

.rec .box .man{margin-top: 140px; text-align: center;font-size: 20px;color: #fff;line-height: 120%;font-weight: bold;}
.rec .box .man span{font-size: 120%;}
.rec .box .naya{margin-top: 15px; text-align: center;font-size: 16px;color: #fff;line-height: 130%;}
.rec .ya{margin-top: 130px;}

#kiyaku textarea{display: block;margin:0 auto;width: 80%;overflow:scroll;padding:15px 10px; }

#contact p a{text-decoration: underline;}
#contact p a:visited{color:	#888; }

/*================Zoom==============================*/

.imgzoom{
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.imgzoom a{
transition: all 2s;
}
.imgzoom a:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.mt100{margin-top: 100px!important;}
.mt80{margin-top: 80px!important;}
.mt40{margin-top: 40px!important;}
.mt60{margin-top: 60px!important;}	
.mt-40{margin-top: 0px!important;}
.mt-60{margin-top: -60px!important;}
.mt-70{margin-top: -70px!important;}
.mt3em{margin-top:3em!important}

.pc {display: block!important;}
.sp {display: none!important;}
@media print, screen and (max-width: 1000px) {
.logo img {width: 240px;}	
	.main-menu{font-size: 0.7rem; }	
}

@media screen and (max-width: 768px) {
.pc {display: none!important;}
.sp {display: block!important;}

.menu { float: none;}
.main-menu { max-width: 85%;}	
.container {width:90%;padding-right: 10px; padding-left: 10px;}
    
	
.header-area{width: 100%;}
.header-action{margin-top: -15px;}
.header-area.sticky .header-action{margin-top: 7px;}
	
.logo img {width: 280px; margin-right: 0px}	
	
#book{padding: 20px 0;}	
.rec {width: 100%;margin:0 auto; padding: 10px;display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;}
.rec .box{margin:0 auto 25px;display: block; }
.rec .box2,.rec .ya{margin:0 auto;display: block; }		
.rec .box .man {margin-top: 0px;padding-top: 135px;	}
.rec .ya{transform:rotate(90deg);margin-top: 0;}	
.box2 {width: 100%;margin-right: 0px;}
.box2 ul {width: 93%; padding: 30px 25px;display: block;}
/*.box2 ul::before {display:none;}*/
.box2 ul::before {
top: -30px;
  left: 50%;
  margin-left: -25px;
  border: 25px solid transparent;
  border-bottom: 25px solid #f3f3f3;}		

#nana .box p{width: 100%;margin:0 auto;font-size: 16px;}	
#nana h3 {font-size: 1.5rem;}	
#nana ul {margin: 10px 10px 10px 15px; width: 100%;}
#nana .flex{display: block;}
#nana .photo img{margin:0 auto;display: block;}	
#nana .free img{position: relative; left: 40%; top:0px;width: 220px;} 	
#nana .flex p{margin-right: 0px;}	

#voice .flex{display: block;}	
#voice .img2{margin:0 auto;display: block;text-align: center;}
#voice .txt2 {margin-left: 0px;  width:100%;}
	form{margin-right: 15px;}
	
.mt100{margin-top: 10px!important;}
.mt80{margin-top: 10px!important;}	
.mt40{margin-top: 10px!important;}
.mt60{margin-top: 10px!important;}	
.mt3em{margin-top:0.5em!important}	
.mt-70{margin-top: 10px!important;}	
	
h2{font-size: 1.6rem;}	
.h3, h3 {font-size: 1.4rem!important;}	
	
/*=============================================*/	
}

@media screen and (max-width: 480px) {
.col_2,.col_4{display: block;justify-content: center;}	
	
#nana, #voice, #kiyaku, #contact, #form {
    padding: 30px 0; overflow: hidden;}
#book, .about-area-wrapper {
    padding: 30px 0;}

	
#nana .free img{position: relative; left: 20%; top:0px;width: 190px;} 
#nana .flex p{line-height: 140%!important;}	
.sideL,.sideR{width: 100%;float: none;}	
#kiyaku textarea{display: block;margin:0 auto;width: 99%;}	
#nana figure {font-size: 11px;}
#nana h2 span,#about h2 span,#contact h2 span,#kiyaku h2 span,#form h2 span{margin: 0 0em;}

.book{}	
.txtb{width: 88%;font-size: 20px;}
#book .w_box {padding: 20px 20px 20px 5px;}
	
.rec .box2 li {font-size: 16px;	}
.box2 ul{padding: 20px 0px 15px 10px;}	
	#book h4 {position: relative;}	
#book mark span {font-size: 13px;width: 100%;font-weight: normal;}
	
.header-action [class*=btn-]{margin-right: 5px;}	
	
.bx-wrapper img {box-sizing: border-box;background-size:cover;}	
.bx-wrapper{height: 300px!important;}
#main h2 {top:70px;font-size: 2rem;width: 100%p;}	
	
	
.mt-40{margin-top: 10px!important;}	
.mt-60{margin-top: 10px!important;}
.mt-70{margin-top: 10px!important;}		
/*=============================================*/	
}