html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	box-sizing: border-box;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

input, select {
    vertical-align:middle;
}


:root {
--orange: #ff914d;
--navy: #0e2e59;
--gray:#f0f0f0;
}

@font-face {
  font-family: 'FreestyleScript';
  src: url('../fonts/freestyle-script-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;}


body {
  /*font-family: 'M PLUS 1p', sans-serif;*/
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 100%;
  line-height: 1.8;
  color: var(--navy);
}


/* 小さい画面用の設定-------------- */
@media (max-width:767px) {
  body {
    font-size: 88%;
  }
}
/* -------------end------------- */


ol, ul{
    list-style:none;
}
fieldset, img{
     border:0;
}

caption, th{
    text-align: left;
}
address, caption, cite, code, dfn, em, strong, th, var{
    font-style: normal; 
    font-weight: normal;
}

hr{
	display:none;
}

html {
	margin-bottom:1px;
	height:100%;
}

* {
    box-sizing: border-box;
}

/* line style　------------------------------*/
/* -----------------------------------------*/

a img {
  border-style: none;
}
a:hover {
  opacity: 0.7;
}

/* link style ------------------------------*/
/* -----------------------------------------*/
a:link {
	color: #212121;
	text-decoration: none;	
}
a:visited {  color: #212121;
	text-decoration: none;	}


a:active {
	color: #ccc;
	text-decoration: none; 
}

.link_line{
	text-decoration: underline;
	
}

 a .link_line{
	color: var(--navy);
	
}

img, video, object {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}


a:active, a:focus,input:active, input:focus{outline:0;}



img{
	width: 100%;
	height: auto;
}

iframe {
    vertical-align: bottom;
}

.header_flex{display: flex;
justify-content: space-between;
align-items: center;

width: 100%;
	max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 2%;
padding-right: 2%;
padding-top:20px;
padding-bottom: 20px;
}

.header_flex > li:first-child{width: 30%;
		max-width: 420px;
}

.header_flex > li:last-child{width: 70%;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.header_flex{
padding-top:10px;
padding-bottom: 10px;
}
	
.header_flex > li:first-child{width: 55%;}

.header_flex > li:last-child{width: 45%;}
}
/* -------------end------------- */

.header_inner_flex{display: flex;
justify-content: flex-end;
align-items: center;}



/* 1〜4番目共通のリンク */
.header_inner_flex >  li:nth-child(-n+4) a {
  color: #ffffff;
  padding: 10px 20px;
  display: block;
  position: relative; /* 擬似要素をa内に配置するために必要 */
  box-sizing: border-box;
}



/* 4番目のリンクだけ右余白を広げる（矢印分） */
.header_inner_flex > li:nth-child(4) a {
  padding-right: 40px;}

/* 4番目の li の背景色 */
.header_inner_flex > li:nth-child(4) {
  background-color: var(--navy);
  margin-right: 20px;
	margin-left: 20px;
border-radius: 9999px;}

/* 擬似要素（矢印）を a に付ける */
.header_inner_flex > li:nth-child(4) a::after {
  content: "\f105";  
  font-family: "Font Awesome 5 Free";  /* 読み込み必須 */
  font-weight: 900;
  position: absolute;
  right: 20px;                         /* ボタン内に配置 */
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.9em;
  pointer-events: none;                /* クリックの邪魔をしない */
}
/* 小さい画面用の設定-------------- */
@media (max-width:1024px){
/* 4番目の li の背景色 */
.header_inner_flex > li:nth-child(4) {
display: none;
}
	
	.header_inner_flex > li:nth-child(5) a{
  background-color: var(--navy);
  width: 36px;        /* 好きなサイズ */
  height: 36px;       /* width と同じに */
  line-height: 36px;  /* テキストを中央に */
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 50%;
margin-right: 5px;
  font-size: 16px; /* 電話マークの大きさ調整 */
}
	
.header_inner_flex > li:nth-child(6) a{
  background-color: var(--navy);
  width: 36px;        /* 好きなサイズ */
  height: 36px;       /* width と同じに */
  line-height:36px;  /* テキストを中央に */
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 50%;
margin-right: 10px;
  font-size: 16px; /* 電話マークの大きさ調整 */
}
}
/* -------------end------------- */




/* ========================================

 * グロナビ固定
 
======================================== */

.nav_fixed {
		position:fixed;
		top:0;
		left:0;
z-index: 10000;}




/* ========================================

    ■ common

======================================== */

.contents{
	max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    width: 96%;
    box-sizing: border-box;
}

/* ---- Medium: タブレット用 (768～1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
.contents,
.sp_contents{
	margin-left: auto;
    margin-right: auto;
	width: 90%;
    box-sizing: border-box;
}
}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.contents,
.sp_contents{
	margin-left: auto;
    margin-right: auto;
	width: 90%;
    box-sizing: border-box;
}
}
/* -------------end------------- */

/* ========================================

    ■ Header■ Keyv

======================================== */

.keyv_con1_services_outside {
  background: url("../img/index_img/con1_bg_01.png") no-repeat right top 580px, url("../img/index_img/con1_bg_02.png") no-repeat left bottom, linear-gradient(90deg, #ff914d, #ffb93e);
}
/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px) {
  .keyv_con1_services_outside {
    background: url("../img/index_img/con1_bg_01.png") no-repeat right top 280px, url("../img/index_img/con1_bg_02.png") no-repeat left bottom, linear-gradient(90deg, #ff914d, #ffb93e);
    background-size: 40% auto, 40% auto, 100% 100%;
  }
}
/* -------------end------------- */









/* 大きい画面用の設定-------------- */
@media (min-width:768px){
.keyv_outside {
    position: relative; /* 擬似要素を重ねるため必須 */
    background-image: url("../img/index_img/main_bg_wide.png"); 
    background-position: center top;
    background-repeat: no-repeat;
	background-size: cover;
}
}
/* -------------end------------- */

/* ワイド画面用の設定-------------- */
@media (min-width: 1024px) {
  .keyv_outside {
    background-image: url("../img/index_img/main_bg_wide.png"); 
    background-position: center top;
	  background-size: auto 100%;
  }
}




#keyv {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    position: relative;}

.key{background-color: var(--orange);
position: relative;}

.main_copy_wrap{position: absolute;
	left: 0;
	top: 14%;
line-height: 1.0;
	width: 100%;
}

.main_copy_wrap_inner{display: inline-block;}


.main_copy_sub,
.main_copy {
	position: relative;
  background-color: var(--navy);     /* テキスト背景そのまま残す */
  color: #ffffff;
  padding-right: 30px;
  border-top-right-radius: 10px;     /* 右側だけ角丸 */
  border-bottom-right-radius: 10px;
  z-index: 1;
	
}

.main_copy {
  padding: 15px;
  font-size: 480%;
  font-weight: 800;
  padding-left: 30px;
min-width: 8em;
box-sizing: border-box;
margin-bottom: 80px;
}

.main_copy_sub {
  padding: 10px;
  padding-left: 30px;
  font-size: 320%;
  font-weight: 700;
  margin-bottom: 10px;
	min-width: 12em;
	box-sizing: border-box;
	
}

.main_copy_sub::before,
.main_copy::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100vw;                       /* 左方向に背景を伸ばす */
  width: 100vw;                       /* 左側だけ */
  height: 100%;
  background-color: var(--navy);      /* 同じ色で左背景 */
  z-index: -1;                        /* 本体より後ろ */

}
/* タブレット横向き以上、PC未満 */
@media (min-width: 1024px) and (max-width: 1280px) {
  .main_copy {
    font-size: 432%;
    padding-left: 20px;
    padding-right: 20px;
	  margin-bottom: 30px!important;
  }
  .main_copy_sub {
    padding: 10px;
    padding-left: 30px;
    font-size: 288%;
  }
}


/* ---- Medium: タブレット用 (768～1024px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .main_copy_wrap {
    top: 10%;
  }
  .main_copy {
    font-size: 380%;
    padding-left: 20px;
    padding-right: 20px;
	  margin-bottom: 30px!important;
	  
  }
  .main_copy_sub {
    font-size: 240%;
    text-align: left;
    padding-left: 20px;
    padding-right: 10px;
  }
}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px) {
  .main_copy_wrap {
    top: 5%;
  }
  .main_copy {
    font-size: 360%;
    padding-left: 20px;
    padding-right: 20px;
    min-width: 4em;
	  margin-bottom: 30px;
  }
  .main_copy_sub {
    font-size: 118%;
    text-align: left;
    padding-left: 20px;
    padding-right: 10px;
  }
}
/* -------------end------------- */




/*================================================
 * 共通見出し
 ================================================*/
.con_headline_warp{
position: relative;

	text-align: center;
	margin-bottom: 30px;
	color: var(--navy);
	isolation: isolate; /* 新しい stacking context を作る */
}

.con_headline_warp_w{
color: #ffffff;
}

.con_headline_warp_price{margin-bottom: 60px;}
.con_headline_warp_case{margin-bottom: 40px;}
.con_headline {
font-size:250%;
font-weight: 700;}

.con_headline span {
	position: relative;
	z-index: 2;
}

.con_headline_warp::before {
content: attr(data-en);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(-7deg); /* ← ここで傾ける */
font-size: 1731.25%;
  font-style: italic;
  line-height: 1;
	
  z-index: 0;
	color: #e8e8e8;
font-family: 'FreestyleScript', cursive;
    font-weight: 700; /* 実際にはブラウザが文字を太く見せるだけ */}

.con_headline_warp_w::before {
	color: #f48b4a;}

.con_headline_warp h3,
.con_headline_warp p {
  position: relative;
  z-index: 1; /* ← テキストを前面に */
}


/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con_headline_warp{
margin-bottom: 30px;
}
	
.con_headline_warp_price{margin-bottom: 30px;}
.con_headline_warp_case{margin-bottom: 30px;}
.con_headline {
font-size:200%;
}


.con_headline_warp::before {
font-size: 1200%;
}
}


/* .bt_btn-------------------- */
/* ボタンの外側ラッパー */
.bt_btn {
  text-align: center; /* ボタンを中央寄せ */
}

/* ボタン本体 */
.bt_btn a{
display: inline-block;
  width: 300px;           /* 幅を固定 */
  padding: 20px 0;        /* 上下のパディングだけにする */
  background-color: var(--navy);
  border-radius: 9999px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;     /* テキスト中央寄せ */
  position: relative;     /* 擬似要素用 */
  box-sizing: border-box;
}

/* 擬似要素（矢印） */
.bt_btn a::after {
  content: "\f105"; 
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-45%);
  color: #fff;
  pointer-events: none; 
}


/* bt_btn_back の場合（左矢印） */
.bt_btn.bt_btn_back a::after {
  content: "\f104"; /* ← */
  left: 20px;
  right: auto; /* right指定を無効化 */
}

.bt_btn_mess{text-align: left;}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.bt_btn a{
  width: 80%;           /* 幅を固定 */
}
}
/* -------------end------------- */

