@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　index
 */


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

section {
	padding: 100px 0 110px;
}
.sec-ttl{
  font-size: 3.6rem;
	margin-bottom: 100px;
	font-weight: 600;
}
.sec-ttl span{
	font-weight: 600;
	margin-bottom: 45px;
}
.sec-ttl02{
  display: block;
  color: white;
  font-size: 3rem;
  background-color: #e95513;
  border-radius: 100px;
  width: 300px;
  margin: 0 auto 20px;
  font-weight: 500;
  letter-spacing: 5px;
  line-height: 2.0;
}
.txt-answer {
	font-size: 3.6rem;
  padding: 35px 0;
  max-width: 1000px;
	width: 85%;
  background: url(../image/icon_start.png) no-repeat top left,url(../image/icon_end.png) no-repeat bottom right;
  margin: 0 auto 30px;
	font-weight: 600;
}
.txt-answer span.txt-line{
	background: linear-gradient(transparent 70%, #f3bb1e75 60%);
}
.txt-orange {
	color: #e95513;
}
.recommend {
	border-top: 10px solid #e95513;
  padding: 70px 0 80px;
	max-width: 1200px;
	width: 100%;
	margin-top: 80px;
}
.recommend-box{
	margin: 0 auto;
  display: flex;
  justify-content: space-around;
  max-width: 800px;
	width: 100%;
	margin-top: 80px
}
.recommend-ttl {
	font-size: 3.6rem;
	line-height: 1.6;
	position: relative;
	padding-bottom: 20px;
	font-weight: 500;
	display: inline-block;
}
.recommend-ttl::after {
	content: '';
  width: 100%;
  height: 4px;
  display: inline-block;
  background-color: #333;
  position: absolute;
  bottom: -10px;
  left: 0;
}
.recommend-txt {
	font-size: 2.2rem;
	margin-bottom: 20px;
	font-weight: 500;
}
.recommend-txt02 {
	font-size: 1.6rem;
	margin-bottom: 20px;
	text-align: left;
}
.recommend-txt02 a {
	text-decoration: underline;
}
.recommend-txt02 a:hover {
	text-decoration: none;
}
.recomend-item {
	width: calc((100% - 16%) / 2);
}
.bg-white {
	background-color: #fff;
}
.bg-gray {
	background-color: #f3f3f3;
}
.bg-orange {
	background-color: #fef9ec;
}
.ml_10 {
	margin-left: 10px
}
.mb_0 {
	margin-bottom: 0;
}
.mb_50 {
	margin-bottom: 50px;
}
.mb_60 {
	margin-bottom: 60px;
}
.txt_c{
	text-align: center;
}
.br_tblt,.br_sp {
	display: none;
}


@media screen and (min-width: 769px) {
.br_pc {
	display: block;
}
.br_sp_519 {
	display: none;
}
}

@media screen and (max-width: 768px) {
section {
  padding: 50px 0 60px;
}
.sec-ttl {
  margin-bottom: 50px;
  font-size: 2.4rem;
}
.sec-ttl span {
  margin-bottom: 20px;
  font-size: 1.8rem;
  letter-spacing: 2px;
}
.sec-ttl02 {
	font-size: 1.8rem;
  max-width: 160px;
  width: 60%;
  letter-spacing: 2px;
	line-height: 2.2;
}
.txt-answer {
	font-size: 2.4rem;
  padding: 10px 0;
  background-size: 5%;
}
.recommend {
	padding: 30px 20px;
  margin-top: 40px;
  width: 98%;
  margin-right: auto;
  margin-left: auto;
}
.recommend-box {
	width: 100%;
	margin: 30px auto;
	display: block;
}
.recommend-ttl {
  font-size: 2.2rem;
  padding-bottom: 5px;
	margin-bottom: 30px;
}
.recommend-ttl::after {
  width: 100%;
  height: 3px;
  bottom: -5px;
  left: 0;
	display: inline-block;
}	
.recommend-txt{
	font-size: 1.6rem;	
	margin-top: 30px;
	margin-bottom: 20px;
}
.recommend-txt:nth-child(2){
	argin-top: 30px;
}
.recommend-txt02{
	font-size: 1.4rem;	
}
.recomend-item {
	width: 80%;
	margin: 0 auto;
}
.br_pc {
	display: none;
}
.br_tblt {
	display: block;
}
.pc-only{
	display: none;
}
.br_sp {
	display: block;
}
.br_sp_519 {
	display: none;
}
.mt_30_sp{
	margin-top: 30px;
}
}



@media screen and (max-width: 519px) {
.txt-answer {
    width: 100%;
}
.txt {
	text-align: left;
}	
.sec-ttl {
	font-size: 2.0rem;
}
.txt-answer{
	font-size: 2.0rem;
}
.recommend-txt{
	margin-bottom: 10px;
}
.recommend-txt02{
	margin-bottom: 10px;
}
.br_tblt {
	display: none;
}
.br_sp_519 {
	display: block;
}
}


/* topへ戻るボタン
-----------------------------------------------------------------*/
body.web-kasika .pagetop {
	bottom: 85px;
}
@media print, screen and (min-width: 768px){
body.web-kasika .pagetop {
	bottom: 93px;
}
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* sec_top
-----------------------------------------------------------------*/
.sec_top {
	background-image: url("../image/top_bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 70px 0;
}

.title_box {
	display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0 auto;
  max-width: 1300px;
  width: 100%;
}
.ttl_img_man {
  width: 180px;
}
.ttl_img_man img{
 position: relative;
 top: 20%;
}

.question_box {
  width: 520px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  column-gap: 3%;
  row-gap: 5px;
  padding: 0px 10px;
}
.balloon-left {
	width: calc(97% / 2);
}
.balloon-left a {
  position: relative;
  display: block;
  color: #0f394e;
  font-size: 1.6rem;
  background: #FFF;
  border: solid 3px #0f394e;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  margin-right: 15px;
  padding: 20px 0;
  width: 100%;
	height: 120px;
	line-height: 1.5;
}

.balloon-left a.adjust {
  padding: 7px 0;
}

.balloon-left a span {
	margin-top: 5px;
  display: block;
}
.balloon-left a span img {
	width: 10%;
  max-width: 16px;
  margin-left: 16px;
	padding-top: 5px;
}
.balloon-left a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -18px;
  margin-top: -10px;
  border: 9px solid transparent;
  border-right: 9px solid #FFF;
  z-index: 2;
}
.balloon-left a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  margin-top: -12px;
  border: 11px solid rgba(255,255,255,0);;
  border-right: 11px solid #0f394e;
  z-index: 1;
}

.balloon-left a:hover {
	opacity: 0.7;
	transition: 0.6s;
}

.ttl_img_kasika {
	text-align: center;
  width: 600px;
}
.ttl_img_kasika .img_kaiketsu {
	width: 100%;
  max-width: 600px;
}
.ttl_img_kasika .img_kasika {
  margin-top: 30px;
	width: 80%;
  max-width: 480px;
}


@media screen and (max-width: 1030px) {
.balloon-left a {
  font-size: 1.4rem;
}
}


@media screen and (max-width: 768px) {
.title_box {
	max-width: 768px;
	flex-wrap: wrap;
	justify-content: center;
	width: 95%;
}
.ttl_img_man{
	order: 1;
	width: 30%;
	max-width: 180px;
	margin: auto 0 -2% auto;
}
.question_box {
	order: 3;
	width: 90%;
	margin-top: 25px;
	}
.ttl_img_kasika{
		order: 2;
		width: 70%;
	}
.ttl_img_kasika .img_kasika{
	max-width: 80%;
	} 
.balloon-left a {
	font-size: 1.6rem;		
	margin-top: 1.5rem;
	}
.balloon-left a:before {
	top: 112%;
  left: calc(50% - 11px);
  margin-top: -15px;
  border: 12px solid rgba(255,255,255,0);
  border-top: 13px solid #fff;
  z-index: 2;
}
.balloon-left a:after {
	top: 112%;
  left: calc(50% - 13px);
  margin-top: -12px;
  border: 14px solid rgba(255,255,255,0);
  border-top: 14px solid #0f394e;
  z-index: 1;
}

}

@media screen and (max-width: 519px){
.question_box{
	width: 100%;
	}
.balloon-left a {
 font-size: 1.4rem;
 margin-top: 1.5rem;
}
.balloon-left a.adjust {
	padding: 13px 0;
}
}


/* sec01
-----------------------------------------------------------------*/
.sec01 {
  text-align: center;
}
.sec01 .txt{
  font-size: 1.8rem;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
.sec01 .txt {
    font-size: 1.6rem;
    width: 95%;
    margin: 0 auto;
}
.sec01 .pic {
  margin: 40px auto 40px;
  width: 100%;
}
}


/* sec02
-----------------------------------------------------------------*/
.sec02 {
  text-align: center;
}
.sec02 .txt {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 60px;
}
.sec02 .recommend-txt02 {
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 60px;
	text-align: center;
}


@media screen and (max-width: 768px) {
.sec02 .txt {
    font-size: 1.6rem;
    width: 95%;
    margin: 0 auto 30px;
}
#sec02 .txt img {
    display: block;
    width: 80%;
    text-align: center;
    margin: 10px auto;
}
.sec02 .recommend-ttl {
	margin-bottom: 60px;
}
.sec02 .recommend-txt02 {
  font-size: 1.4rem;
  margin-bottom: 20px;
}
#sec02 .recommend img {
		width: 80%;
	}
}


