@charset "UTF-8";
/* CSS Document */

* {
  box-sizing: border-box;
}
 
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
 
body {
	display: flex;
	flex-direction: column;
	color: #262626;

	font-family: "Helvetica Neue";
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;a
}

header {
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
}

main {
	margin-top: 200px; /* （※）の高さに合わせる */
	width: 100vw;
	padding: 0;
	background: #fff !important;
	z-index: 1;
}

footer {
	margin-top: auto;
	padding: 3rem 0;
	text-align: center;
}

p{
	display: block;
	margin: 3rem auto;
	padding: 0;
	text-align: center;
	font-size: 1.4rem;
	line-height: 2.6rem;
}

a{
	display: block !important;
}


.yohaku {
	line-height: 5rem;
	text-indent: -9999;
}


/*スマートフォンでは左揃え*/
@media screen and (max-width:768px) {
	p{
		text-align: justify;
		font-size: 1.2rem;
		line-height: 2.4rem;
	}
}

/*----------------------------
     　　　リンク設定
----------------------------*/

/* アンカーテキストのリンク色 */
a{
	color: #333 !important;
	text-decoration: none !important; /*下線消す*/
}

/*ホバー時の色*/
a:hover{
	color: #333 !important;
	text-decoration: underline !important;
}

/*クリック時の色*/
a:active{
	color: #333 !important;
	text-decoration: none;
}


/*===== 画面幅に併せて画像縮小 =====*/
.resizeimage img {
	width: 100%;
}


/*----------------------------
    　      見出し
----------------------------*/
/*見出しH2*/
h2{
	display: block !important;
	margin: 3rem auto 2rem !important;
	padding: 5rem 0 0 !important;
	text-align: center !important;
	color: #219ad6;
	font-weight: 600 !important;
	font-size: 2.1rem !important;
	line-height: 3.3rem !important;
	z-index: 2;
}
h2.white{
	color: #fff !important;
}
@media screen and (max-width:768px) {
h2{
	font-size: 1.6rem !important;
	line-height: 2rem !important;
}
}

/*見出しH3*/
h3{
	display: block !important;
	margin: 0 auto 2rem !important;
	padding: 0 !important;
	text-align: center !important;
	font-weight: 700 !important;
	font-size: 1.8rem !important;
	line-height: 2rem !important;
}
@media screen and (max-width:768px) {
h3{
	font-size: 1.6rem !important;
	line-height: 3rem !important;
}
}

/*見出しH4*/
h4{
	display: block !important;
	margin: 0 auto 2rem !important;
	padding: 0 !important;
	text-align: center !important;
	font-weight: 700 !important;
	font-size: 1.7rem !important;
	line-height: 2rem !important;
	border-bottom: 3px solid #333;
}
@media screen and (max-width:768px) {
h4{
	font-size: 1.3rem !important;
	line-height: 2rem !important;
}
}



/*----------------------------
       セクション背景指定
----------------------------*/
section{
	display: block;
	width: 100vw;
	margin: 0 auto;
	padding: 1rem 0 3rem;
    align-items: center;
    gap: 1rem;
	overflow: hidden;
}
@media (max-width: 62.5rem) {
    section {
        display: block;
		overflow: hidden;
    }
}

.blue{
	background: #73ccef;
	color: #fff !important;
}

.yellow{
	background: #ffda00;
}

.gray{
	background: #ededed;
}

.pink{
	background: #ff6e80;
	color: #fff !important;
}


/*----------------------------
       メインビジュアル
----------------------------*/
.mv{
	display: flex;
	width: auto;
	height: 687px;
	margin: 0 auto;
	background: url("./../images/top/bg_mainvisu.png") ;
	background-size: contain;
	background-repeat:  no-repeat; 
	background-position: 70% 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
}