/*================================================
 * con1_services
 ================================================*/
.con1_services {
  padding-top: 100px;
  padding-bottom: 70px;
  background-size: auto; /* 必要に応じて調整 */
	position: relative; /* 擬似要素の基準にする */
}



.con1_services_title_sub {
  text-align: center;
  margin-bottom: 20px;
}
.con1_services_title_sub > span {
  line-height: 1;
  background: #ef8746;
  font-weight: 600;
  padding-top: 0.2em;
  padding-right: 2em;
  padding-left: 2em;
  padding-bottom: 0.2em;
border-radius: 9999px;
  font-size: 150%;
  text-align: center;
  color: #ffffff;
}


.con1_services_title {
  font-weight: 700;
  font-size: 150%;
  color: #ffffff;
  text-align: center;
  margin-bottom: 30px;
}


.con1_services_title_service {
	color: var(--navy);
	margin-bottom: 25px;
}

.con1_services_title > span {
  font-size: 158.3%;
}

.con1_services_title > .bg_red {
  background-color: #950b38;
  padding: 2px 5px 7px 5px;
  display: inline-block;       /* これ重要 */
  line-height: 1.0;            /* 上下の余白を詰める */
  margin: 0 5px;
}

.con1_services_title_service > .bg_red_service {
  color: #ffffff;
}



.con1_services_title_txt{text-align: center;
color: #ffffff;
	font-weight: 700;
	margin-bottom: 60px;}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con1_services {
  padding-top: 50px;
  padding-bottom: 35px;
}
	
.con1_services_title_sub > span {
  padding-right: 1em;
  padding-left: 1em;
	  font-size: 138%;
}

.con1_services_title {
  font-size: 120%;
  margin-bottom: 15px;
	line-height: 1.6;
}


.con1_services_title_txt{
	margin-bottom: 30px;}
}
/* -------------end------------- */

/* ========================================

    ■ 画像が横スクロールし続ける無限ループ

======================================== */

.scroll-image {
  overflow: hidden;
margin-bottom: 50px;}

.scroll-image ul {
  list-style: none;
  display: flex;
  width: max-content;
  animation: scrollAnimation 60s linear infinite;
}