@media screen and (max-width: 519px){
.sec02 .recommend-txt02 {
	text-align: left;
	margin-bottom: 10px;
}
}
/* sec03
-----------------------------------------------------------------*/

.sec03 {
  text-align: center;
}
.sec03 .recommend-box {
  width: 100%;
  display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
	align-items: flex-start;
}
.sec03 .recommend-box img{
	width: 20%;
	max-width: 180px;
}
.sec03 .recommend-box02{
  text-align: left;
	width: 75%;
	max-width: 600px;
}
.sec03 .recommend-txt {
	margin-bottom: 10px;
}
.sec03 .recommend-txt02 {
	margin-bottom: 50px;
}
.sec03 .recommend-txt02.hight-ajust{
	margin-bottom: 0;
}


@media screen and (min-width: 769px) {
.sec03 .recommend-box img{
	margin-top: 10px
}	
}


@media screen and (max-width: 768px) {
.sec03 .txt {
  font-size: 1.6rem;
}
.sec03 .recommend-box{
	display: block;
}
.sec03 .recommend-txt {
	margin-top: 10px;
	text-align: center;
		}
.sec03 .recommend-box02 {
	width: 100%;	
	max-width: 600px;
	margin-left: auto;
	margin-right: auto
}	
}

@media screen and (max-width: 519px) {
.sec03 .recommend-txt {
	text-align: left;
}
}


