@charset "UTF-8";

#contents{
	margin-bottom:0 !important;
	padding:0 !important;
}

h2,h3,h4,strong{
	margin-bottom:1.5rem;
	font-size:1.5rem;
	/*font-weight:600;*/
}

h2{
	padding:10px 20px 0;
	font-weight:900;
	white-space: nowrap;
}


.shinsei{
	max-width: 900px;
	margin:auto;
	background:#cfe7db;
	line-height:1.8;
	font-size: 13px; /* .shinsei内の基本フォントサイズを設定 */
	font-family:"icomoon","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif;
}


.top{
	width:100%;
	height:581px;
	margin-bottom:2.5rem;
	background-image: url("../images/service01/topimg.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.top h1{
	margin:0 !important;
	padding:50px 50px !important;
	text-align: left !important;
	font-size:3rem;
	font-weight:800;
	line-height:1.5;
	text-shadow:3px 3px 3px #fff,-3px -3px 3px #fff, 3px -3px 3px #fff,
      -3px 3px 3px #fff;
}

.top h1 span{
	font-size:80%;
	margin-right:10px;
}


section{
	margin-bottom:3.5rem;
}



.first{
	margin:0 2rem 6.5rem !important;
}

.first p strong{
	font-weight:900;
	color:#003b8a;
	width: fit-content;
    background-image: linear-gradient(rgba(0 0 0 / 0) 60%, #ffe943 60%);
	margin-bottom:20px;
}

.first p strong b{
	font-size:120%;
}




/*(サービスの利用条件)*/
.condition{
	border:dashed #000 1px;
	padding:10px;
	border-radius:10px;
}




h2::before{
	display: inline-block;
	content:url("../images/service01/h2-icon.png");
	vertical-align: middle;
	margin-right:10px;
	
}



h2 + p{
	font-size:1.2rem;
	margin-bottom:10px;
}




/* 当サービスの特徴 / 選ばれる理由 */

.reason{
	margin: 4rem 2rem 6rem; /* 下マージンを広げ、後のセクションとの間隔を確保 */
	position:relative;
}


.reason::before{
	content: url("../images/service01/earth_makasete.gif");
	position:absolute;
	right:180px;
	top:-70px;
}

.reason::after{
	content: url("../images/service01/wakusei.gif");
	position:absolute;
	right:0;
	top:-70px;
}

.reasonTT{
width: fit-content;	
  color: #fff;
  text-align: center;
  line-height:2;
}


.reasonTT h2 {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto 30px;
background:transparent;	
  transform:rotate(-5deg) translate(10px,-30px);
padding:0 10px 0 30px;
}
.reasonTT h2:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background:#003b8a;
  transform:translateX(10px) skewX(-45deg);
}

.reason p,.reason p b{
	font-size:120%;
}



.reason ul li h3{
	color:#fff;
	background:#6cb92d;
	padding:25px 0 15px 0;
}

.reason ul li{
	border:3px solid #6cb92d;
	background:#fff;
	position:relative;
}

.reason ul li::before{
	position:absolute;
	top:-60px;
	left:calc(50% - 50px);
}


.reason ul li:nth-child(1)::before{
	content:url("../images/service01/point1.png");
}

.reason ul li:nth-child(2)::before{
	content:url("../images/service01/point2.png");
}

.reason ul li:nth-child(3)::before{
	content:url("../images/service01/point3.png");
}

.reason ul li p{
	padding:0 15px 15px;
	text-align:left;
}

.reason ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:15px;
}

.reason ul{
	text-align: center;
}

.reason ul li{
	width:31%;
}


/*スマとくとは？*/

.sumatoku{
	background:#a4ce61;
}

.sumatokuTT{
	background:#cfe7db;
	position:relative;
}

.sumatokuTT::after{
	content:url("../images/service01/earth_benri.png");
	position:absolute;
	top:-20px;
	right:100px;
}



.sumatoku h2{
	background:#a4ce61 !important;
	color:#fff;
	margin-bottom:20px;
	width: fit-content;
	border-radius:0 20px 0 0;
}


.sumatoku .whats{
	margin:1rem;
}

.sumatoku .whats > p{
	font-size:1rem;
	margin:30px 0 60px;
}

.sumatoku .whats > p b{
	font-size:110%;
}


.sumatoku .whats ul{
	background:#fff;
	display:flex;

}

.sumatoku .whats ul li:not(:last-child){
	border-right:2px dashed #42b5bd;
}

.sumatoku .whats ul li{
		position:relative;
	flex: 1;
}

.sumatoku .whats ul li p{
	padding:50px 10px 0 10px;
}

/*雲*/