@keyframes scrollAnimation {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

.scroll-image ul li {
  width: calc(100vw / 8);
	/* 横幅は自動にしておく方が余白を効かせやすい */
  flex: 0 0 auto; 
  margin-right: 20px; /* ← 画像同士の間隔 */
	text-align: center;
	color: #ffffff;
	font-size: 150%;
}

.scroll-image ul li img {
  display: block;
	border-radius: 50%;
margin-bottom: 10px;}

/* ---- Medium: タブレット用 (768～1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
.scroll-image {
margin-bottom: 25px;}
	
.scroll-image ul li {
  width: calc(100vw / 6);
  margin-right: 20px; /* ← 画像同士の間隔 */
	font-size: 120%;
}
}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.scroll-image {
margin-bottom: 25px;}
	
.scroll-image ul li {
  width: calc(100vw / 3);
  margin-right: 10px; /* ← 画像同士の間隔 */
	font-size: 113%;
}

}
/* -------------end------------- */


/*================================================
 * con2_area
 ================================================*/


.con2_area {
  position: relative; /* 既に position があると安全 */
  overflow: hidden; /* 見出しのはみ出した部分を切る */
  background-color: var(--gray);
  padding-top: 60px;
  padding-bottom: 70px;
}

.con2_inner{display: flex;
	justify-content: space-between;
	filter: drop-shadow(0px 4px 20px rgba(216, 216, 216, 0.7));
	 align-items: stretch; /* これで左右の高さを揃える */

}

.con2_inner div:first-child{
	background-color: #ffffff;
	padding: 60px;
	width: 50%;
	border-radius: 30px 0px 0px 30px;

}

.con2_inner div:last-child{
	width: 50%;
  border-radius: 0 30px 30px 0;
  background-image: url('../img/index_img/con2_area_img.png');
  background-size: cover;     /* 縦横比を保ちながら親にフィット */
  background-position: center;
}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con2_area {
padding-top: 50px;
padding-bottom: 50px;
}
	
.con2_inner{flex-wrap: wrap;
}

.con2_inner div:first-child{

	width: 100%;
	border-radius: 30px 30px 0px 0px;

}

.con2_inner div:last-child{
	width: 100%;
  border-radius: 0 0px 30px 30px;
 min-height: 400px; 
}
}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con2_inner{flex-wrap: wrap;
}

.con2_inner div:first-child{
	padding: 30px;
	width: 100%;
	border-radius: 30px 30px 0px 0px;

}

.con2_inner div:last-child{
	width: 100%;
  border-radius: 0 0px 30px 30px;
 min-height: 300px; 
}
}
/* -------------end------------- */

.area_dot_title{
font-size: 188%;
font-weight: 700;

  border-bottom: 5px dotted var(--navy);
	padding-bottom: 30px;
margin-bottom: 30px;
line-height: 1.0;}

.area_midashi{font-size: 128%;
font-weight: 700;
border-bottom: 1px solid var(--navy);
	padding-bottom: 10px;
margin-bottom: 5px;
	line-height: 1.0;
}

.area_list{
	font-weight: 700;
	margin-bottom: 30px;
}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.area_dot_title{
font-size: 188%;
padding-bottom: 20px;
margin-bottom: 20px;}

}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.area_dot_title{
font-size: 150%;
padding-bottom: 15px;
margin-bottom: 15px;}
}
/* -------------end------------- */


/*================================================
 * con3_guide
 ================================================*/
.con3_guide{   background: url("../img/index_img/con3_guide_01.png") no-repeat right top,
url("../img/index_img/con3_guide_02.png") no-repeat left bottom 700px,
    linear-gradient(90deg, #ff914d, #ffb93e);
    padding-top: 100px;
padding-bottom: 100px;
position: relative;}

.con3_guide_flex{display: flex;
justify-content: space-between;
margin-bottom: 10px;}

.con3_guide_flex li:first-child{width: 35%;}
.con3_guide_flex li:last-child{width: 65%;
padding-left: 25px;
padding-right: 25px;}

.con3_guide_title_sub {
  margin-bottom: 40px;
	width: 58%;
	
}
.con3_guide_title_sub{
  line-height: 1;
  background: var(--navy);
  font-weight: 700;
  padding-top: 0.3em;

  padding-bottom: 0.3em;
border-radius: 9999px;
  font-size: 150%;
  text-align: center;
  color: #ffffff;
	
}

.con3_guide_title{font-size: 188%;
color: #ffffff;
  font-weight: 700;
margin-bottom: 20px;}

.con3_guide_txt{
color: #ffffff;
font-weight: 700;
margin-bottom: 20px;}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con3_guide{  background: url("../img/index_img/con3_guide_01.png") no-repeat right top,
url("../img/index_img/con3_guide_02.png") no-repeat left bottom 700px,
linear-gradient(90deg, #ff914d, #ffb93e);
	background-size: 40% auto, 40% auto, 100% 100%;
	
padding-top: 50px;
padding-bottom: 100px;
position: relative;}
	
.con3_guide_flex{display: flex;
justify-content: space-between;
margin-bottom: 50px;}
	
.con3_guide_flex li:first-child{width: 25%;}
	
.con3_guide_flex li:last-child{width: 75%;
padding-left: 25px;
padding-right: 25px;}
	
.con3_guide_title_sub {
  width: 66%;
	margin-bottom: 20px;
	
font-size: 125%;
	}
.con3_guide_title_sub{
  line-height: 1;
  background: var(--navy);
  font-weight: 700;
  padding-top: 0.3em;

  padding-bottom: 0.3em;
border-radius: 9999px;
  font-size: 150%;
  text-align: center;
  color: #ffffff;
	
}

.con3_guide_title{
margin-bottom: 10px;
	font-size: 150%;}

.con3_guide_txt{
margin-bottom: 10px;}
	
}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con3_guide_flex{flex-wrap: wrap;
	flex-direction:column-reverse;}

.con3_guide_flex li:first-child{width: 80%;
margin-left: auto;
	margin-right: auto;}
.con3_guide_flex li:last-child{width: 100%;
padding-left: 0px;
padding-right: 0px;
	margin-bottom: 20px;}
}
/* -------------end------------- */


/* rec_box***********---------------*/

.rec_box {
    position: relative;
    padding:  50px;
    border-radius: 30px;/*角の丸み*/
	border: 3px solid #ffffff;
	width: 78%;
max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}
.rec_box .rec_box_title{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    top: -18px;
    line-height: 1;
    background:#ffffff;/*タイトル文字背景色*/
    font-weight: 700;
    padding-top: 6px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 6px;
border-radius: 9999px;
    width: 45%;
	font-size: 150%;
	text-align: center;
}

.rec_flex_etc{position: absolute;
bottom: 20px;
right: 30px;
color: #ffffff;
font-weight: 700;}

