@charset "utf-8";

/* デザイン(PC) */
@media screen and (min-width:768px) {
body * {
  box-sizing: border-box;
}
    img {
        max-width: 100%;
        height: auto;
        width: auto;
    }
	#fv-pc{
		width : 100%;
		background-image : url(../image/fv-bg.png);background-repeat : no-repeat;background-position : right center;
	}
	#fv-sp{
		display : none;
	}
	.fv-img{
		display : none;
	}
	.fv_pc{
		width : 70%;
		margin : 0 auto;
		padding : 50px 0px;
		text-align : left;
	}
	.fv-ttl-1{
		font-size : 24px;
		color : #8e5b13;
		padding : 15px 0px;
	}
	.fv-ttl-2{
		font-size : 24px;
		line-height : 34px;
		color : #8e5b13;
		padding : 15px 0px;		
	}
	.fv-ttl-3{
		font-size : 40px;
		line-height : 34px;
		color : #8e5b13;
		padding : 15px 0px;		
	}
	.fv-ttl-3 span{
		font-size : 28px;
	}
	.fv-catch{
		font-size : 77px;
		padding : 20px 0px;
		color : #8e5b13;
	}
	.fv-ttl-4{
		font-size : 24px;
		color : #333;
	}
.fv-box {
    border: 1px solid #333;
    padding: 10px 20px;
    margin: 15px 10px 0 0; /* 左右の余白を10pxに変更 */
    display: inline-block; /* ボックスを横並びに配置 */
}

	.area-ttl-1{
		font-size : 38px;
		line-height : 44px;
		color : #8e5b13;
		margin : 20px 0px 35px 0px;
		text-align : center;
	}
	.area-ttl-1-white{
		font-size : 38px;
		line-height : 44px;
		color : #fff;
		margin : 20px 0px 70px 0px;
		text-align : center;
	}
	.area-ttl-1-blue{
		font-size : 38px;
		line-height : 44px;
		color : #3c92a7;
		margin : 30px 0px;
		text-align : center;
	}
	.tokutei-ttl-1{
		font-size : 38px;
		line-height : 44px;
		color : #8e5b13;
		margin : 20px 0px 35px 0px;
		text-align : center;
	}
	.tokutei-ttl-1{
		font-size : 38px;
		line-height : 44px;
		color : #8e5b13;
		margin : 20px 0px 35px 0px;
		text-align : center;
	}
	.tokutei-ttl-1{
		font-size : 38px;
		line-height : 44px;
		color : #8e5b13;
		margin : 20px 0px 35px 0px;
		text-align : center;
	}
.area-12-subttl {
		font-size : 26px;
		line-height : 38px;
		color : #333;
		margin : 40px 0px 30px 0px;
		text-align : center;
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
}

.area-12-subttl:before, .area-12-subttl:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

.area-12-subttl:before {
  border-left: solid 1px #333;
  border-top: solid 1px #333;
  top:0;
  left: 0;
}
.area-12-subttl:after {
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  bottom:0;
  right: 0;
}
.area-12-subttl-2 {
		font-size : 26px;
		line-height : 38px;
		color : #333;
		margin : 40px 0px 30px 0px;
		text-align : center;
}
	.area-ttl-2{
		font-size : 38px;
		line-height : 44px;
		color : #8e5b13;
		margin : 20px 0px 35px 0px;
		text-align : left;
	}


	.main{
		width : 820px;
		margin : 20px auto;
		font-size : 18px;
		line-height : 34px;
	}
/*CVエリア*/
	.cv_area{
		width : 100%;
		padding : 40px 0px;
		text-align : center;
		background-image : url(../image/cv_area_bg.jpg);background-repeat : no-repeat;background-position : center center;
		font-size : 24px;
		color : #ffffff;
	}
	.tel-ttl{
		width : 240px;
		padding : 8px 20px;
		margin : 0 auto;
		text-align : center;
		border : 1px solid #fff;
		margin-bottom : 15px;
	}
	.cv-tel{
		font-size : 36px;
		margin : 15px 0px;
	}
	.cv-message{
		font-size : 16px;
		line-height : 30px;
	}