.sumatoku .whats .cloud{
	width:100%;
	height:100px;
	position:absolute;
  left: 50%;
  transform: translate(-50%,-50px);
	background:url("../images/service01/cloud-bk.png") center no-repeat;
}

.sumatoku .whats strong{
	font-size:135%;
	font-weight:600;
	background-image: linear-gradient(rgba(0 0 0 / 0) 60%, #ffe943 60%);
}





/*(スマとくご利用の流れ)*/

.sumatoku-flow{
	padding:3rem 0;
	margin:0;
	background:url("../images/service01/bk_cloud_w.gif") top no-repeat #fff;
	border-left:1px solid #cecece;
	border-right:1px solid #cecece;
}

.sumatoku-flow > h3{
	margin-left:30px;
	position:relative;
}

.sumatoku-flow > h3::after{
	content: url("../images/service01/earth_smooth.gif");
	position:absolute;
	left:450px;
}








.sumatoku .whats h3{
	color:#fff;
	font-weight: 900;
	position:absolute;
  left: 50%;
	top:50%;
  transform: translate(-50%,-50%);
}

.sumatoku-flow ul > li:not(:last-child){
	position:relative;
	margin-bottom:117px;
}


.sumatoku-flow ul > li:not(:last-child)::after{
	content:url("../images/service01/arrow.gif");
	position:absolute;
	left:calc(50% - 30px);
	display:block;
	margin:20px 0;

}

.sumatoku-flow ul > li:last-child{
	position:relative;
}

.sumatoku-flow ul > li:last-child::before{
	content:url("../images/service01/earth_benrisigi.gif");
	position:absolute;
	left:50px;
	top:-80px;
}

.sumatoku-flow ul > li:last-child::after{
	content:url("../images/service01/wakusei_ho.gif");
	position:absolute;
	right:50px;
	top:-80px;
}






.sumatoku-flow dl {
  display: flex;
flex-flow: column;
  justify-content:center;
text-align:center;
}

.sumatoku-flow dt{
	font-weight: 900;
	font-size:1.8rem;
	
}

/*(仕様登録)*/

.register{
	width:800px;
	margin:auto;
	text-align:left;
}

.register h4{
	border-bottom:1px solid #007440;
	padding:0 10px;
}

.register li b{
	display:inline-block;
	transform:translate(20px,-40px);
	color:#42b5bd;
	font-size:1.3rem;
}


.register li{
	padding:20px 0;
	margin:0 35px;
}


.register li:not(:last-child){
	border-bottom:2px dashed #42b5bd;
}

.register li::before{
	display: inline-block;
}

.register li:nth-child(1)::before{
	content: url("../images/service01/register01.gif");
}

.register li:nth-child(2)::before{
	content: url("../images/service01/register02.gif");
}

.register li:nth-child(3)::before{
	content: url("../images/service01/register03.gif");
}







/*申請メニュー*/

.menu{
	background:#78c2c4;
	padding-bottom:3rem;
	position:relative;
}

.menu::after{
	content:url("../images/service01/earth_mite2.gif");
	position: absolute; /* PCでのみ表示 */
	right: -160px;
	top: 60px;
}


.menu > section{
	padding:0 2rem;
}

.menu *{
	margin:0;
}

.menuTT{
	background:#cfe7db;
}

.menu h2{
	background:#78c2c4 !important;
	color:#fff;
	margin-bottom:20px;
	width: fit-content;
	border-radius:0 20px 0 0;
}

label{
	cursor:pointer;
}

label h3{
	padding:0;
	margin:0;
	font-size:170%;
}

.acd-check{
    display: none;
}
.acd-label{
    border:3px solid #0a6e3e;
    color: #0a6e3e;
    background:#fff;
    display: flex;
    align-items: center;
    padding: 0 40px 0 10px;
    position: relative;
	line-height: 1.2;
	min-height: 49px; /* heightをmin-heightに変更し、柔軟性を持たせる */
	box-sizing: border-box;
}
.acd-label:after{
    background: #2bac38;
	color:#fff;
    box-sizing: border-box;
    content: '▼';
	font-size:1rem;
    display: flex; /* 中央揃えのためflexに変更 */
	align-items: center;
	justify-content: center;
    height: 44px;
    position: absolute;
    right: 0;
    top: 0;
}
.acd-content{
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility:hidden;
	background:#fff;
	margin-bottom: 10px;
}
.acd-check:checked + .acd-label:after{
    content: '▲';
	font-size:1rem;
}
.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 20px;
    visibility: visible;
	border:1px solid #185138;
	border-top:none;
}

.acd-content > p{
	font-size:0.9rem;
	padding-left: 70px;
  position: relative;

}