/* project_flex ---------------*/
.rec_flex_box{display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.rec_flex_box > li {
    width: 50%;
    position: relative;
    padding-left: 2.5em; /* アイコンの幅分の余白 */
    margin-bottom: 20px;
	color: #ffffff;
	font-weight: 700;
 }

.rec_flex_box > li:nth-last-child(-n+2) {
  margin-bottom: 0;
}

.rec_flex_box li::before {
content:url("../img/index_img/con3_icon_img.png");
	padding-right: 10px;
	padding-left: 0px;

  display: inline-block;
  vertical-align: middle;}


.rec_end_copy{text-align: center;
font-size: 188%;
font-weight: 700;}

.rec_end_copy_sub{text-align: center;
font-size: 150%;
font-weight: 700;
margin-bottom: 70px;}

/* ---- Medium: タブレット用 (768～1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
	.rec_box {
	padding-top: 50px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 50px;
	width: 100%;
}
.rec_flex_box > li {
    width: 50%;
    padding-left: 0.5em; /* アイコンの幅分の余白 */
    margin-bottom: 10px;

 }
	
	.rec_flex_box li::before {
    transform: scale(0.8); /* 90%に縮小 */
    transform-origin: left center; /* 左寄せの位置を維持 */
		padding-right: 0px;}
	
.rec_end_copy{
line-height: 1.4;
margin-bottom: 35px;}

.rec_end_copy_sub{
line-height: 1.4;
margin-bottom: 35px;}

}
/* -------------end------------- */
/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.rec_box {
    padding:  20px;;
    border-radius: 15px;/*角の丸み*/
	width: 100%;
	margin-bottom: 25px;
}
.rec_box .rec_box_title{
    font-size: 125%;
	width: 70%;}
	



.rec_flex_etc{
bottom: 10px;
right: 15px;
}

/* project_flex ---------------*/
.rec_flex_box > li {
    width: 100%;
    position: relative;
    padding-left: 0em; /* アイコンの幅分の余白 */
    margin-bottom: 10px;
}
	
	

.rec_flex_box > li:nth-last-child(-n+2) {
  margin-bottom: 10px;
}
	
.rec_flex_box > li:nth-last-child {
  margin-bottom: 0px;
}

.rec_flex_box li::before {
    transform: scale(0.6); /* 60%に縮小 */
    transform-origin: left center; /* 左寄せの位置を維持 */
padding-right: 0px;}


.rec_end_copy{
font-size: 150%;
line-height: 1.4;
	margin-bottom: 35px;}

.rec_end_copy_sub{font-size: 120%;
	line-height: 1.4;
margin-bottom: 35px;}
}
/* -------------end------------- */

/* resason***********---------------*/
.resason_title_sub{
	text-align: center;
	margin-bottom: 30px;
}

.resason_title_sub > span{
line-height: 1;
    background:var(--navy);
    font-weight: 600;
    padding-top: 0.1em;
    padding-right: 2em;
    padding-left: 2em;
    padding-bottom: 0.1em;
border-radius: 9999px;
 
	font-size: 150%;
	text-align: center;
color: #ffffff;
}

.resason_title{
text-align: center;
font-weight: 700;
font-size: 250%;
line-height: 1.0;
margin-bottom: 60px;
}

.resason_title > span {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
}

.resason_title > span::after {
  content: "";
  position: absolute;
  left: -1em;              /* 左へ1em伸ばす */
  right: -1em;             /* 右へ1em伸ばす */
  bottom: 0;
  border-bottom: 5px dotted var(--navy);
}

.resason_title_small{font-size: 75%;}

.resason_title_orange{color: var(--orange);}

.resason_title_mun{font-size: 175%;
font-weight: 700;}

.resason_flex{display: flex;
justify-content: space-between;}

.resason_flex li{width: 30%;}

.reason_num{
color: var(--orange);
font-weight: 700;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 2px solid var(--orange);}

.reason_num > span{font-size: 150%;}

.reason_headline{font-size: 150%;
font-weight: 700;
margin-bottom: 10px;}

.reason_marker{background: linear-gradient(transparent 50%, #fff600 50%);
	padding-left: 3px;
	padding-right: 3px;
	font-weight: 700;
}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.reason_headline{line-height: 1.4;}
}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.resason_title_sub{
	margin-bottom: 15px;
}
	


.resason_title_sub > span{
font-size: 125%;
padding-right: 1em;
padding-left: 1em;
}

.resason_title{
font-size: 200%;
margin-bottom: 30px;
}

.resason_title > span {
  padding-bottom: 20px;
}


.resason_flex{flex-wrap: wrap;}

.resason_flex li{width: 100%;}
	
.resason_flex li:nth-child(-n+2){margin-bottom: 30px;}
}
/* -------------end------------- */


/*================================================
 * con4_flow
 ================================================*/
.con4_flow{background-color: var(--gray);
padding-top: 100px;
padding-bottom: 100px;
position: relative; /* 既に position があると安全 */
  overflow: hidden; /* 見出しのはみ出した部分を切る */}

.flow_flex_box{display: flex;
justify-content: space-between;
margin-bottom: 60px;
margin-top: 80px;}

.flow_flex_box li{
	width: 22%;
	position: relative;
	background-color: #ffffff;
	padding-top: 60px;
	padding-right: 24px;
	padding-left: 24px;
	padding-bottom: 24px;
	box-shadow: 5px 5px 3px rgba(0,0,0,0.3);
	border-radius: 30px;
}

.flow_flex_box li:not(:last-child)::after {
content: "\f054"; /* Font Awesome: fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(250%, -50%); /* ← ここがポイント：外に出す */
  font-size: 150%;
  color: var(--orange);
  z-index: 2;
}