/* sec04
-----------------------------------------------------------------*/

.sec04 {
  text-align: center;
}
.sec04 .recommend-box {
	max-width: 1000px;
	justify-content: space-between;
}
.sec04 .recomend-item-01 {
  width: calc((100% - 40px) / 2);
}
.sec04 .recomend-item-torikago {
	width: calc((100% - 120px) / 4);
}
.sec04 .recommend-txt-torikago{
	font-size: 1.6rem;
	margin-bottom: 10px;
}
.triangle-gray {
	position: relative;
}
.triangle-gray::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 80px solid rgba(255, 255, 255, 0);
  border-left: 80px solid #aaa; /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}
.triangle-orange {
	position: relative;
}
.triangle-orange::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 80px solid transparent;
  border-left: 80px solid #e95513; /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}

@media screen and (max-width: 768px) {
.sec04 .txt {
  font-size: 1.6rem;
}
.sec04 .recommend-box {
	width: 100%;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
	margin-bottom: 0;
}
.sec04 .recomend-item-01 {
	width: 48%;
}
.sec04 .recomend-item-torikago {
	width: calc((100% - 4%) / 2);
	
}
.triangle-gray::before{
	border-bottom: 40px solid rgba(255, 255, 255, 0);
  border-left: 40px solid #aaa; /* ラベルの色はここで変更 */
}
.triangle-orange::before {
	border-bottom: 40px solid transparent;
  border-left: 40px solid #e95513; /* ラベルの色はここで変更 */
}
}

@media screen and (max-width: 519px) {
.sec04 .recommend-txt-torikago {
	font-size: 1.4rem;
	line-height: 1.4;
}

.sec04 .recommend-txt02{
	margin-bottom: 0;
}
.sec04 .recomend-item-01 {
    width: 100%;
}
#sec04 .recomend-item-01 img{
	margin-bottom: 10px;	
}
.sec04 .recomend-item-torikago{
  width: 48%;
  margin-bottom: 20px;
	margin-top: 0;
}
.sec04 .recommend-txt-torikago.mt_30_sp{
	margin-top: 0;
}	
}


/* sec05
-----------------------------------------------------------------*/
.sec05 {
  text-align: center;
}
a.btn-inquiry{
	background:  url("../image/icon_inquiry.png") no-repeat center right 5% #f18b00;
  display: block;
  padding: 10px;
  width: 400px;
  margin: 0 auto;
  border-radius: 30px;
	color: #fff;
	font-size: 2.2rem;
}
a.btn-inquiry:hover {
  opacity: 0.7;
  transition: 0.6s;
}

@media screen and (max-width: 768px) {
.sec05 .txt {
  font-size: 1.6rem;
}
a.btn-inquiry{
	width: 60%;
	max-width: 250px;
	font-size: 1.6rem;
}
}


/* sec06
-----------------------------------------------------------------*/

.sec06 {
  text-align: center;
}
.sec06 .txt {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 50px;
}
.sec06 .txt.mb_0 {
  margin-bottom: 0;
}
.sec06 .recommend-box,.sec06 .recommend-box02 {
  max-width: 1000px;
  justify-content: space-between;
	margin: 0 auto;
	display: flex;
}
.sec06 .recomend-item-01 {
  width: calc((100% - 40px) / 2);
}
.sec06 .analysis {
	border-top: none;	
}
.sec06 .recommend-box-anarysis {
	width: 100%;
	max-width: 800px;
	display: block;
	margin: 0 auto;
}

