body {
  font-family: 'Noto Sans JP', 'Noto Sans CJK JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

html {
  scroll-behavior: smooth;
}
.pb0{padding-bottom: 0!important;}


.header{background-color: #000000;/* 背景色黒 */}
#about{
padding-top:60px;
}
#plan{
padding-top:60px;

}

#flow{
padding-top:60px;
}
#q{
padding-top:60px;
}
#jumpform{
padding-top:60px;
}

.first-view {background-image: linear-gradient(to bottom, #FF6B00 0%, #969FFF 50%, #ECFF8A 100%);
padding-bottom: 50px;}/* 背景色 */
.first-view-top{font-size: 0;
position: relative;
}

.w1200{
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
/*	border: #E6FF00 1px solid;*/
}

.w500{
	max-width: 400px;
	margin: 0 auto;
	padding: 20px;
}
.plan1{padding: 80px 50px 80px 50px;}
h2{
	text-align: center;
	padding-top: 60px!important;
	margin-top: -60px!important;
/*	padding-top: 100px;*/
}
.cta{padding: 100px 10px;}
.second30{
width: 370px;
padding: 10px;
flex-shrink: 0;
border-radius: 18px;
background: linear-gradient(90deg, #84AFFF 0%, #00BE62 100%);
box-shadow: 3px 5px 4px 0px rgba(0, 0, 0, 0.25);
color: #FFF;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
/*font-family: Inter;*/
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-align: center;
	margin: auto;
}
.cta a{text-decoration: none;
font-family: 'Noto Sans JP', 'Noto Sans CJK JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

.ctafirst {
  position: absolute;
  top: 570px;
  left: 70px;
}

.kaiinsamano{
margin-bottom:80px;	
margin-top:40px;
}

.tokutiyou h2  {
color: #FFFFFF;
border-bottom: 2px solid #F46600; 
padding-bottom: 30px;           /* テキストと下線の間に余白をつける */
width: 80%;
margin: auto;
}

.tokutiyou h2 p{
font-weight: normal;
}

.tokutiyou hr{
border-bottom: 2px solid #F46600; 
border: none;              /* デフォルトの立体的な線を消す */
height: 2px;               /* 線の太さ */
background-color: #F46600;    /* 線の色 */
width: 80%;                /* 線の長さ */
margin: 40px auto;         /* 上下の余白と中央寄せ */
}
 .tokutiyou p:nth-child(2){
padding-top: 30px;
padding-bottom:40px;
}

p  {color: #FFFFFF;
text-align: center;
font-size:16px;
}

.section-num{
font-family: "kepler-std-semicondensed-cap", serif;
font-weight: 400;
font-style: italic;
color:#FFFFFF;
font-size:64px;
text-align:left;
}

.container{
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.item{width: 50%;
text-align: center;
display: inline-block;
	position: relative;
}
.item img{
width: 513px;
height: 330px;
}

.itemex {
  width: 513px;               /* 画像と同じ幅 */
  margin: 10px auto 40px auto;/* 上10px・下40pxの余白、左右中央寄せ */
  text-align: left;           /* テキストを左寄せ */
/*  padding: 0 1em;             /* 左右の余白（h3と統一） */
  box-sizing: border-box;     /* padding込みで幅調整 */
}

.item h3 {
  display: flex;
  align-items: center;
  background-color: #F46600;
  color: #FFFFFF;
  width: 513px;
  /* 上下 padding を 0 にして帯を最小に */
  /*padding: 0 1em;        /* 上下0、左右1em */
  /* テキストの行間をフォントサイズに合わせる */
  line-height: 1;        /* または line-height: 64px; など */
  margin: 20px auto 0px auto;
  box-sizing: border-box;
  padding:10px 10px 10px 60px;
}

.item span{
 position:absolute;
	left: 30px;
	top:-5px;
}

.hp-link {
  color: #fff; /* リンク色 */
  text-decoration: underline; /* 下線あり */
  font-size: 14px;
}

.plan h3 {
  color: #F46600;      /* オレンジ文字 */
  font-weight: bold;   /* 太文字 */
  text-align:center;
  font-size:19px;
}

.planservise{
display:flex;
justify-content: center;
flex-wrap: wrap;
}

.servisebox{
width: 28%;
margin: 0px 6px; /* 上下20px、左右15px */
background-color: #F46600; /* 背景色（例：オレンジ） */
border-radius: 20px;
}

.servisebox div{
padding:10px;
}

.servisebox .servisebox23{
padding-bottom:20px;
}

.servisebox img{
width: 100%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

.servisebox h4, .servisebox p{
padding:2px 10px;
margin: 0;
text-align: left;
color: #FFFFFF;
}

.servisebox hp-link{
padding:10px;
text-align: left;
}

.servisebox p{
color: #FFFFFF;
font-size:14px;
}

.main-title {
  /* display: flex; /* 子要素（span）をフレックスボックスで配置 */
  /* justify-content: center; /* 子要素を左右中央に配置 */
  align-items: center; /* 子要素を上下中央に配置 */
  width: 170px; /* 円の幅 */
  height: 170px; /* 円の高さ */
  border-radius: 50%; /* 正円にするための指定 */
  background-color: #FFFFFF; /* 背景色を白に設定 */
  overflow: hidden; /* 円の外にはみ出した部分を非表示にする */
  text-align: center; /* テキストを中央揃えにする */
  padding: 4px; /* 内側に余白を作り、文字が端に当たるのを防ぐ */
  margin-right: 20px;
  box-sizing: border-box; /* paddingを含めて100pxの中に収める */
  float: right;/*要素の右寄せ*/
  line-height: 50%;
  position: absolute;
  top:84px;
 right:-50px;
}

.main-title span {
  color: #FB6D0A; /* テキストカラー（オレンジ）を指定 */
  font-size: 20px; /* フォントサイズを小さめに調整してはみ出し防止 */
  line-height: 1; /* 行間を適度にとって読みやすくする */
  word-break: break-word; /* 長い単語の途中でも折り返してはみ出しを防止 */
	display: block;
	margin-top: 50px;
}

.main-image {
  margin-top: 18px; /* 必要に応じて調整 */
  text-align: left;
}

.plancontainer {
  margin: 0 auto; /* 中央寄せ */
  display: flex;
	    flex-wrap: wrap;
  justify-content: center; /* 中央に寄せる */
  gap: 5px; /* 画像間のスペース */
}

.img2 {
  width: 350px;
  height: auto;
  display: block;
}

.douniyuu{
padding: 64px 50px 64px 50px;
}


.flow {
 background-color: #FFFFFF; /* 背景色を白に設定 */
 color: #000;               /* 文字色を黒に設定 */
 font-size: 16px;           /* 文字サイズを16pxに設定 */
 font-weight: bold;         /* 太字に設定 */
 margin-top: 3%;            /* 上部のマージン（外側の余白）を3%分確保 */
 border-radius: 12px;       /* 角を12px分丸める（角丸） */
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* ほんのり影をつけて立体感を出す */
 box-sizing: border-box;    /* paddingやborderを含めてwidth/heightを計算する */
 text-align: left;          /* テキストを左揃えにする */
 width:80%; 
 padding: 0px 4px 0px 20px;
}

.onethree{
height: 70px;
line-height: 70px;
} 

.four{
	padding: 15px 0 15px 20px;
}

/*.subtext {
  font-weight: normal;
  font-size: 14px;
}
*/

.flow_img{
width:20%;
	position: relative;
	top:2px;
	left: 0px;
}

.flow_img img{
width:60px;	
}

.dcontainer{
display: flex;
flex-wrap:wrap;
}

.dcontainer flowsquare{
padding-top:50px;
}

.dex{
color: #000;
font-size: 16px;
text-align: center;
width: 100%;
padding-left: 20px;
padding-right: 20px;
}

.accordion-001 {
    width: 468px;     
    background-color: #ffffff;
	margin: 0 auto; /* ← 中央寄せに必要な設定 */
}
.accordion-001:not([open]) {
    margin-bottom: 10px;
}
.accordion-001 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    background-color: #151515;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
	font-size: 16px; 
}

.accordion-001 summary::-webkit-details-marker {
    display: none;
}

.accordion-001 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion-001[open] summary::after {
    transform: rotate(225deg);
}

.accordion-001 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
	text-align: left;
	font-size:15px;
}

.accordion-001[open] p {
	margin-bottom: 20px;
    transform: none;
    opacity: 1;
}

.tokutiyou {
  background-color: rgba(0, 0, 0, 0.80); /* 黒 + 不透明度85% */
  border-radius: 15px;
  padding: 64px 50px 64px 50px;
	position: relative;
}

.douniyuu{background-color: #FFF5D8;}/* 背景色 */

.yokuarusitumon {
background-image: linear-gradient(to bottom, #ECFF8A 0%, #969FFF 100%);/* 背景色 */
padding: 50px 50px 70px 50px;
}
#form{padding: 70px 50px 0px 50px;}
.footer {
  background-color: #000000;
  text-align: center;
  padding: 20px 0; /* 上下に余白を追加（任意） */
}

.footer p {
  font-size: 10px;         /* テキストサイズを10pxに */
  margin-top: 10px;
  color: #ffffff;          /* テキストカラーを白に（任意） */
}

.footer a {
  color: #ffffff;          /* リンクの色を白に */
  text-decoration: none;   /* 下線を消す */
  margin: 0 5px;           /* | の前後に余白 */
}

.footer a:hover {
  text-decoration: none;   /* ホバー時も下線なし */
}

.footer img{
width: 20%;     /* 画面や親要素の20%の幅に縮小 */
height: auto;
display: inline-block;
}
.formex{
color: #000000;		
	}
.sp-main-image{display: none;}
.sp_on{display: none;}

@media screen and (max-width: 1270px) {
	.main-title{top:auto;
		bottom: 40px;
	right: 20px;}
.item h3{width: 90%;}
.item img{width: 90%;
height: auto;}
.itemex{width: 90%;}
.sp_on{display: block;

}
.pc_on{display: none;}
	.ctafirst{top:-200px!important;
	left: 30px!important;}
}
@media screen and (max-width: 920px) {
	.ctafirst{top:-180px!important;
	left: 20%!important;
	width: 60%;}
}
@media screen and (max-width: 767px) {
.item{width:100%;}
/*	.plan1{padding:  20px 10px 80px 10px;}*/
.w500{padding: 10px;}
.item span {
left: 40px;
}
.plan1{
padding: 100px 50px 80px 50px;
}
.first-view{
background-image: linear-gradient(to bottom, #FF6B00 0%, #969FFF 18%, #ECFF8A 100%);
}
}

@media screen and (max-width: 660px) {

.sp-main-image{display: block;}
.main-image, .main-title{display: none;}
.item{
width:100%;
}
.first-view{
background-image: linear-gradient(to bottom, #FF6B00 0%, #969FFF 35%, #ECFF8A 100%);
}
.servisebox{
width:100%;
margin: 20px 6px; /* 上下20px、左右15px */
}

.img2 {
width:100%;
}
.item h3{width: 100%;}
.item img{width: 100%;
height: auto;}
.accordion-001{width: 100%;}
.itemex{width: 100%;}
.second30{width: 100%;
	left: 0;
	font-size:28px;}
.first-view-top{
padding:0!important;
}
.ctafirst {
top:-220px!important;
width: 86%!important;
	left: 7%!important;

}
.tokutiyou{
padding:30px 20px 20px 20px;
margin:30px 20px;

	}
.tokutiyou h2 {
width:100%;	
}
.tokutiyou hr {
width:100%;		
}
.kaiinsamano {
margin-bottom: 50px;
}
.plan h2{
padding-top: 100px!important;
}
.plan1 {
padding: 60px 10px 80px 10px;
}	
.item span{
left:11px;
	}

.flow{
font-size:14px;
}
.douniyuu{
padding: 40px 10px 64px 10px;
}
.yokuarusitumon{
padding: 20px 23px 70px 23px;		
	}
.footer img{width: 50%;}
.footer p{font-size: 14px;}
#form {
    padding: 50px 10px 0px 10px;
}
	
@media screen and (max-width: 450px) {
.plan h3 {
	font-size:17px;}
.second30 {
font-size: 26px;
}
.first-view{
background-image: linear-gradient(to bottom, #FF6B00 0%, #969FFF 28%, #ECFF8A 100%);
}
}		
	
	
@media screen and (max-width: 400px) {
.plan h3 {
  font-size:17px;
}	
.second30 {
font-size: 23px;
}
	
}