/*エリア１*/
	.area-1{
		background : #fff;
		width : 100%;
		padding : 70px 0px;
	}
/* サブタイトルに横線を追加 */
.area-1-sub-ttl{
	font-size : 28px;
	margin-bottom : 30px;
	color : #5a3e17;
	}
.area-1-sub-ttl::before {
    content: ''; /* 疑似要素のコンテンツを空にする */
    border-top: 1px solid #5a3e17; /* 上部に横線を設定 */
    width: 50px; /* 線の長さを設定 */
    display: inline-block; /* 疑似要素をインラインブロックとして表示 */
    vertical-align: middle; /* 縦中央に配置 */
    margin-right: 10px; /* テキストと線の間のスペースを設定 */
}
/* Flexコンテナを設定 */
.area-1-in {
    display: flex;
    width: 1280px;
    margin: 70px auto 30px;
}

/* 左側のテキスト要素 */
.text-left {
    flex: 1;
    padding: 0px 30px;
    font-size: 18px;
    line-height: 30px;
    display: flex; /* Flexコンテキスト内で内部のアイテムを配置 */
    flex-direction: column; /* テキストを縦に配置 */
    justify-content: center; /* 縦方向の中央揃え */
}

.img-right {
    flex: 1;
    padding: 0px 30px;
    text-align: center; /* 右寄せ */
}

/* 左右逆 */
.text-left-r {
    flex: 1;
    padding: 0px 30px;
    font-size: 18px;
    line-height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 2; /* テキストを右側に移動 */
}
.img-right-r {
    flex: 1;
    padding: 0px 30px;
    text-align: right;
    order: 1; /* 画像を左側に移動 */
}
	
/*エリア２*/
	.area-2{
		width : 100%;
		padding : 40px 0px 35px 0px;
		background : #f8f1fe;
	}
	.area-2-in{
		width : 1080px;
		margin : 20px auto;
		padding : 30px 0px;
		font-size : 18px;
		line-height : 32px;
	}

/*エリア３*/
	.area-3{
		width : 100%;
		padding : 70px 0px;
		background : #fff;
	}
	.area-3-in{
		width :  800px;
		margin : 20px auto;
	}
/*エリア４*/
	.area-4{
		width : 100%;
		padding : 70px 0px;
		background : #ff99cc;
	}
.chikara_box {
  width: 1280px;
  box-sizing: border-box;
  margin: 0px auto;
  display: flex; /* Flexboxを有効にする */
  flex-wrap: wrap; /* 要素が折り返すように設定 */
}
.chikara_box li {
  float: left;
  width: 32.3%;
  padding: 10px 15px;
  list-style: none;
  background: #fff;
  margin: 5px;
  flex: 1; /* 高さを揃える */
}
	.chikara_img{
		text-align : center;
		margin-top : -30px;
	}
	.chikara_ttl{
		font-size : 26px;
		text-align : center;
		margin-top : 0px;
		padding-top : 30px;
		color : #791748;
	}
	.chikara_text{
		padding : 15px;
		font-size : 17px;
		line-height : 28px;
	}
/*エリア５*/
	.area-5{
		width : 100%;
		padding : 70px 0px 30px 0px;
		background : #ffffff;
	}
.kodawari_box-1{
		width : 1080px;
		margin : 30px auto;
		border : 1px solid #cc99ff;
		padding : 25px;
	}
	.kodawari-left-1{
		float : left;
		width : 48.2%;
		margin : 0px;
	}
	.kodawari-right-1{
		float : right;
		width : 48.2%;
		margin : 0px;
	}
	.kodawari_box-2{
		width : 1080px;
		margin : 30px auto;
		border : 1px solid #cc99ff;
		padding : 40px;
	}
	.kodawari-left-2{
		float : right;
		width : 48.2%;
		margin : 0px;
	}
	.kodawari-right-2{
		float : left;
		width : 48.2%;
		margin : 0px;
	}

	.area5-sub-ttl{
		font-size : 24px;
	color : #fff;
	background : #833ec8;
		padding : 10px;
	}
	.area5-text{
		padding : 20px 0px;
		font-size : 17px;
		line-height : 30px;
	}