.flow_num_wrap {
position: absolute;
top: 0px;
transform: translateY(-50%);
left: 50%;
transform: translateY(-50%) translateX(-50%);
    color: #ffffff;
    background-color: var(--navy);
    width: 4.5em;
    height: 4.5em;
    border-radius: 2.25em;
    line-height: 1.2;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.flow_num{font-size: 150%;
font-weight: 700;}

.flow_title{
	text-align: center;
	font-size: 125%;
	font-weight: 700;
	margin-bottom: 10px;
}

.flow_lead{display: block;
  width: fit-content; /* 中身の幅に合わせる */
  margin: 0 auto 10px; /* ★中央寄せ */
  text-align: center;  /* 文字も中央 */
  font-size: 150%;
  font-weight: 700;
  background-color: #f0ff00;
  padding: 0.1em 30px;
  border-radius: 9999px;
}

.flow_lead_sub{text-align: center;
font-size: 125%;
}

/* タブレット（2列表示）------------------------------------ */
@media (min-width: 768px) and (max-width: 1024px) {

  .flow_flex_box {
    flex-wrap: wrap;
    justify-content: space-between;
	  margin-top: 40px;
	  margin-bottom: 30px;
  }

  .flow_flex_box li {
    width: 48%;
  }

  /* ★ 1つ目・2つ目だけ下に余白をつける */
  .flow_flex_box li:nth-child(-n+2) {
    margin-bottom: 50px;
  }

  /* 3つ目以降は余白なし */
  .flow_flex_box li:nth-child(n+3) {
    margin-bottom: 0;
  }

  /* 矢印の調整（必要に応じて） */
  .flow_flex_box li:not(:nth-child(2n))::after {
    content: "\f054";
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .flow_flex_box li:nth-child(2n)::after {
    content: none;
  }
}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con4_flow{
padding-top: 50px;
padding-bottom: 50px;}
	
.flow_lead{
font-size: 135%;
}
}
/* -------------end------------- */

/* スマホ画面用の設定-------------- */
@media (max-width:767px){

	
	
.flow_flex_box{flex-wrap: wrap;
margin-bottom: 30px;
	margin-top: 40px;}

.flow_flex_box li{
	width: 100%;
	padding-top: 30px;
	padding-right: 24px;
	padding-left: 24px;
	padding-bottom: 24px;
	border-radius: 15px;
	margin-bottom: 60px; /* ★ここを追加：矢印用の余白 */
  }

  .flow_flex_box li:last-child {
    margin-bottom: 0; /* 最後は不要 */
  }
.flow_flex_box li:not(:last-child)::after {
    content: "\f078"; /* Font Awesome: fa-chevron-down */
    top: auto;
    bottom: -40px; /* 下に矢印を出す */
    left: 50%;
    right: auto;
    transform: translate(-50%, 0); /* 中央配置 */
  }

.flow_num_wrap {
position: absolute;
top: 0px;
transform: translateY(-50%);
left: 50%;
transform: translateY(-50%) translateX(-50%);
    color: #ffffff;
    background-color: var(--navy);
    width: 3.5em;
    height: 3.5em;
    border-radius: 1.75em;
    line-height: 1.2;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.flow_num{font-size: 125%;}

.flow_title{
	text-align: center;
	font-size: 125%;
	font-weight: 700;
	margin-bottom: 5px;
}
	
	.flow_lead{
line-height: 1.4;
}


}
/* -------------end------------- */


/*================================================
 * con5_price
 ================================================*/
.con5_price_outside {
    position: relative;
    width: 100%;
    background-color: var(--gray); /* デフォルトで右3%の背景 */
    box-sizing: border-box;
	position: relative; /* 既に position があると安全 */
  overflow: hidden; /* 見出しのはみ出した部分を切る */
    
}

/* オレンジ部分 */
.con5_price_outside::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 97%; /* オレンジ部分 */
    height: 100%;
background: url("../img/index_img/con5_price_bg.png") no-repeat right top,

    linear-gradient(90deg, #ff914d, #ffb93e);
    border-top-right-radius: 100px;    /* オレンジ右上角丸 */
    border-bottom-right-radius: 100px; /* オレンジ右下角丸 */
	
}

/* contentsは全体中央 */
.con5_contents {
    position: relative;
    max-width: 1140px;
    width: 96%;
    margin: 0 auto; /* 全体中央 */
    box-sizing: border-box;
padding-top: 100px;
padding-bottom: 80px;}

.con5_price_txt_box{text-align: center;
color: #ffffff;
margin-bottom: 50px;}

.con5_price_txt{margin-bottom: 30px;}

.con5_price_txt_marker{
	color: var(--navy);
	font-size: 125%;
	font-weight: 700;
	background: linear-gradient(transparent 50%, #f0ff00 50%);
	padding-left: 3px;
	padding-right: 3px;
	margin-right: 3px;
}

/* スライド間の余白を作る */
.slick-slide {
  padding: 0 10px; /* ←ここで間隔調整 */
  box-sizing: border-box;
}

/* 両端の余白を消す */
.slick-list {
  margin: 0 -10px; /* slick-slideのpaddingと同じ値をマイナス指定 */
}

/* デフォルト矢印を非表示に */
.slick-prev:before,
.slick-next:before {
  content: none !important;
}

/* Font Awesome アイコンだけにする */
.slick-prev, .slick-next {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.slick-prev i, .slick-next i {
  font-size: 34px;
  color: #fff;
}

.slick-prev { left: -30px; }  /* 左矢印位置調整 */
.slick-next { right: -30px; } /* 右矢印位置調整 */


.price_flex_box  li {
  list-style: none;
  text-align: center;
  width: auto;    /* Slick に任せる */
  margin: 0;      /* marginは削除 */
}

/* スライド間の余白を作る */
.price_flex_box .slick-slide {
  padding: 0 25px; /* ←ここで間隔調整 */
  box-sizing: border-box;
}

.price_flex_box .slick-slide li{
filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.3))!important;
padding-bottom: 10px;
}


.price_flex_box li img{
	border-top-left-radius: 30px;
	border-top-right-radius:30px;
}


.price_flex_box_inner{
	color: var(--navy);
	padding-top: 10px;
	padding-right: 30px;
	padding-left: 30px;
	padding-bottom: 20px;
	background-color: #ffffff;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	
min-height: 130px;
}

.con5_price_menu{font-size:125%;
font-weight: 700;
line-height: 1.4;}

.con5_price_menu_sub{
font-weight: 700;
margin-bottom: 5px;}

.con5_price_menu_price
{color: #d41e1e;
font-weight: 700;
font-family: Arial, sans-serif;
font-size:188%;
line-height: 1; /* 行間を文字サイズと同じ高さに */
}


/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){


/* オレンジ部分 */
.con5_price_outside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/index_img/con5_price_bg.png") no-repeat right top, linear-gradient(90deg, #ff914d, #ffb93e);
  background-size: 50% auto, 100% 100%;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

/* contentsは全体中央 */
.con5_contents {
width: 90%;
padding-top: 50px;
padding-bottom: 50px;}
	
.slick-prev { left: -10px!important; }  /* 左矢印位置調整 */
.slick-next { right: -10px!important; } /* 右矢印位置調整 */
	
}
/* -------------end------------- */


/*================================================
 * con6_news
 ================================================*/
.con6_news{background-color: var(--gray);
padding-top: 100px;
padding-bottom: 100px;
}

.con6_news_flex{display: flex;
justify-content: space-between;}

.con6_news_flex > li:first-child{width: 35%;}
.con6_news_flex > li:last-child{width: 65%;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: var(--navy);}


.con6_title_wrap{position: relative;}

.con6_news_title{ font-size: 1000%; 
	font-style: italic; 
	line-height: 1; 
	font-family: 'FreestyleScript', cursive; 
	font-weight: 700; 
	text-align: center; 
	/* 文字のグラデ */ background: linear-gradient(to right, #ff914d, #ffb93e); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; /* 文字の回転 */ 
	transform: rotate(-5deg); /* 5度回転 */ 
	transform-origin: left center; /* 回転の軸を左中央に */ }

.con6_news_sub{
color: var(--orange);
position: absolute;
bottom: 20px;
left: 50%;                  /* 左右中央の基準 */
transform: translateX(-50%); 
font-weight: normal;}


.news_dl  {
margin-top: 20px;
}

.news_dl dt {

	clear: left;
	float: left;
	width: 16em;
	padding-left: 20px;
}

.news_dl dd {
	padding-left:  16em;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--navy);
	position: relative; /* 矢印を絶対配置するために必要 */
}

.news_dl dd:last-child {
	margin-bottom: 0px;
	padding-bottom: 20px;
	border-bottom-style: none;
}

.news_dl dd a {
color: var(--navy);
}



.news_dl dd::after {
  content: "\f105"; 
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 1em; /* 右端に配置 */
color: var(--navy);
  transition: color 0.3s ease;
}




.news_dl dt >span {
background-color: var(--navy);
	color: #ffffff;
	padding-top: 1px;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom: 1px;
	margin-left: 1em;
border-radius: 9999px;
}

  /* news_dl_main */

.news_dl_main{
	background-color: rgba(255,255,255,1.00);
	padding-top: 15px;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom: 15px;
border-radius: 9999px;
	margin-top: 0px;
}

.news_dl_main dd:last-child {
	padding-bottom: 0px;
}

.new_label {
    color: var(--orange);;
    font-weight: bold;
    margin-right: 6px;
}


/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con6_news{
padding-top: 50px;
padding-bottom: 50px;}

.con6_news_flex{flex-wrap: wrap;}

.con6_news_flex > li:first-child{width: 100%;}
.con6_news_flex > li:last-child{width: 100%;
	border-left-style: none;
}
}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.news_dl  {
margin-bottom: 30px;
}
	