@media screen and (max-width:750px){
.mv{
	position: relative;
	width: 100vw;
	min-height: 300px;
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	}
}
.cleartext {
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
.maintext{
	position: absolute;
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	font-size: 2.8rem !important;
	line-height: 4rem;
	font-weight: 700;
	text-align: left;
	color: #333;
	top:-50px;
	letter-spacing: 0.1em;
}
.maintext span{
	font-size: 4rem !important;
	line-height: 5rem;
	font-weight: 700;
	text-align: left;
	color: #333;
	letter-spacing: 0.1em;
}

@media screen and (max-width:750px){
.maintext{
	display: block;
	width: 100%;
	font-size: 1.1rem !important;
	background-color: rgba(255,255,255,0.70);
}
.maintext span{
	font-size: 1.6rem !important;
	background-color: rgba(255,255,255,0.70);

}
}

.mv-list ul{
	display: block;
	position: absolute;
	margin: 0 auto;
	padding: 5rem 0 0 0;
	color: #333;
	top:150px;
	left: 250px;
	z-index: 1;
}
.mv-list ul li{
	display: block;
	border: none;
	list-style: none;
	font-size: 1rem;
	font-weight: 700;
	line-height: 2.5rem;
	text-align: left;
}
@media screen and (max-width:750px){
.mv-list ul{
	display: block;
	top:300px;
	left: 0;
	background-color: rgba(255,255,255,0.70);
}
.mv-list ul li{
	width: 100%;
}
}

.midashi div{
	display: inline-block;
}
.maintext img{
	width: 133px;
	height: 133px;
	float: left;
}
@media screen and (max-width:750px){
.maintext img{
	display: block;
	width: 157px;
	height: 157px;
	float: none;
}
}

/*----------------------------
     モバイル端末画像表示
----------------------------*/
@media screen and (max-width:750px) {
img {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
}

/*----------------------------
　　　　　　動的動作
----------------------------*/
/* CSSアニメーションの指定 */
.Headline{
  animation: SlideIn 1.6s;
}

/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}
.fadein.active{
  opacity: 1;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	transform-origin:left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform:translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}


/*----------------------------
     　　　リンク設定
----------------------------*/

/* アンカーテキストのリンク色 */
a{
	color: #fff !important;
	text-decoration: none !important; /*下線消す*/
}

/*ホバー時の色*/
a:hover{
	color: #fff !important;
	text-decoration: underline !important;
}

/*クリック時の色*/
a:active{
	color: #fff !important;
}


/*----------------------------
    　リンク画像デザイン
----------------------------*/
/* 追加：リンク画像ホバー時に半透明に */
a img {
border:none;
verticle-align:top;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
a:hover img {
	opacity: 0.7;     /* 透過レベル */
	filter: alpha(opacity=80);
}


/*----------------------------
　　　　TOPへ戻るボタン
----------------------------*/

#page-top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	font-weight: 400 !important;
	font-size: 1rem;
	line-height: 1;
	z-index: 9999;
}
#page-top a {
  background: none;
  text-decoration: none;
  width: 90px;
  padding: 28px 5px;
  text-align: center;
  display: block;
  border-radius: 90px;
  opacity: 0.9;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}


/*----------------------------
　　　　　相談申し込み
----------------------------*/

.box_info{
	display: block;
	max-width:1000px;
	height: auto;
	margin: 0 auto 5rem;
	padding: 3rem;
	text-align: center;
	background: #fff;
	border-radius: 1rem;
}
.box_info li{
	display: inline-block;
	border: none !important;
}
.icon_info img{
	width: 200px !important;
	height: auto;
	border:0;
}

li.text-left div{
	text-align: left;
}
.mark_mail:before {
	content: url('../images/top/mark_mail.png');
	margin-right:10px;  /*画像右の余白*/
	line-height: 3.3rem;
}
.info-tel{
	font-size: 2.8rem;
	font-weight: 700 !important;
	line-height: 3.3rem;
	letter-spacing: 0.1em;
}
.info-tel img{
	display: inline-block;
	width: 40px;
	margin-right: 7px;
	line-height: 3.3rem;
}
.info-mail,
.info-mail a:link{
	font-size: 1.4rem;
	font-weight: 700 !important;
	line-height: 3.3rem;
	letter-spacing: 0.1em;
	color: #333 !important;
}
.info-mail img{
	display: inline-block;
	width: 40px;
	margin-right: 7px;
	line-height: 3.3rem;
}
.info-blue{
	color: #219ad6;
	font-size: 1.4rem;
	font-weight: 400 !important;
	line-height: 2rem;
	letter-spacing: 0.1em;
}

@media screen and (max-width:768px){
.box_info{
	max-width:97%;
	padding: 1rem;
}
.box_info li{
	display: block;
	border: none !important;
	vertical-align: middle !important;
}
.info-tel{
	font-size: 2.2rem;
	line-height: 3rem;
}
.info-tel img{
	width: 40px;
	line-height: 3rem;
}
.info-mail,
.info-mail a:link{
	font-size: 1rem;
	line-height: 3rem;
}
.info-mail img{
	line-height: 3rem;
}
.info-blue{
	font-size: 1.2rem;
}
}


