@charset "UTF-8";

/* デザイン（スマホ） */
@media screen and (max-width:767px) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* 右にはみ出しを防ぐ */
  }
body * {
  box-sizing: border-box;
}
    img {
        max-width: 100%;
        height: auto;
        width: auto;
    }
	#fv-pc{
		display : none;
	}

	#fv-sp{
		width : 100%;
		background : #f0e8ef;
		background-image : url(../image/fv-bg-sp.png);background-repeat : no-repeat;background-position : left top;
	}
	.fv_sp{
		width : auto;
		margin : 0;
		padding : 20px;
		text-align : center;
	}
	.fv-ttl-1{
		font-size : 18px;
		color : #8e5b13;
		padding : 5px 0px 0px 0px;
	}
	.fv-ttl-2{
		font-size : 22px;
		line-height : 28px;
		color : #8e5b13;
		padding : 15px 0px;		
	}
	.fv-ttl-3{
		font-size : 24px;
		line-height : 30px;
		color : #8e5b13;
		margin-top : 15px;
		padding : 15px 0px 0px 0px;		
	}
	.fv-ttl-3 span{
		font-size : 22px;
	}
	.fv-catch{
		font-size : 55px;
		padding : 0px 0px 20px 0px;
		color : #8e5b13;
	}
	.fv-ttl-4{
		font-size : 24px;
		color : #cc0000;
		margin : 3px 0px;
	}
.fv-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
	margin-top : 12px;
}

.fv-box {
    border: 1px solid #333;
    padding: 5px 10px;
    margin: 0 10px 10px 0;
    font-size: 13px;
}
	.btn_area-top{
		width : auto;
		margin : 8px auto 15px;
	}
.otameshi-btn {
    width: auto;
	font-size : 20px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    color: #220e36;
    background-color: #cc99ff;
	border : 1px solid #914fd2;
	margin : 0px auto;
	max-width : 100%;
}
.footer-tel-btn {
    position: relative;
    display: block;
    width: 100%;
	font-size : 18px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #9b448e;
	border : 1px solid #9b448e;
    overflow: hidden;
}
.footer-tel-btn a{
	text-decoration : none;
	color : #fff;
	}

.footer-tel-btn::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
	.area-ttl-1{
		font-size : 28px;
		line-height : 38px;
		color : #8e5b13;
		margin : 20px 15px 35px 15px;
		text-align : center;
	}
	.area-ttl-1-white{
		font-size : 28px;
		line-height : 38px;
		color : #fff;
		margin : 20px 0px 70px 0px;
		text-align : center;
	}
	.area-ttl-1-blue{
		font-size : 28px;
		line-height : 38px;
		color : #3c92a7;
		margin : 30px 0px;
		text-align : center;
	}
	.tokutei-ttl-1{
		font-size : 24px;
		line-height : 38px;
		color : #8e5b13;
		margin : 20px 15px 35px 15px;
		text-align : center;
	}
.area-12-subttl {
		font-size : 23px;
		line-height : 38px;
		color : #333;
		margin : 40px 20px 30px 20px;
		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 : 20px;
		line-height : 32px;
		color : #333;
		margin : 40px 15px 30px 15px;
		text-align : center;
}
	.area-ttl-2{
		font-size : 26px;
		line-height : 36px;
		color : #8e5b13;
		margin : 20px 0px 35px 0px;
		text-align : left;
	}


	.main{
		width : auto;
		margin : 20px 15px;
		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 : 80%;
		font-size : 18px;
		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 : 26px;
		margin : 0 20px;
	}
/*エリア１*/
	.area-1{
		background : #fff;
		width : 100%;
		padding : 40px 0px 10px 0px;
	}
/* サブタイトルに横線を追加 */
.area-1-sub-ttl{
	font-size : 22px;
	margin-bottom : 30px;
	color : #5a3e17;
	}