.news_dl dt {
clear:none;
float:none;
	width: 100%;
	padding-left: 0px;
	margin-bottom:5px;
}

.news_dl dd {
	padding-left:  0em;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--navy);
	position: relative; /* 矢印を絶対配置するために必要 */
}

.news_dl dd:last-child {
	margin-bottom: 0px;
	padding-bottom: 20px;
	border-bottom-style: none;
}

.news_dl dt >span {
background-color: var(--navy);
	color: #ffffff;
	padding-top: 1px;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom: 1px;
	margin-left: 1em;
border-radius: 9999px;
}

/* news_dl_main */
.news_dl_main{
	padding-top: 10px;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom: 10px;
	margin-top: 0px;
	line-height: 1.8;
	margin-bottom: 0px;
}
	


.news_dl_main dd:last-child {
	padding-bottom: 0px;
}
}
/* -------------end------------- */


/*================================================
 * con7_voice
 ================================================*/

.con7_voice_outside {
  position: relative;
  width: 100%;
  background-color: var(--gray); /* デフォルトで右3%の背景 */
  box-sizing: border-box;
  position: relative; /* 既に position があると安全 */
  overflow: hidden; /* 見出しのはみ出した部分を切る */
}
/* オレンジ部分 */
.con7_voice_outside::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0; /* ← 右側に寄せる */
  left: auto; /* ← 左を解除 */
  width: 97%; /* オレンジ部分の幅 */
  height: 100%;
  background: url("../img/index_img/con7_voice_bg.png") no-repeat left top, linear-gradient(90deg, #ff914d, #ffb93e);
  border-top-left-radius: 100px; /* オレンジ右上角丸 */
  border-bottom-left-radius: 100px; /* オレンジ右下角丸 */
}


/* contentsは全体中央 */
.con7_contents {
    position: relative;
    max-width: 1140px;
    width: 96%;
    margin: 0 auto; /* 全体中央 */
    box-sizing: border-box;
padding-top: 100px;
padding-bottom: 100px;}

/* スライド間の余白を作る */
.voice_flex_box .slick-slide {
  padding: 0 20px; /* ←ここで間隔調整 */
  box-sizing: border-box;
}

.voice_flex_box .slick-slide li {
filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.3));
	padding-bottom: 30px;		
}

.voice_flex_box_inner{
	padding-top: 60px;
	padding-bottom: 60px;
		padding-right: 30px;
	padding-left: 30px;
	background-color: #fff!important;
	border-radius: 30px;
	color: var(--navy);}

/* ドット全体の位置調整（任意） */
.voice_flex_box .slick-dots {
    bottom: -20px; /* 下にずらす */
filter:none!important;}


/* ドットのサイズと色 */
.voice_flex_box .slick-dots li button {
    width: 20px;
    height: 20px;
    border-radius: 50%; /* 丸にする */
    background-color: #ffffff; 
    border: none; /* ボーダー消す */
    padding: 0;
	
}

/* ホバー時（任意） */
.voice_flex_box .slick-dots li button:hover {
    background-color: var(--navy); 
}

/* アクティブのドット */
.voice_flex_box .slick-dots li.slick-active button {
    background-color: var(--navy); 
}

.voice_flex_box .slick-dots li button::before {
    content: ''; /* 疑似要素も消す */
}

.voice_upper_flex{display: flex;
justify-content: space-between;
margin-bottom: 40px;}

.voice_upper_flex > div:first-child{width: 15%;
}

.voice_upper_flex > div:nth-child(2){width: 50%;
padding-left: 20px;
}

.voice_upper_flex > div:last-child{width: 35%;}

.voice_num_wrap {
    color: #ffffff;
    background-color: var(--navy);
    width: 4.5em;
    height: 4.5em;
    border-radius: 2.25em;
    line-height: 1.2;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.voice_num{font-size: 150%;
font-weight: 700;}

.con7_voice_midashi{font-size: 150%;
font-weight: 700;
margin-bottom: 10px;}

.con7_voice_info{line-height: 1.4;
color: #2f3c45;}

.con7_voice_txt{
margin-bottom: 20px;}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
/* オレンジ部分 */
.con7_voice_outside::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;       /* ← 右側に寄せる */
    left: auto;     /* ← 左を解除 */
    width: 100%;     /* オレンジ部分の幅 */
    height: 100%;
    background: url("../img/index_img/con7_voice_bg.png") no-repeat left top,

    linear-gradient(90deg, #ff914d, #ffb93e);
	background-size: 50% auto, 100% 100%;
    border-top-left-radius: 50px;    /* オレンジ右上角丸 */
    border-bottom-left-radius: 50px; /* オレンジ右下角丸 */}


/* contentsは全体中央 */
.con7_contents {
    position: relative;
    max-width: 1140px;
    width: 90%;
    margin: 0 auto; /* 全体中央 */
    box-sizing: border-box;
padding-top: 50px;
padding-bottom: 50px;}
	

	
	
.voice_flex_box_inner{
	padding-top: 30px;
	padding-bottom: 30px;
		padding-right: 20px;
	padding-left: 20px;
	border-radius: 15px;
	position: relative;}
	


.voice_upper_flex{display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 20px;
}


.voice_upper_flex > div:first-child {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
	

.voice_upper_flex > div:nth-child(2){width: 60%;
padding-left: 0px;
}

.voice_upper_flex > div:last-child{width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;}
	
.con7_voice_midashi{font-size: 120%;
font-weight: 700;
margin-bottom: 5px;}
}
/* -------------end------------- */


/*================================================
 * con8_case
 ================================================*/
.con8_case{background-color: var(--gray);
padding-top: 100px;
padding-bottom: 100px;
position: relative; /* 既に position があると安全 */
  overflow: hidden; /* 見出しのはみ出した部分を切る */}

.con8_case_txt{
margin-bottom: 20px;}

.case_flex_box .slick-prev i, .case_flex_box .slick-next i {
  font-size: 34px;
  color: var(--navy);
}

/* スライド間の余白を作る */
.case_flex_box .slick-slide {
  padding: 0 20px; /* ←ここで間隔調整 */
  box-sizing: border-box;
}

.case_flex_box{
margin-bottom: 30px;}

.case_flex_box li{
filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.3))!important;
	padding-bottom: 30px;
}