/*エリア６*/
	.area-6{
		width : 100%;
		padding : 30px 0px;
	}
	.area-6-2{
		width : 100%;
		background : #fde4f1;
		padding : 40px 0px 20px 0px;
		margin-top : 50px;
	}	
	.area-6-in{
		width : 80%;
		background : #fde4f1;
		padding : 40px 80px;
		margin : 0px auto;
	}
dl.reki {
  display: flex;
  flex-wrap: wrap;
}
dl dt {
  width: 10%;
	border-bottom : 1px dotted #555151;
	padding-bottom : 2px;
	margin-top : 7px;
}
dl dd {
  width: 90%;
	border-bottom : 1px dotted #555151;
	padding-bottom : 2px;
	margin-top : 7px;
}
	.profile_name{
		font-size : 27px;
		color : #8e5b13;
	}
	.profile_katagaki{
		font-size : 20px;
		margin : 15px 0px;
		color : #8e5b13;		
	}
	.profile_text{
		width : 60%;
		margin : 30px 0px;
		font-size : 17px;
		line-height : 30px;
		color : #333;
	}
.jisseki_area {
    width: 100%;
    margin: 0;
    position: relative;
	padding : 35px 0px;
}

.jisseki_area::before {
    content: "";
    position: absolute;
    top: 50%; /* 上から50%の位置に配置 */
    transform: translateY(-50%); /* 上から50%の位置を上に移動 */
    left: 0;
    right: 0;
    height: 420px; /* 帯の高さを指定 */
	background : #f8f1fe;
    z-index: 1;
}

.jisseki_box_in {
    width: 1080px;
    margin: 20px auto;
    position: relative;
    z-index: 1;
}
.jisseki_box_in li {
    float: left;
    width: 25%;
    text-align: center;
    padding: 8px;
    list-style: none;
}

.flow_area{
	width : 100%;
	padding : 50px 0px;
	background : #f3e9ee;
	margin-top : 50px;
}
	.flow{
		width : 880px;
		margin : 30px auto;
		background : #fff;
		border : 1px solid #a98c9a;
		padding : 30px;
	}
ul.flow_list{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size : 20px;
	line-height : 32px;
	text-align : center;
}
ul.flow_list li{
	border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 35px;
    padding: 15px 10px;
    position: relative;
}
ul.flow_list li::after{bottom: -34px;
    color:#ccc;
    content: "▼";
    font-size: 24px !important;
    left: 48%;
    position: absolute;}
ul.flow_list li.last::after{/*最後の▼を外す*/
    content: "";
}
/*エリア８*/
	.area-8{
		width : 100%;
		padding : 30px 0px;
	}
/*エリア９*/
	.area-9{
		width : 100%;
		padding : 50px 0px;
		background-image : url(../image/area9_bg.jpg);background-repeat : no-repeat;background-attachment : fixed;background-position : center center;
	}
.annai_box {
	width : 880px;
	margin : 50px auto;
  position: relative;
  padding: 2rem 2rem calc(1rem + 10px);
  background: #ebdbfb;
	font-size : 20px;
	line-height : 32px;
	color : #461478;
	text-align : center;
}
	.annai-ttl{
		background : #8353b2;
		width : 300px;
		margin : 10px auto;
		color : #fff;
		border-radius : 20px;
		padding : 4px 0px;
		font-size : 17px;
	}
	.annai-text{
		padding : 10px 0px;
	}
	.annai-text span{
		font-size : 16px;
	}

.annai_box:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 1px solid #000;
}
	.font-price{
		font-size : 30px;
	}
	.btn_area{
		width : 420px;
		margin : 20px auto;
	}
	.btn_area-top{
		width : 420px;
		margin : 20px 0;
	}