/*----------------------------
　　　　　　イベント
----------------------------*/
#event{
	margin: 0 auto;
	width: 100vw;
	height: auto;
	background-image:url("../images/top/bg_event.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position:50% 50%;
	justify-content: center;
	align-items: center;
}


/*----------------------------
　　about　ダウンロードリスト
----------------------------*/

.item-dl{
	display: flex;
	width: 800px;
	height: auto;
	margin: 3rem auto;
	padding: 0;
	text-align: center;
	justify-content: center; /* 中央寄せ */
}
.item-dl .itemdl{
	box-sizing: border-box;
	width: 300px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	vertical-align: middle;
	border-radius: 7px;
}
@media screen and (max-width:768px) {
.item-dl{
	display: block;
	width:100%;
}
.item-dl .itemdl{
	width:97%;
	margin: 1rem auto;
}
}
.itemdl div{
	margin: 0 auto;
	padding: 1rem 2rem;
	text-align: center;
	vertical-align: middle;
	color: #333 !important;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.6rem;
	background: #fff;
	border: #333 2px solid;
	border-radius: 0.5rem;
}
@media screen and (max-width:768px) {
.itemdl div{
	padding: 1rem 0;
	text-align: center;
}
}
.itemdl a{
	color: #333 !important;
	transition: 0.5s;
	text-decoration: none !important;
}
.itemdl a:hover{
	color: #333 !important;
	background: #27acd9 !important;
}
.itemdl img{
	max-width: 100%;
	height: auto;
	padding: 0;
}

.text-about{
	color: #333;
	font-size: 1.4rem;
	
}

.btn--yellow {
	display: block;
	width: 300px;
	height: auto;
	margin: 1rem auto;
	padding: 0;
	text-align: center;
	font-size: 1.6rem;
	color: #333;
	background-color: #ffda00;
}

.btn--radius {
   border-radius: 100vh;
}

/*----------------------------
　　about　対応の種類
----------------------------*/

.item-type{
	display: flex;
	width: 1200px;
	height: auto;
	margin: 1rem auto;
	padding: 0;
	text-align: center;
	justify-content: center; /* 中央寄せ */
}
.item-type .itemtype{
	box-sizing: border-box;
	width: 280px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	vertical-align: middle;
	border-radius: 7px;
}
@media screen and (max-width:768px) {
.item-type{
	display: block;
	width:100%;
}
.item-type .itemtype{
	width:97%;
	margin: 0.7rem auto;
}
}
.itemtype div{
	margin: 0 auto;
	padding: 1rem 0.5rem;
	text-align: center;
	vertical-align: middle;
	color: #333 !important;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.8rem;
	background: #fff;
	border: #219ad6 5px solid;
	border-radius: 1rem;
}
@media screen and (max-width:768px) {
.itemtype div{
	padding: 2rem 0 0;
	text-align: center;
}
}
.itemtype a{
	color: #219ad6 !important;
}
.itemtype a:hover{
	color: #219ad6 !important;
}

.itemtype img{
	max-width: 100%;
	height: auto;
	padding: 1rem 0 0;
}

.sankaku{
	display: block;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #219ad6;
}


/*----------------------------
　　　　ワンストップ支援
----------------------------*/

.onestop{
	display: block;
	max-width:1200px;
	height: auto;
	margin: 1rem auto;
	padding: 3rem;
	text-align: center;
	background: #219ad6;
	border-radius: 1rem;
	color: #fff;
	font-size: 1.6rem;
}
@media screen and (max-width:768px){
.onestop{
	max-width:97%;
	padding: 1rem;
}
}

.text-black{
	margin: 1rem auto 0;
	padding: 0;
	text-align: center;
	color: #333;
	font-size: 1.4rem;
	line-height: 2rem;
}
@media screen and (max-width:768px){
.text-black,
.text-white{
	text-align: left;
}
}

.onestop ol li{
	display: inline-table;
	width: 150px;
	background: #fff;
	border-radius: 30px;
	border:none;
	margin: 1rem 0.5rem 0;
	padding: 0.5rem;
	text-align: left;
	color: #219ad6;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1rem;
}

.circle_number {
	display: inline-block;
	width: 30px;
	height: 30px;
	padding-top: 5px;
	color: #fff;
	font-size: 1.3rem;
	background: #219ad6;
	border: none;
	border-radius: 50%;
	text-align: center;
	box-sizing: border-box;
}