.case_flex_box li img{
	border-top-left-radius: 20px;
	border-top-right-radius:20px;
}


.case_flex_box_inner{
	color: var(--navy);
	padding-top: 10px;
	padding-right: 30px;
	padding-left: 30px;
	padding-bottom: 20px;
	background-color: #ffffff;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
.case_headline{font-size: 150%;
font-weight: 700;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid var(--navy);}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con8_case{background-color: var(--gray);
padding-top: 50px;
padding-bottom: 50px;}
	
.case_flex_box{
margin-bottom: 15px;}

.case_flex_box li{
filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.3))!important;
padding-bottom: 15px;
}

.case_flex_box_inner{
	color: var(--navy);
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 10px;
	background-color: #ffffff;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
.case_headline{font-size: 125%;}

}
/* -------------end------------- */
/*================================================
 * con9_faq
 ================================================*/
.con9_faq{background-color: var(--gray);
padding-top: 120px;
padding-bottom: 100px;
position: relative; /* 既に position があると安全 */
  overflow: hidden; /* 見出しのはみ出した部分を切る */}

/* Chrome、Safari以外 */
summary {
  display: block;

}
/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}

.qa-case_wrap{position: relative;
  z-index: 1; /* 擬似要素より前面に出す */}

.qa-case {
    max-width: 96%;
    margin-left: auto;
    margin-right: auto;
    
margin-bottom: 20px;
    background-color:#ffffff;

}

.qa-case summary {
display: flex;
align-items: center;
position: relative;
padding: 1em 1.5em 1em 3.5em;
cursor: pointer;
justify-content: space-between;
}



.qa-case summary::before,
.qa-case p::before {
    position: absolute;
    left: .5em;
    font-weight: 700;
}



/* summaryのQラベルはそのまま */
.qa-case summary::before {
  content: "Q.";

  font-size: 188%;
	font-family: 'Zen Maru Gothic', sans-serif;
}

/* Font Awesome プラス/マイナス */
.qa-case summary::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f067"; /* 閉じている時：＋ */
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1em;
  transition: transform 0.3s ease;
}

/* 開いた時：−に切り替え＆少し回転 */
.qa-case[open] summary::after {
  content: "\f068"; /* − */
  transform: translateY(-50%) rotate(180deg);
}



/*.qa-case summary::after {
    position: absolute;
    right: 1em; 
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-bottom: 3px solid var(--navy);
    border-right: 3px solid var(--navy);
    content: '';
    transition: transform .5s;
}

.qa-case[open] summary::after {
    transform: rotate(225deg);
}*/

.qa-case p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 1em 1.5em 1em 3.5em;
  transition: transform .5s, opacity .5s;
  background-color: #fff7ea;
}

.qa-case[open] p {
    transform: none;
    opacity: 1;}

.qa-case p::before {
    color: var(--orange);
    content: "A.";
	font-size: 188%;
	font-family: 'Zen Maru Gothic', sans-serif;
}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con9_faq{background-color: var(--gray);
padding-top: 50px;
padding-bottom: 50px;}
}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.qa-case {
    max-width: 100%;
}
}
/* -------------end------------- */
/*================================================
 * con10_mess
 ================================================*/
.con10_mess{
background: linear-gradient(145deg, #ff914d, #ffb93e);
padding-top: 100px;
padding-bottom: 100px;
position: relative;
}

.con10_mess_flex{display: flex;
justify-content: space-between;}

.con10_mess_flex li:first-child{width: 45%;}
.con10_mess_flex li:first-child img{border-radius: 30px;}
.con10_mess_flex li:last-child{width: 50%;
padding-left: 30px;
padding-right: 30px;}

.con10_mess_title{font-weight: 700;
margin-bottom: 20px;
font-size: 188%;
}

.con10_mess_txt{margin-bottom: 50px;}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con10_mess{
background: linear-gradient(145deg, #ff914d, #ffb93e);
padding-top: 50px;
padding-bottom: 100px;
position: relative;
}

.con10_mess_flex{flex-wrap: wrap;
	flex-direction: column-reverse;}

.con10_mess_flex li:first-child{width: 100%;
}
.con10_mess_flex li:first-child img{border-radius: 15px;}
.con10_mess_flex li:last-child{width: 100%;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 30px;}
	
.con10_mess_title{margin-bottom: 10px;}

.con10_mess_txt{margin-bottom: 25px;}


}
/* -------------end------------- */
/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con10_mess_title{line-height: 1.4;}
	
.con10_mess_flex li:last-child{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 30px;}
}
/* -------------end------------- */


/*================================================
 * con11_lineup
 ================================================*/
.con11_lineup{background-color:#fff7ea ;
padding-top: 50px;
padding-bottom: 100px;}

.con11_lineup_title_wrap{text-align: center;
margin-bottom: 40px;}

.con11_lineup_title{text-align: center;
font-size: 250%;
font-weight: 700;
margin-bottom: 20px;}

.con11_lineup_title > span{
display: inline-block;      /* padding-bottom を効かせる */
  border-bottom: 5px dotted var(--navy);
  padding-bottom: 20px;   /* テキストと線の間20px */}

.lineup_flex{display: flex;
justify-content: space-between;
flex-wrap: wrap;}

.lineup_flex li{width: 23.5%;
background-color: #ffffff;
border-radius: 10px;
}

.lineup_flex li a{
	color: var(--navy);
}


.lineup_flex li:nth-child(-n+4){margin-bottom: 10px;
}


.lineup_flex_inner{display: flex;
align-items: center;
position: relative;
	
}


.lineup_flex_inner > p:last-child{
	padding-left: 1em;
}