/*エリア10*/
	.area-10{
		width : 100%;
		padding : 50px 0px;
		background-image : url(../image/area9_bg.jpg);background-repeat : no-repeat;background-attachment : fixed;background-position : center center;
	}
/*エリア11*/
	.area-11{
		width : 100%;
		padding : 20px 0px 35px 0px;
		background : #f3f3f0;
	}
/*エリア12*/
	.area-12{
		width : 100%;
		padding : 50px 0px;
		background-image : url(../image/area12_bg.jpg);background-repeat : no-repeat;background-attachment : fixed;background-position : center center;
	}
	.menu_box {
		width : 880px;
    padding: 1.5em;
    margin: 2em auto;
    background-color:#fff;/*背景色*/
    border:1px solid #c6c4b9;/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);/*影*/
	font-size : 18px;
    color:#333;/*文字色*/
	background-image : url(../image/price_bg.jpg);background-repeat : no-repeat;background-position : right bottom;
}
	.menu_box-2{
		width : 880px;
    padding: 1.5em;
    margin: 2em auto;
    background-color:#f9effc;/*背景色*/
    border:1px solid #c6c4b9;/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);/*影*/
	font-size : 18px;
    color:#333;/*文字色*/
}
	.area-12-text{
		line-height : 30px;
	}
/*エリア13*/
	.area-13{
		background : #eff9fb;
		width : 100%;
		padding : 70px 0px;
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #dceff4 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #dceff4 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;

  /* 以下任意のスタイル */
  padding: 20px;
}
	.main-faq{
		width : 880px;
		margin : 0px auto;
		font-size : 18px;
		line-height : 34px;
	}
/*エリア14*/
	.area-14{
		width : 100%;
		padding : 60px 0px 50px 0px;
		background : #cc99ff;
	}
	.area-14-in{
		width : 80%;
		background : #f6e9f6;
		padding : 40px 80px;
		margin : 0px auto;
	}
	.last_text{
		width : 100%;
		margin : 30px 0px;
		font-size : 17px;
		line-height : 30px;
		color : #333;
	}
	.sign{
		text-align : right;
	}
	.sign span{
		font-size : 22px;
	}
	
/*エリア15*/
	.area-15{
		width : 100%;
		padding : 50px 0px;
		text-align : center;
		font-size : 18px;
		line-height : 34px;
	}
.tokutei_box{
	width : 700px;
	margin : 10px auto;
	}
}
		
@media screen and (max-width:1279px) {
.area-1-in {
    display: flex;
    width: auto;
    margin: 70px 20px 30px;
}
	.area-2-in{
		width : auto;
		margin : 20px;
		padding : 30px 0px;
		font-size : 18px;
		line-height : 32px;
	}
.chikara_box {
  width: auto;
  box-sizing: border-box;
  margin: 0px 20px;
  display: flex; /* Flexboxを有効にする */
  flex-wrap: wrap; /* 要素が折り返すように設定 */
}
.kodawari_box-1{
		width : auto;
		margin : 30px 20px;
		border : 1px solid #cc99ff;
		padding : 25px;
	}
	.kodawari_box-2{
		width : auto;
		margin : 30px 20px;
		border : 1px solid #cc99ff;
		padding : 40px;
	}
.jisseki_box_in {
		width : auto;
		margin : 20px;
    position: relative;
    z-index: 1;
}

}
@media screen and (min-width:1080px) and ( max-width:1400px) {
	#fv-pc{
		width : 100%;
		background-image : url(../image/fv-bg-touka.png);background-repeat : no-repeat;background-position : right center;
	}
	.fv_pc{
		width : auto;
		margin : 0 30px;
		padding : 50px 0px;
		text-align : left;
	}
}
@media screen and (min-width:768px) and ( max-width:1079px) {
	#fv-pc{
		width : 100%;
		background-image : url(../image/fv-bg-touka2.png);background-repeat : no-repeat;background-position : right center;
	}
	.fv_pc{
		width : auto;
		margin : 0 30px;
		padding : 50px 0px;
		text-align : center;
	}
	.btn_area-top{
		width : 420px;
		margin : 20px auto;
	}

}