.onestop ul li{
	display: inline-table;
	width: 150px;
	background: none;
	border-radius: 30px;
	border: none;
	margin: 0 0.5rem;
	padding: 0 0.5rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.88rem;
	line-height: 1rem;
	vertical-align: text-top;
}


.onestop-list{
	display: inline-block;
	margin: 0 auto;
	font-size: 0.88rem;
	line-height: 1rem;
}




/*----------------------------
　　　　イベント　リスト
----------------------------*/

.event-list{
	display: flex;
	width: 1200px;
	height: auto;
	margin: 5rem auto;
	padding: 0;
	text-align: center;
	justify-content: center; /* 中央寄せ */
}
.event-list .eventitem{
	box-sizing: border-box;
	width: 380px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	vertical-align: middle;
}
@media screen and (max-width:768px) {
.event-list{
	display: block;
	width:100%;
}
.eventlist .eventitem{
	width:97%;
}
}
.eventitem div{
	margin: 0 auto;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	color: #219ad6 !important;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 2rem;
}

.eventitem .bg-white{
	background: #fff;
	padding: 0.5rem;
	color: #333 !important;
}

@media screen and (max-width:768px) {
.eventitem div{
	padding: 2rem 0 0;
	text-align: center;
}
}

.eventitem img{
	max-width: 100%;
	height: auto;
	padding: 0;
	vertical-align:top;
}


/*----------------------------
　　　　　　エントリー
----------------------------*/

.entry-list{
	display: flex;
	width: 1100px;
	height: auto;
	margin: 5rem auto;
	padding: 0;
	text-align: center;
	justify-content: center; /* 中央寄せ */
}
.entry-list .entryitem{
	box-sizing: border-box;
	max-width: 500px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	vertical-align: middle;
	border-radius: 7px;
}
@media screen and (max-width:768px) {
.entry-list{
	display: block;
	width:100%;
}
.entry-list .entryitem{
	width:97%;
}
}
.entryitem div{
	margin: 0 auto;
	padding: 2rem 2rem 1rem;
	text-align: center;
	vertical-align: middle;
}
@media screen and (max-width:768px) {
.entryitem div{
	padding: 2rem 0 0;
	text-align: center;
}
}

.entryitem img{
	max-width: 500px;
	height: auto;
	padding: 0;
}

.entry-btn {
	position: relative;
	margin: 0 auto 7rem;
	padding: 0;
	text-align: center;
	z-index: 1;
}
.entry-toki{
	position: absolute;
	display: block;
	width: 550px;
	height: auto;
	border: 0;
	margin: 0 auto 7rem;
	padding: 0;
	text-align: center;
	top: 700px;
	z-index: 2;
}
.entry-toki img{
	display: block;
	width: 150px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
.entry-toki2{
	position: absolute;
	display: block;
	width: 550px;
	height: auto;
	border: 0;
	margin: 0 auto 7rem;
	padding: 0;
	text-align: center;
	top: 700px;
	z-index: 2;
}
.entry-toki2 img{
	display: block;
	width: 150px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
@media screen and (max-width:768px) {
.entry-toki,
.entry-toki2{
	display: none;
}
.entry-toki img,
.entry-toki2 img{
	display: none;
}
}


/*----------------------------
　　　TOP事例紹介セクション
----------------------------*/

.service-item-list{
	display: flex;
	width: 1200px;
	height: auto;
	margin: 5rem auto;
	padding: 0;
	text-align: center;
	justify-content: center; /* 中央寄せ */
}
.service-item-list .service-item{
	box-sizing: border-box;
	width: 300px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	vertical-align: middle;
	border-radius: 7px;
}
@media screen and (max-width:768px) {
.service-item-list{
	display: block;
	width:100%;
}
.service-item-list .service-item{
	width:97%;
	margin: 1rem auto;
}
}
.service-item div{
	margin: 0 auto;
	padding: 2rem 2rem 1rem;
	text-align: center;
	vertical-align: middle;
	color: #219ad6 !important;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 2rem;
	background: #fff;
	border: #219ad6 5px solid;
	border-radius: 1rem;
}
@media screen and (max-width:768px) {
.service-item div{
	padding: 2rem 0 0;
	text-align: center;
}
}
.service-item a{
	color: #219ad6 !important;
}
.service-item a:hover{
	color: #219ad6 !important;
}

.service-item img{
	max-width: 100%;
	height: auto;
	padding: 0;
}

.sankaku{
	display: block;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #219ad6;
}

/*---------------------------------
　Edgeの画像ホバーメニューを一括非表示
---------------------------------*/

img {
    pointer-events: none;
}