.lineup_flex_inner::after {
  content: "\f105";                    /* Font Awesome 矢印 */
  font-family: "Font Awesome 5 Free";  /* 読み込み必須 */
  font-weight: 900;
  position: absolute;
  right: 10px;                         /* ボタン内に配置 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;                /* クリックの邪魔をしない */
	font-size: 1.5em;
	color: var(--navy);
}

.lineup_flex_inner > p:first-child img {
	height: 80px;
	width: auto;
	object-fit: contain;
	border-radius: 10px 0px 0px 10px;
}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.con11_lineup{
padding-top: 50px;
padding-bottom: 50px;}
	
.con11_lineup_title_wrap{text-align: center;
margin-bottom: 30px;}

.con11_lineup_title{
font-size: 200%;
margin-bottom: 10px;
	line-height: 1.4;}

.con11_lineup_title > span{
  padding-bottom: 10px; }

.lineup_flex li{width: 48%;}

	.lineup_flex li:nth-child(-n+6){margin-bottom: 10px;
}
}
/* -------------end------------- */
/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.lineup_flex li{width: 100%;}
.lineup_flex li:nth-child(-n+7){margin-bottom: 10px;
}
	
.lineup_flex_inner > p:first-child img {
	height: 60px;
}
	}
/* -------------end------------- */
 /*================================================
 *  footer
 ================================================*/
.footer_outside{
	background-color:#ffffff ;
}

#top .footer_outside{
	background-color:#fff7ea!important;
 }

.home .footer_outside,
.page-area .footer_outside {
    background-color: #fff7ea !important;
}

.page-id-47 .footer_outside {
    background-color: #fff7ea !important;
}

.footer{
	background-color: var(--orange);
	padding-top: 60px;
	padding-bottom: 60px;
	color: #ffffff;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
}

.footer_logo{width: 28%;
margin-left: 0;
margin-right: auto;
margin-bottom: 25px;}

.footer_flex{display: flex;
justify-content: space-between;}

.footer_flex > li:first-child
{width: 32%;}

.footer_flex > li:nth-child(2)
{width: 35%;}

.footer_flex > li:last-child
{width: 32%;}


/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.footer{
	padding-top: 30px;
	padding-bottom: 100px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}
	
.footer_logo{width: 80%;
	margin-left: auto;
	margin-right: auto;}
	
.footer_flex{flex-wrap: wrap;
	margin-bottom: 20px;}

.footer_flex > li:first-child,
.footer_flex > li:nth-child(2)
{width: 100%;
	margin-bottom: 20px;}

.footer_flex > li:last-child
{width: 100%;}
}
/* -------------end------------- */
/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.footer_logo{width: 100%;}
}
/* -------------end------------- */

/* footerサイトマップリスト */
.sitemap_list_wrap{display: flex;
justify-content: flex-start;}


.sitemap_list{width: 45%;}

.sitemap_list > li{
line-height: 2.0;}

.sitemap_list > li a{color: #ffffff;}

.sitemap_list li a::before{font-family: "Font Awesome 5 Free";
  content: "\f105";
    font-weight: 900;
margin-right: .5em;}


.sitemap_list li ul{padding-left: 1em;}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.footer_sitemap_flex{flex-wrap: wrap;
}
    
.sitemap_list > li{
	font-size: 94%;}
}
/* -------------end------------- */

address{font-size: 75%;}

/* ====================================================
　pagetop
==================================================== */

.pagetop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.pagetop a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background: #fff;  /* 好みで */
    color: var(--orange);
    text-decoration: none;
    border-radius: 50%;
    text-align: center;
    line-height: 1.0;
	border: 1px solid var(--orange);
	font-weight: 700;
}

/* アイコン(矢印)を円の上部に配置 */
.pagetop a::before {
    content: "\f077"; /* Font Awesome up-chevron */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 15px; /* 上に余白 */
    font-size: 22px;
}

.pagetop a:hover {
    opacity: 0.85;
}

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.pagetop a {
    width: 80px;
    height: 80px;
}

/* アイコン(矢印)を円の上部に配置 */
.pagetop a::before {
    font-size: 14px;
}


}
/* -------------end------------- */


/* ====================================================
　daen
==================================================== */

/* ページ全体の横スクロールを消す */
body {
  overflow-x: hidden;
}

.daen{
width: 130%;               /* 横幅は親より少し大きめ */
  aspect-ratio: 4 / 1;       /* 横4：縦1の楕円 */
  min-height: 600px;         /* 中の文字が見切れない高さを確保 */
  border-radius: 50%;        /* 楕円にする */
	overflow: hidden!important; /* 横スクロール防止 */
  
  /* 中央寄せ */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  
  /* 中のテキストを中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* テキストが左右にくっつかないように余白 */
  padding: 0 1em;
  
  box-sizing: border-box;
  overflow: hidden;           /* はみ出した内容を隠す */
		
  background-color:#ffffff; 
		margin-bottom: 50px;

}

/*aspect-ratio	見た目の比率	特徴
2 / 1	横2：縦1	標準的な楕円
3 / 1	横3：縦1	少し平たい楕円
4 / 1	横4：縦1	かなり平たい楕円
5 / 1	横5：縦1	ごく薄い楕円（帯っぽい形）*/

.daen_contents {
  width: 96%;                  /* デザイン幅 */
  max-width: 1140px;           /* 大画面の最大幅 */
  margin: 0 auto;
  box-sizing: border-box;

}


/* 小さい画面では画面幅に収める */
@media (max-width: 1280px) {
 .daen_contents {
    max-width: 90vw;           /* 画面幅を超えない */
  }
	
}

/* ---- Medium: タブレット用 (768～1024px) ---- */
@media (min-width: 768px) and (max-width: 1280px) {
.daen{
width: 100%; 
	aspect-ratio: auto; /* aspect-ratio無効化 */
    height: auto;       /* 必要に応じて */
    border-radius: 0;   /* 楕円をやめたい場合 */
overflow: hidden; /* 横スクロール防止 */
	padding-top: 50px;
	padding-bottom: 50px;
}
}
/* -------------end------------- */

/* ---- Small: スマホ用 (～767px) ---- */
@media (max-width: 767px) {
.daen{
	width: 100%; 
	aspect-ratio: auto; /* aspect-ratio無効化 */
    height: auto;       /* 必要に応じて */
    border-radius: 0;   /* 楕円をやめたい場合 */
overflow: hidden; /* 横スクロール防止 */
		padding-top: 50px;
	padding-bottom: 50px;
}
}

 /* ページ内リンク調整 -----------*/
/* ------------------------------------- */
#first,
#flow,
#price,
#voice,
#case,
#faq,
#service01,
#service02,
#service03,
#service04,
#service05,
#service06,
#service07,
#service08{padding-top: 90px;
margin-top:-90px;}