.acd-content > p::before {
	content:'';
	background-image: url("../images/service01/earth_hand.gif");
	background-size:cover;
	position: absolute;
	width:60px;
	height:60px;
	top: 0;
	left: 0;
}

.acd-content::after{
	content:'※掲載されている日数は目安です。';
	font-size:85%;
	margin-left:50px;
}





/* 補助金に活用 */

.hojo{
	background:#fff;
	margin:40px 30px 0;
	width:calc(100% - 60px);
}

.hojo caption{
	font-size:1.2rem;
	font-weight:900;
	color:#fff;
}





.hojo th,.hojo td{
	border:1px solid #2bac38;
	padding:5px;
	text-align: center;
}

.hojo th{
	font-weight:normal;
	font-size:90%;
	background:rgba(43,172,56,0.1);
}


/*(ご依頼の前に)*/

.check{
	margin-bottom:2.5rem;
}


.check > div {
  position: relative;
  padding: 1rem 2rem;
  text-align: center;
  color: #000;
  border-radius: 0 10px 10px 10px;
  background:#d1e8cc;
	margin-top:70px;
}

.check > div:before {
  font-size: 13px;
  position: absolute;
  top: -30px;
  left: 0;
  height: 20px;
  padding: 0.5rem 1em;
  content: 'ご依頼前にCheck！';
  color: #fff;
  border-radius: 10px 10px 0 0;
  background:#07917e;
}



.check ul {
  font-size: 13px;
  line-height: 1.8;
  list-style-type: none;
	text-align: left;
}

.check li+li {
  margin-top: 5px;
}

.check li {
  position: relative;
  padding-left: 25px;
}


.check li:after {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  border-radius: 2px;
	background:#fff;
}


/*各メニューご利用の流れ*/

.menu-flow {
	margin:15px 0 60px 30px;
}



.menu-flow h4{
	width: fit-content;
    background-image: linear-gradient(rgba(0 0 0 / 0) 60%, #ffe943 60%);
	line-height:1;
}

.menu-flow ul {
  padding: 0;
position: relative;
margin:20px 30px 30px;	
}



.menu-flow > ul::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #d1e8cc;
  margin-left: -129px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
  border-radius: 20px;
}

.menu-flow ul > li {
  position: relative;
}

.menu-flow ul > li:not(:last-child) {
  margin-bottom: 30px;
}

.menu-flow ul > li .icon03 {
  font-size: 0.8em;
  padding:10px 10px;
  line-height: 1;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  background: #07917e;
  display: inline-block;
  margin-right: 0.3em;
}

.menu-flow ul > li > dl {
  padding-left: 70px;
  position: relative;
  line-height: 1.2;
}

.menu-flow ul > li > dl::before,
.menu-flow ul > li > dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.menu-flow ul > li > dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #07917e;
  border-radius: 50%;
  left: -4px;
}

.menu-flow ul > li > dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}

.menu-flow ul > li > dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #07917e;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}


/* 成果物 吹き出し */
.deliverable{
  position: relative;
  background:#d1e8cc;
  border-radius: 10px;
  display: inline-block;
  transform: translate(150px,5px);
}

/* 色付きの半円 */
.deliverable::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 100px;
  top: -15px;
  border-left: 20px solid #d1e8cc;
  border-top: 15px solid #d1e8cc;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
/* 白い半円 */
.deliverable::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 80px;
  top: -20px;
  border-left: 20px solid #fff;
  border-top: 20px solid #fff;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

/*会員様にお送りしまーす*/

.deliverable ul{
	position:relative;
	padding:15px 10px 10px 15px;
	margin:0;
}

.deliverable ul::before{
	content:url("../images/service01/earth_send.gif");
	position:absolute;
	top:0;
	left:-200px;
}


.deliverable li{
	margin:15px !important;
	font-size:0.8rem;
	font-weight:600;
	position:relative;
	padding-left:40px;
}

.deliverable li::before{
	content: url("../images/service01/deliverable-icon.png");
	position: absolute;
	top:0;
	left:0;
}





/*対応エリア*/

.area{
	background:#cddb24;
	position:relative;
}

.areaTT{
	background:#cfe7db !important;
}

.area h2{
	background:#cddb24;
	color:#fff;
	margin-bottom:20px;
	width:fit-content;
	border-radius:0 20px 0 0;
}

.areamap{
	padding-bottom:20px;
}



/*(イメージマップ)*/

 .lightbox { display: none; }
  /* oデフォルトのスタイルを上書きします */
  .fixwidth {
    background: rgba(256,256,256, 0.8);
  }
  .fixwidth .featherlight-content {
    width: 500px;
    padding: 25px;
    /*color: #fff;*/
    background: #111;
  }
  .fixwidth .featherlight-close {
    /*color: #fff;*/
    background: #333;
  }