.area-1-sub-ttl::before {
    content: ''; /* 疑似要素のコンテンツを空にする */
    border-top: 1px solid #5a3e17; /* 上部に横線を設定 */
    width: 30px; /* 線の長さを設定 */
    display: inline-block; /* 疑似要素をインラインブロックとして表示 */
    vertical-align: middle; /* 縦中央に配置 */
    margin-right: 10px; /* テキストと線の間のスペースを設定 */
}
/* Flexコンテナを設定 */
.area-1-in {
    display: flex;
    width: auto;
    margin: 40px 20px 30px;
}
    .area-1-in {
        flex-direction: column; 
    }

    .text-left,
    .text-left-r,
    .img-right,
    .img-right-r {
        flex: initial; /* モバイルビューではフレックス指定を解除 */
        width: 100%; /* モバイルビューでは幅を100%に設定 */
        text-align: center; /* モバイルビューでは中央揃えに */
        margin-bottom: 20px; /* 要素間の余白を設定 */
		font-size : 17px;
		line-height : 27px;
    }

    .img-right,
    .img-right-r {
        order: -1; /* 画像をテキストの上に配置 */
    }

	
/*エリア２*/
	.area-2{
		width : 100%;
		padding : 10px 0px 35px 0px;
		background : #f8f1fe;
	}
	.area-2-in{
		width : auto;
		margin : 20px 20px;
		padding : 0px;
		font-size : 18px;
		line-height : 32px;
	}

/*エリア３*/
	.area-3{
		width : 100%;
		padding : 30px 0px;
		background : #fff;
	}
	.area-3-in{
		width :  auto;
		margin : 20px 15px;
	}
/*エリア４*/
	.area-4{
		width : 100%;
		padding : 30px 0px;
		background : #ff99cc;
	}
.chikara_box {
  width: auto;
  box-sizing: border-box;
  margin: 0px auto;
  display: flex; /* Flexboxを有効にする */
  flex-wrap: wrap; /* 要素が折り返すように設定 */
}
.chikara_box li {
  float: none;
  width: 94%;
  padding: 10px 15px;
  list-style: none;
  background: #fff;
  margin: 5px auto 40px;
  flex: none; /* 高さを揃える */
}
	.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 : 30px 0px 30px 0px;
		background : #ffffff;
	}
	.area5-sub-ttl{
		font-size : 18px;
	color : #fff;
	background : #833ec8;
		padding : 10px;
		margin-top : 20px;
	}
/* デフォルトのスタイル */

.kodawari_box-1,
.kodawari_box-2 {
    width: auto;
    margin: 30px 20px;
    border: 1px solid #cc99ff;
    padding: 10px;
    display: flex; /* flexコンテナを使用して要素を並べる */
    flex-direction: column; /* 縦に並べる */
}

.kodawari-left-1,
.kodawari-left-2,
.kodawari-right-1,
.kodawari-right-2 {
    width: auto;
    margin: 0px;
    text-align: center; /* モバイルビューで中央揃えに */
}

.kodawari-right-1 img,
.kodawari-right-2 img {
    max-width: 100%; /* 画像を親要素に合わせて最大幅に */
}
/* スマートフォン用のスタイル（画面幅が768px以下の場合） */
@media (max-width: 768px) {
    .kodawari-left-1,
    .kodawari-left-2,
    .kodawari-right-1,
    .kodawari-right-2 {
        text-align: left; /* モバイルビューでは左揃えに */
    }

    .kodawari-right-1,
    .kodawari-right-2 {
        order: -1; /* 画像をテキストの上に配置 */
    }
}
	.area5-text{
		padding : 20px 0px;
		font-size : 17px;
		line-height : 30px;
		margin : 0px;
	}
/*エリア６*/
	.area-6{
		width : 100%;
		padding : 0px;
	}
	.area-6-2{
		width : 100%;
		background : #fde4f1;
		padding : 0px 0px 20px 0px;
		margin-top : 20px;
	}	
	.area-6-in{
		width : auto;
		background : #fde4f1;
		padding : 40px 20px 10px 20px;
		margin : 0px auto;
	}