.sec06 .recommend.analysis .recommend-box {
	width: 100%;
	max-width: 1000px;
	display: block;
}
.sec06 .recommend.analysis .recommend-box-flex{
	width: 100%;
	max-width: 1000px;
	display: flex;
	justify-content: space-between;

}
.sec06 .recommend.analysis .recommend-txt,.sec06 .recommend.analysis .recommend-txt02 {
	display: block;
	text-align: center;
}
.sec06 .recommend-txt {
	margin-top: 60px;
}


@media screen and (max-width: 768px) {
.sec06 .txt {
  font-size: 1.6rem;
}
.sec06 .recommend-txt {
	margin-top: 30px;
}
.sec06 .recommend-box02{
	margin-top: 30px;
	font-size: 1.4rem;
	width: 100%;
}
.sec06 .recommend-box-anarysis .txt{
	font-size: 1.4rem;
	margin-bottom: 30px;
}
.sec06 .recommend-box-anarysis .txt.mb_0{
	margin-bottom: 0px;
}
.sec06 .recomend-item-01 {
	width: 48%;
	}
}

@media screen and (max-width: 519px) {
.sec06 .recommend-box02{
  margin-top: 10px;
}	
.sec06 .recommend-box02.adjust{
  margin-top: 10px;
	display: block;
}	
.sec06 .recommend-box02.adjust .recomend-item-01 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.recomend-item-01.mb_20_sp{
	margin-bottom: 20px;
	}
.sec06 .recommend-txt02	{
	width: 100%;
	line-height: 1.4;
	}

}	
/*
.sec06 .recommend-txt02.mt_20{
	margin-top: 20px;
	}
	*/



/* sec07
-----------------------------------------------------------------*/
.sec07 {
  text-align: center;
}
.sec07 .txt {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 60px;
}
.sec07 .recommend-box {
	max-width: 1000px;
	margin: 60px auto 0;
}
.sec07 .recommend-txt02 {
	text-align: center;
}
.sec07 .recomend-item {
	width: calc((100% - 80px) / 3);
}

@media screen and (max-width: 768px) {
.sec07 .recommend-box {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
	margin-top: 30px;
}
.sec07 .txt {
	font-size: 1.4rem;
	margin-bottom: 30px;
}
.sec07 .recomend-item {
	width: 48%;
	margin: 30px 0 0;
}
}

@media screen and (max-width: 519px) {
.sec07 .recommend-box {
 margin-top: 10px;
}
.sec07 .recommend-txt {
  margin-bottom: 10px;
	text-align: left;
}
.sec07 .recommend-txt02 {
  line-height: 1.4;
}
.sec07 .recomend-item{
	margin: 10px 0;
}
}


/* floating-banner
-----------------------------------------------------------------*/

.floating-banner {
  position: fixed;
  z-index: 999;
  bottom: 0;
  background-color: #f18b00;
  width: 100%;
}
.floating-banner a:hover {
	opacity: 0.6;
	transition: 0.6s;
}
.floating-banner .bnr-txt {
	font-size: 1.8rem;
}
.banner-close {
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	padding: 4px 8px;
	border: none;
	background-color: #fff;
	cursor: pointer;
}
.banner-close + a {
	position: relative;
	z-index: 1;
}
.arrow-right {
	position: relative;
	padding-left: 20px;
}
.arrow-right::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
	right: -26px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.bnr-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 92%;
  margin: 0 auto;
  padding: 7px 8%;
  background: #f18b00;
}
.bnr-inner > div h2 {
  margin: 0 0 5px;
	font-size: 3rem;
	color: #fff;
}
.bnr-inner > div p {
  display: inline-block;
  padding: 4px 20px 0 35px;
  background: url("../image/icon_contact.png") left center no-repeat;
  background-size: 20px auto;
}
.bnr-inner > div p::after {
  right: 0;
  border-color: #fff;
}
.bnr-inner > p {
  width: 42%;
}

@media print, screen and (min-width: 960px) {
.bnr-inner {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  max-width: 1200px;
  padding: 17px 7%;
}
.bnr-inner > div {
  margin-right: 4%;
}
.bnr-inner > div h2 {
  margin: 0;
}
.bnr-inner > div p {
  position: absolute;
  top: calc(50% - 0.8em);
  right: 8.5%;
  padding: 4px 28px 0 48px;
  background-size: 26px auto;
}
.bnr-inner > p {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: auto;
  padding-right: 180px;
}
}

@media print, screen and (max-width: 768px) {
.bnr-inner > div h2 {
 font-size: 2rem;
}
.floating-banner .bnr-txt {
  font-size: 1.2rem;
	line-height: 1.6;
}
}