.lightbox a::after{
	content:url("../images/service01/icon_link.gif");
	margin-left:5px;
}





/*よくある質問*/

.qa{
	background:#78c2c4;
	padding-bottom:1.5rem;
	position:relative;
	padding:0;
}

.qa::before{
	content: url("../images/service01/earth_sukiri.png");
	position:absolute;
	top:-50px;
	left:250px;
	z-index:99;
}

.qa::after,.area::after{
	content: url("../images/service01/bk_wood.gif");
	position:absolute;
	top:-15px;
	right:25px;
}



.qaTT{
	background:#cfe7db;
}

.qaTT h2{
	background:#78c2c4 !important;
	color:#fff;
	margin-bottom:20px;
	width: fit-content;
	border-radius:0 20px 0 0;
}

.qaTT + div{
	background:#fff;
	margin:20px;
	border-radius:10px;
	box-sizing:border-box;
}

.qa details:not(:last-child) {
    max-width: 100%;
    margin-bottom: 5px;
    border-bottom: 2px dotted #78c2c4;
}

.qa summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 4em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa summary::before,
.qa details p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa summary::before {
    color: #78c2c4;
    content: "Q";
	font-size:1.5rem;
	position:absolute;
	left:1.5rem;
}

.qa summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-bottom: 5px solid #78c2c4;
    border-right: 5px solid #78c2c4;
    content: '';
    transition: transform .5s;
}

.qa details[open] summary::after {
    transform: rotate(225deg);
}

.qa details p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em 4em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

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

.qa details p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
	font-size:1.5rem;
	position:absolute;
	left:1.5rem;
}



/* お問合わせ */
.contact{
	text-align:center;
	background:#fff;
	margin: 0;
	padding: 0;
}

.hojo {
	margin: 0;
	width: 100%;
}

/* 画像のレスポンシブ対応 */
.contact img {
    max-width: 100%;
    height: auto;
    width: 100%; /* width属性を上書き */
	margin: 0;
	padding: 0;
}


/* 768px以下のスクリーンサイズ（タブレット・スマートフォン） */
@media screen and (max-width: 768px) {

    /* ページヘッダー */
    .page-header-content .page-title {
        font-size: 1.8rem;
    }

    .top {
        height: 350px; /* スマートフォン向けに高さを調整 */
    }

    /* 導入部分 */
    .top h1 {
        font-size: 1.6rem;
        line-height: 1.4;
        padding: 30px 20px !important;
    }

    .first p {
        font-size: 0.9rem;
    }

    /* 選ばれる理由 */
    .reason {
        margin-top: 10rem; /* 画像とタイトルが重ならないように十分なスペースを確保 */
		margin-bottom: 4rem;
    }

    .reason::before,
    .reason::after {
        top: -140px; /* タイトルと重ならないよう、より上に配置 */
        left: 50%;
        right: auto;
    }

    .reason::before {
        transform: translateX(-110%); /* 中央から左に配置 */
    }
    .reason::after {
        transform: translateX(10%); /* 中央から右に配置 */
    }
    .reasonTT {
        margin-left: auto;
        margin-right: auto;
    }
    .reason ul {
        /* flex-directionをcolumnにすることで、リストを縦並びにする */
        flex-direction: column;
        gap: 5rem; /* liの::before要素が重ならないように間隔を調整 */
        align-items: center; /* li要素を中央揃えにする */
    }

    .reason ul li {
        width: 90%;
		max-width: 340px;
    }

    /* 申請サポートメニュー */
	.menu::after {
		display: none; /* スマホでは画像を非表示 */
	}

	.menu > section {
		margin-bottom: 1rem; /* section間のマージンを調整 */
	}

	.acd-label {
		padding: 0.8rem 50px 0.8rem 1rem; /* スマホでの高さを直接調整 */
		min-height: 0;
	}

	.menu .acd-label h3 {
		font-size: 1rem;
		padding: 0; /* h3自体のpaddingは不要に */
	}

	.acd-check:checked + .acd-label + .acd-content {
		padding: 1rem;
	}

    /* 成果物 */
    .deliverable {
        transform: none;
        margin: 1rem 0;
    }

    .deliverable ul::before {
        display: none;
    }

    .deliverable li {
        padding-left: 50px; /* アイコンとテキストが重ならないように、左の余白を調整 */
    }

    /* よくある質問 */
	.qa::before {
		display: none; /* スマホでは画像を非表示 */
	}
    .qa p {
        font-size: 0.9rem;
    }

}