dl.reki {
  display: flex;
  flex-wrap: wrap;
	font-size : 16px;
	line-height : 26px;
}
dl dt {
  width: 15%;
	border-bottom : 1px dotted #555151;
	padding-bottom : 2px;
	margin-top : 7px;
}
dl dd {
  width: 85%;
	border-bottom : 1px dotted #555151;
	padding-bottom : 2px;
	margin-top : 7px;
}
	.profile_name{
		font-size : 22px;
		color : #8e5b13;
	}
	.profile_katagaki{
		font-size : 20px;
		margin : 15px 0px;
		color : #8e5b13;		
	}
	.profile_text{
		width : auto;
		margin : 30px 0px;
		font-size : 17px;
		line-height : 30px;
		color : #333;
	}
.jisseki_area {
    width: 94%;
    margin: 0 auto;
    position: relative;
	padding : 35px 0px;
}

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

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

.flow_area{
	width : 100%;
	padding : 20px 0px;
	background : #f3e9ee;
	margin-top : 50px;
}
	.flow{
		width : auto;
		margin : 30px 20px;
		background : #fff;
		border : 1px solid #a98c9a;
		padding : 20px;
	}
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 : 30px 0px;
		background-image : url(../image/area9_bg.jpg);background-repeat : repeat;background-position : center center;
	}
.annai_box {
	width : auto;
	margin : 30px 20px;
  position: relative;
  padding: 2rem 1.5rem 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;
		line-height : 28px;
	}
	.annai-text span{
		font-size : 16px;
		line-height : 20px;
	}

.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 : 100%;
		margin : 20px auto;
	}
.yoyaku-btn {
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #c3176d;
    border: 1px solid #b10e5f;
    overflow: hidden;
	padding : 0 10px;
    margin-top: 50px;
    max-width: 100%!important; /* 最大幅を設定 */
}
.line-btn {
    position: relative;
    display: block;
    width: 100%;
	font-size : 18px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #00b900;
	border : 1px solid #00b900;
    overflow: hidden;
	padding : 0 10px;
	margin-top : 30px;
    max-width: 100%!important; /* 最大幅を設定 */
}
.yoyaku-btn, .line-btn {
    /* 他のスタイルプロパティは省略 */
    max-width: 90%; /* ボタンの最大幅を100%に設定 */
	margin : 0 auto;
}

@media (max-width: 380px) {
    .yoyaku-btn {
        font-size: 16px; /* スマートフォン用にフォントサイズを調整 */
    }
}

@media (max-width: 300px) {
    .line-btn {
        font-size: 16px; /* スマートフォン用にフォントサイズを調整 */
    }
}
/*エリア10*/
	.area-10{
		width : 100%;
		padding : 50px 15px;
		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 : 30px 0px;
		background-image : url(../image/area12_bg.jpg);background-repeat : no-repeat;background-attachment : fixed;background-position : center center;
	}
	.menu_box {
		width : auto;
    padding: 1.5em;
    margin: 2em 20px;
    background-color:#fff;/*背景色*/
    border:1px solid #c6c4b9;/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);/*影*/
	font-size : 18px;
		line-height : 30px;
    color:#333;/*文字色*/
	background-image : url(../image/price_bg.jpg);background-repeat : no-repeat;background-position : right bottom;
}
	.menu_box-2{
		width : auto;
    padding: 1.5em;
    margin: 2em 20px;
    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 : 30px 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;

}
	.main-faq{
		width : auto;
		margin : 0px 15px;
		font-size : 18px;
		line-height : 30px;
	}
/*エリア14*/
	.area-14{
		width : 100%;
		padding : 40px 0px 50px 0px;
		background : #cc99ff;
	}
	.area-14-in{
		width : auto;
		background : #f6e9f6;
		padding : 40px 20px;
		margin : 0px 20px;
	}
	.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 : auto;
	margin : 10px 15px;
	}
}