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

#hojin h2{
	text-align: center;
}

#hojin p.h2_text{
	margin-top: 50px;
	margin-bottom: 130px;
	line-height: 2;
	text-align: center !important;
}

#hojin p.h2_text2{
	margin-top: 50px;
	margin-bottom: 80px;
	line-height: 2;
	text-align: center !important;
}

#hojin h2.keisen_top{
	border-top: solid 2px #fff;
	padding-top: 100px;
}

#hojin h3{
	margin-bottom: 50px;
	text-align: center;
}

#hojin h4{
	margin-bottom: 20px;
}

#hojin {
	padding-top: 0 !important;
}

#hojin .bnrarea{
	display: flex;
	flex-wrap: nowrap;
	height: 100vh;
	align-items: center;
}

#hojin .bnr_item{
	width: calc(100% / 3);
	height: 100%;
	    display: flex;
    align-items: center;
    justify-content: center;
}

#hojin .solution_bk{
background: url("../images/solution_bk.jpg") no-repeat top 0 right -190px;
	background-size: cover;
}

#hojin .creative_bk{
background: url("../images/creative_bk.jpg") no-repeat top 0 right -200px;
	background-size: cover;
}

#hojin .space_bk{
background: url("../images/space_bk.jpg") no-repeat top 0 left -150px;
	background-size: cover;
}

#hojin a .nomal{
	font-size: 40px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 1px 2px 5px rgba(0,0,0,0.2);
	text-align:center; 
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	line-height: 1.5;
}

#hojin a .nomal .tit_sub{
	font-size: 25px;
	display: contents;
}


#hojin a .hover{
display: none;
}

#hojin a:hover .nomal{
display: none;
}

#hojin a:hover .hover{
font-size: 24px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 1px 2px 5px rgba(0,0,0,0.2);
	text-align:left; 
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	line-height: 3;
}

#hojin .wrap{
	padding: 130px 0 80px 0;
}

#hojin .wrap_last{
	padding: 100px 0 200px 0;
}

#hojin .jigyouimg_box{
	margin-top: 60px;
}

#hojin .jigyou_box{
	display: flex;
	flex-wrap: nowrap;
	margin-top: 100px;
}

#hojin .text_l{
	max-width: 670px;
	margin-right: 60px;
}

#hojin .text_l p{
	line-height: 1.8;
	font-size: 16px;
}

#hojin .original-box-shadow-gray{
	margin-top: 30px;
	max-width: 235px;
	float: right;
}

#hojin .media_guide_btn{
	margin-top: 30px;
	max-width: 235px;
	float: right;
}

#hojin .img_r{
	position: relative;
}

#hojin .img_r img{
	width: 100%;
	max-width: 350px;
	vertical-align: bottom;
}

#hojin img.popup_icon{
	position: absolute;
	top:175px;
	right:5px;
	max-width: 16px;
}

#hojin .tuyomi_box{
	position: relative;
	margin: 100px auto 280px;
	height: 473px;
}

#hojin .tuyomi_box p{
		font-size: 16px;
	line-height: 1.7;
	}
	

#hojin .tuyomi_text{
	position: absolute;
	padding: 60px 80px;
	z-index: 1;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 5px 5px 10px -1px rgba(0, 0, 0, .16);
	bottom: -80px;
	left:0;
	max-width: 490px;
}

#hojin .tuyomi_text_r{
	position: absolute;
	padding: 60px 80px;
	z-index: 1;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 5px 5px 10px -1px rgba(0, 0, 0, .16);
	bottom: -80px;
	right:0;
	max-width: 490px;
}

#hojin p.tuyomi_tit{
	font-weight: bold;
	font-size: 22px;
	padding-bottom: 20px;
	line-height: 1.5;
}

#hojin .tuyomi_img{
	position: absolute;
	text-align: right;
	top: 0;
	right: -70px;
}

#hojin .tuyomi_img_l{
	position: absolute;
	text-align: right;
	top: 0;
	left: -70px;
}

#hojin .tuyomi_img img,#hojin .tuyomi_img_l img{
	width: 100%;
	max-width: 700px;
}

#hojin .main_arrow_right {
  position: relative;
}

#hojin .main_arrow_right::after { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 15px;    /* くの字を山なりに見た時、左側の長さ */
  height: 15px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 3px solid #FFF;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 3px solid #FFF;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
	filter: drop-shadow(3px 3px 8px #666);
}

#hojin .bnr_arrow_right {
  position: relative;
  padding-right: 20px;
}

#hojin .bnr_arrow_right::after { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -80px;
  width: 8px;    /* くの字を山なりに見た時、左側の長さ */
  height: 8px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 2px solid #333;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 2px solid #333;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
}

#hojin .figure_img img{
	width: 100%;
	max-width: 1080px;
}

/*====================================================
ソリューション事業
====================================================*/

#solution h1{
	text-align: center;
	letter-spacing: 0.15em;
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#solution h1.solution_mainimg{
	background: url("../images/solution.jpg") no-repeat;
	background-size: cover; 
	background-position: top;
}

#solution h2{
	text-align: center;
}

#solution p.h2_text{
	margin-top: 50px;
	line-height: 2;
	text-align: center !important;
}

#solution .wrap{
	padding: 100px 0 130px 0;
}

#solution .jigyou_area{
	display: flex;
	margin-top: 80px;
}

#solution .jigyou_box{
	width: calc((100% - 80px) / 3);
	margin-right: 40px;
}

#solution .jigyou_box:nth-child(3n){
	margin-right: 0;
}

#solution .jigyou_title{
	font-size: 20px;
	font-weight: bold;
	padding-top: 15px;
}

#solution .jigyou_text{
	font-size: 16px;
	padding:15px 0 30px;
	line-height: 1.8;
}

#solution .original-box-shadow-gray{
	margin-top: 100px;
}

#solution .jigyou_box{
	opacity: 0;
}

#flow_b{
	margin-bottom: 130px;
}

#flow_b .flow_b_box{
	display: flex;
	justify-content: space-between;
	padding: 90px 0 50px;
	position: relative;
	margin-bottom: 75px;
}

#flow_b .flow_b_box:last-child{
	margin-bottom: 0;
}

#flow_b .circle_ore{
	position: absolute;
	    top: -45px;
    left: 22px;
	text-align: center;
	color: #FF6600;
	font-weight: bold;
	font-size: 20px;
	line-height: 1.2;
}

#flow_b .flow_b_text{
	line-height: 1.8;
	margin-right: 80px;
	padding-left: 80px;
	position: relative;
	width: calc(65% - 150px);
}

#flow_b .flow_b_tit{
	font-weight: bold;
	display: block;
	font-size: 22px;
	padding-bottom: 10px;
}

#flow_b .flow_b_img{
	width: 35%;
}

#flow_b .flow_b_img img{
	width: 100%;
	max-width: 356px;
}

#flow_b .flow_b_box:not(:last-child):after {
    content: '';
    width: 100%;
    height: 25px;
    position: absolute;
    left: 0px;
    bottom: -25px;
    background: url(../images/arrow.png) no-repeat center;
}

.float-button__wrap {
    width: 56px;
    height: 153px;
    position: fixed;
    bottom: 45px;
    right: 0;
    z-index: 10;
}
.float-button__wrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background-color: #e63700;
    color: #fff;
	writing-mode: vertical-rl;
	border-radius: 10px 0 0 10px;
	letter-spacing: 0.05em;
/*	box-shadow: -3px 3px 6px -1px rgb(0 0 0 / 16%);*/
	font-weight: bold;
}

.float-button__wrap a:hover {
    opacity: 1 !important;
}

.float-button__wrap a::before {
  font-family: 'Material Icons Outlined';
  content: '\e554';
	    font-size: 15px;
    font-weight: normal;
	padding-bottom: 3px;
}

.is-hidden {
  visibility: hidden;
  opacity: 0;
	transition: .5s all;
}

.gray_ring_img{
  position: absolute;
	    top: -90px;
    left: -15px;
    max-width: 130px;
	filter: drop-shadow(-2px -2px 3px rgba(255,255,255,1)) drop-shadow(5px 5px 5px rgba(239, 179, 139, 0.4));
}

/*フロー図アニメ*/
#flow_a .step_box{
  height:570px;
  max-width:1080px;
  position: relative;
  margin: 80px auto;
}

#flow_a .gray_ring01,#flow_a .gray_ring02,#flow_a .gray_ring03,#flow_a .gray_ring04,#flow_a .gray_ring05{
  position: absolute;
  z-index:3;
	max-width:190px;
}

#flow_a .gray_top01,#flow_a .gray_top02,#flow_a .gray_top03{
  position: absolute;
  z-index:2;
	max-width:40px;
}

#flow_a .gray_bottom01,#flow_a .gray_bottom02{
  position: absolute;
  z-index:2;
	max-width:40px;
}

#flow_a .gray_line01,#flow_a .gray_line02,#flow_a .gray_line03,#flow_a .gray_line04{
  position: absolute;
  z-index:1;
	max-width:228px;
}

#flow_a .gray_ring01{
  top:0;
  left:0;
}
#flow_a .gray_top01{
	top:190px;
	left: 75px;
}
#flow_a .gray_ring02{
  bottom: 0;
    left: 205px;
}
#flow_a .gray_bottom01{
	bottom:190px;
	left: 285px;
}
#flow_a .gray_ring03{
  top: 0%;
   left: 50%;
   transform: translateX(-50%);
}
#flow_a .gray_top02{
	top: 190px;
   left: 50%;
   transform: translateX(-50%);
}
#flow_a .gray_ring04{
  bottom:0;
  right:205px;
}
#flow_a .gray_bottom02{
	bottom:190px;
	right: 275px;
}
#flow_a .gray_ring05{
  top:0;
  right:0;
}
#flow_a .gray_top03{
	top: 190px;
   right: 70px;
}
#flow_a .gray_line01{
	top: 50%;
   left: 90px;
   transform: translateY(-50%);
}
#flow_a .gray_line02{
	top: 50%;
   left: 300px;
   transform: translateY(-50%);
}
#flow_a .gray_line03{
	top: 50%;
   right: 300px;
   transform: translateY(-50%);
}
#flow_a .gray_line04{
	top: 50%;
   right: 90px;
   transform: translateY(-50%);
}

#flow_a .step01{
  position: absolute;
  z-index:4;
  max-width:62px;
  top:45px;
  left:65px;
}
#flow_a .step02{
  position: absolute;
  z-index:4;
  max-width:75px;
  bottom:40px;
  left:265px;
}

#flow_a .step03{
  position: absolute;
  z-index:4;
  max-width:65px;
  top:40px;
  left: 50%;
   transform: translateX(-50%);
}

#flow_a .step04{
  position: absolute;
  z-index:4;
  max-width:62px;
  bottom:40px;
  right:265px;
}

#flow_a .step05{
  position: absolute;
  z-index:4;
  max-width:62px;
  top:58px;
  right:60px;
}
#flow_a .p_step01,#flow_a .p_step02,#flow_a .p_step03,#flow_a .p_step04,#flow_a .p_step05{
  position: absolute;
  z-index:4;
  font-size:15px;
  max-width:210px;
	text-align: left;
  line-height:1.6;
	font-weight: 600;
}

#flow_a .p_step01 span,#flow_a .p_step02 span,#flow_a .p_step03 span,#flow_a .p_step04 span,#flow_a .p_step05 span{
  font-size:18px;
  font-weight: bold;
  display: block;
  padding-bottom:10px;
  text-align: center;
  letter-spacing:0.05em;
}

#flow_a .p_step01{
 top: 335px;
  left:-20px;
}

#flow_a .p_step02{
  top:90px;
  left:220px;
}

#flow_a .p_step03{
 top: 335px;
  left: 50%;
   transform: translateX(-50%);
}

#flow_a .p_step04{
  top:90px;
  right:205px;
}

#flow_a .p_step05{
      top: 335px;
    right: -20px;
}

.fadeIn-shadowTrigger,.fadeIn-stepTrigger{
  opacity: 0;
}

.fadeIn-shadow{
animation-name:fadeIn-shadowAnime;
animation-duration:0.6s;
animation-fill-mode:forwards;
opacity: 0;
  animation-timing-function: ease-out;
}

@keyframes fadeIn-shadowAnime{
  from {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 0 0 rgba(239, 179, 139, 0));
  }

  to {
    opacity: 1;
     filter: drop-shadow(-2px -2px 3px rgba(255,255,255,1)) drop-shadow(5px 5px 5px rgba(239, 179, 139, 0.4));
  }
}

.fadeIn-step{
animation-name:fadeIn-stepAnime;
animation-duration:0.6s;
animation-fill-mode:forwards;
opacity:0;
  animation-timing-function: ease-in;
  animation-delay: 0.5s;
}

@keyframes fadeIn-stepAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.delay-step01-line{
animation-delay: 0.3s;
}

.delay-step02{
animation-delay: 0.8s;
}

.delay-step02-line{
animation-delay: 1.1s;
}

.delay-step03{
animation-delay: 1.6s;
}

.delay-step03-line{
animation-delay: 1.9s;
}

.delay-step04{
animation-delay: 2.4s;
}

.delay-step04-line{
animation-delay: 2.7s;
}

.delay-step05{
animation-delay: 3.2s;
}

.delay-step05-line{
animation-delay: 3.5s;
}

.delay-step-p{
animation-delay: 4.2s;
}



/*====================================================
クリエイティブ事業
====================================================*/

#creative h1{
	text-align: center;
	letter-spacing: 0.15em;
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#creative h1.creative_mainimg{
	background: url("../images/creative.jpg") no-repeat;
	background-size: cover; 
	background-position: top;
}

#creative h2{
	text-align: center;
}

#creative h2.map_h2{
	text-align: left !important;
}

#creative p.h2_text{
	margin-top: 50px;
	line-height: 2;
	text-align: center !important;
}

#creative p.h2_text_map{
	margin-top: 30px;
	line-height: 2;
}

#creative .wrap{
	padding: 100px 0 130px 0;
}

#creative .jigyou_area{
	display: flex;
	margin-top: 80px;
}

#creative .jigyou_box{
	width: calc((100% - 80px) / 3);
	margin-right: 40px;
}

#creative .jigyou_box:nth-child(3n){
	margin-right: 0;
}

#creative .jigyou_title{
	font-size: 20px;
	font-weight: bold;
	padding-top: 15px;
}

#creative .jigyou_text{
	font-size: 16px;
	padding:15px 0 30px;
	line-height: 1.8;
}
#creative .map_img{
text-align: center;
	position: relative;
	margin-top: 100px;
}

#creative .map_txt{
	position: absolute;
	top:50px;
	left: 100px;
	text-align: left !important;
	max-width: 445px;
}

#creative .map_img img{
	width: 100%;
	max-width: 905px;
}

#creative .flame_img{
	padding: 60px 0 80px;
	text-align: center;
}

#creative .flame_img img{
	max-width: 876px;
}

#creative .jigyou_box{
	opacity: 0;
}

#creative .original-box-shadow-ore{
	margin-top: 60px;
}

/*====================================================
モーダル
====================================================*/

.content{
    margin: 0 auto;
    padding: 40px;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 10;
}
.modal__bg{
    background: rgba(0,0,0,20%);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 60px 7%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 1080px;
	width: 90%;
	border-radius: 10px;
	box-shadow: 5px 5px 10px -1px rgba(0, 0, 0, .16);
	text-align: center;
	box-sizing: border-box;
}
.close_icon{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	font-size: 30px;
	color: #FF6600;
	cursor: pointer;
	font-weight: bold;
}

.pictogram{
	display: flex;
	justify-content: center;
	padding-bottom: 30px;
	border-bottom: solid 1px #D4D0D0;
	margin-bottom: 30px;
}

.pictogram_item{
	padding: 0 70px;
}

.pictogram_item p{
	font-size: 22px;
	font-weight: bold;
	color: #FF822E;
}

.pictogram_item p span{
	font-size: 47px;
	font-weight: bold;
}

.company_rogo{
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
	max-width: 700px;
}

.rogo_item_a{
flex-grow: 1;
	padding-top: 25px;
	text-align: left;
}

.rogo_item_b{
	flex-grow: 2;
}

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

.rogo_item_b ul li p{
	font-size: 16px;
	padding-top: 10px;
}

.rogo_item_b ul li img{
	vertical-align:bottom; 
}

.rogo_item_b ul li{
	padding-right: 20px;
}

.rogo_item_b ul li:last-child{
	padding-right: 0;
}

.modal-content{
	background: #fff;
	text-align: left;
	padding: 50px 100px;
	border-radius: 10px;
	box-shadow: 5px 5px 10px -1px rgba(0, 0, 0, .16);
	text-align: center;
}

.modal_name{
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0.5em;
	padding-bottom: 30px;
	text-align: center;
}

.modal_text_r{
	text-align: right;
	font-size: 16px;
	font-weight: bold;
	margin-top: 50px;
}

/*====================================================
タブ
====================================================*/
#solution .tab,#creative .tab{
  display: flex;
	justify-content: center;
  flex-wrap: nowrap;
	font-size: 12px;
	font-weight: bold;
	padding: 0;
	margin: 50px auto 80px;
}
#solution .tab li a,#creative .tab li a{
	margin: 0 20px;
}
#solution .tab li a:hover,#creative .tab li a:hover{
	color: #E63700;
}

#solution .tab li.active a,#creative .tab li.active a{
  color: #E63700;
	    border-bottom: solid 1px #E63700;
}

#solution .tab li:not(:first-child)::before,#creative .tab li:not(:first-child)::before {
  content: "｜";
	color: #C8C8C8;
}

#solution .area,#creative .area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	margin: 0 auto;
}

/*areaにis-activeというクラスがついた時の形状*/
#solution .area.is-active,#creative .area.is-active {
    display: block;/*表示*/
	 animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/*====================================================
スペースWEB申込み
====================================================*/

#space h1{
	text-align: center;
	letter-spacing: 0.15em;
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#space h1.space_mainimg{
	background: url("../images/space.jpg") no-repeat;
	background-size: cover; 
	background-position: bottom;
}

#space h2{
	text-align: center;
}

#space h2.h2_top_m{
	margin-top: 100px;
}

#space p.h2_text{
	margin-top: 50px;
	padding-bottom: 100px;
	line-height: 2;
	text-align: center;
}

#space .keisen_bottom{
	border-bottom: solid 1px #D4D0D0;
}

#space .space_wrap{
	padding: 100px 0 130px 0;
}

#space p.pan_list {
    padding: 20px 0;
}

#space .login_box{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

#space .login_item{
	width: calc(100% / 2);
	padding: 50px 0;
}

#space .login_item p{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

#space .login_item:first-child{
	border-right: solid 2px #fff;
}

#space .login_item .original-box-shadow-ore{
	margin-top: 30px;
	max-width: 230px;
}

#space .spacearea_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 80px;
}

#space .spacearea_item{
	width: calc((100% - 120px) / 3);
	margin-right: 60px;
}

#space .spacearea_item:nth-child(3n){
	margin-right: 0;
}

#space .spacearea_item:nth-child(n + 4){
	margin-top: 60px;
}

#space .spacearea_img{
	position: relative;
}

#space .spacearea_item img{
	padding-bottom: 10px;
}

#space .spacearea_img p{
	position: absolute;
	font-size: 14px;
	padding: 3px;
	background: rgba(0, 0, 0, 0.7);
	top: 0;
	left: 0;
	color: #fff;
	font-weight: normal;
}

#space .spacearea_item p.spacearea_text span{
	font-size: 16px;
	display: block;
	padding-bottom: 10px;
}

#space .spacearea_item p.spacearea_text{
	font-size: 20px;
	font-weight: bold;
}

.spacearea_item{
	opacity: 0;
}

/*====================================================
ギミック
====================================================*/

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

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

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

.fadeUp_tuyomi {
animation-name:fadeUp_tuyomiAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

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

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

.fadeIn{
animation-name:fadeInAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
	animation-delay: 0.2s;
opacity:0;
	 animation-timing-function: ease-in;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeUpTrigger,.fadeInTrigger,.fadeUp_tuyomiTrigger{
    opacity: 0;
}

.delay-time02s{  
  animation-delay: 0.2s;
}

.delay-time04s{  
  animation-delay: 0.4s;
}

.delay-time05s{  
  animation-delay: 0.5s;
}

.delay-time1s{  
  animation-delay: 1s;
}

.delay-duration_tuyomi{  
  animation-duration: 0.8s;
}

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.3s;
animation-fill-mode:forwards;
opacity:0;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(80px);
  }

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

.fadeRightTrigger{
  opacity: 0;
}


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

ここからスマホ

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


@media screen and (max-width: 768px) {
	
	#hojin h2.keisen_top {
    border-top: solid 2px #fff;
    padding-top: 60px;
}
	
	#hojin p.h2_text {
    margin-top: 40px;
    margin-bottom: 50px;
    line-height: 1.8;
		text-align: left !important;
}
	
	#hojin p.h2_text2{
	margin-top: 40px;
	margin-bottom: 40px;
	line-height: 1.8;
	text-align: left !important;
}
	
#hojin h3{
	margin-bottom: 20px;
	text-align: center;
}

#hojin h4{
	margin: 20px 0 10px;
}
	#hojin .bnrarea{
	display: flex;
	flex-wrap: wrap;
	height: 100vh;
	align-items: center;
	background-color: #ccc;
}

#hojin .bnr_item{
	width: 100%;
	height: calc(100% / 3);
	    display: flex;
    align-items: center;
    justify-content: center;
}
	
	#hojin .solution_bk{
background: url("../images/solution_bk.jpg") no-repeat center;
	background-size: cover;
}

#hojin .creative_bk{
background: url("../images/creative_bk.jpg") no-repeat center;
	background-size: cover;
}

#hojin .space_bk{
background: url("../images/space_bk.jpg") no-repeat center;
	background-size: cover;
}
	
	#hojin a .nomal{
	font-size: 26px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 1px 2px 5px rgba(0,0,0,0.2);
	text-align:center; 
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
	
	#hojin a .nomal .tit_sub{
	font-size: 18px;
	display: contents;
}


#hojin a .hover{
display: none;
}

#hojin a:hover .nomal{
display: none;
}

#hojin a:hover .hover{
font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 1px 2px 5px rgba(0,0,0,0.2);
	text-align:left; 
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	line-height: 2;
}
	
	#hojin .wrap{
	padding: 60px 20px 60px;
}
	
	#hojin .wrap_last{
	padding: 60px 20px 130px;
}
	
	section .innar{
		width: 100%;
	}
	
	#hojin .jigyouimg_box{
	margin-top: 60px;
}

#hojin .jigyou_box{
	display: flex;
	flex-wrap: wrap;
	margin-top: 60px;
}

#hojin .text_l{
	max-width: 750px;
	margin-right: 0;
	order: 2;
}

#hojin .text_l p{
	line-height: 1.8;
	font-size: 16px;
}

#hojin .original-box-shadow-gray{
	margin-top: 30px;
	max-width: 235px;
	float: none;
}

#hojin .media_guide_btn{
	margin-top: 30px;
	max-width: 235px;
	float: none;
}
	
	#hojin .img_r{
	order: 1;
	margin: 0 auto;
}

#hojin .img_r img{
	width: 100%;
	max-width: 300px;
	order: 1;
}
	
	#hojin img.popup_icon{
	position: absolute;
		top: auto;
	bottom:5px;
	right:5px;
	max-width: 16px;
}
	
	#hojin .tuyomi_box{
	position: relative;
	margin: 40px auto 500px;
	height: 100%;
		max-height: 450px;
}
	
	#hojin .tuyomi_box p{
		font-size: 14px;
	}
	
	#hojin .tuyomi_box:nth-child(2){
	margin-bottom: 380px;
}
	
	#hojin .tuyomi_box:nth-child(3){
	margin-bottom: 360px;
}
	
	#hojin .tuyomi_box:nth-child(4){
	margin-bottom: 260px;
}
	
	#hojin .tuyomi_text {
    position: absolute;
    padding: 30px 20px;
    z-index: 1;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 5px 5px 10px -1px rgb(0 0 0 / 16%);
    bottom: auto;
		top:90%;
    left: 0;
    max-width: 100%;
}
	
	#hojin .tuyomi_text_r{
	position: absolute;
	padding: 30px 20px;
	z-index: 1;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 5px 5px 10px -1px rgba(0, 0, 0, .16);
	bottom: auto;
		top:90%;
	right:0;
	max-width: 100%;
}
	
	#hojin p.tuyomi_tit{
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 20px;
}
	
	#hojin .tuyomi_img{
	position: relative;
	text-align: center;
	top: 0;
	right: auto;
		width: 100%;
}

#hojin .tuyomi_img_l{
	position: relative;
	text-align: center;
	top: 0;
	left: auto;
	width: 100%;
}

#hojin .tuyomi_img img,#hojin .tuyomi_img_l img{
	width: 100%;
	max-width: 90%;
}
	
		#hojin .main_arrow_right::after { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 10px;    /* くの字を山なりに見た時、左側の長さ */
  height: 10px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 3px solid #FFF;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 3px solid #FFF;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
	filter: drop-shadow(3px 3px 8px #666);
}
	
	#hojin .bnr_arrow_right::after { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  width: 5px;    /* くの字を山なりに見た時、左側の長さ */
  height: 5px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 2px solid #333;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 2px solid #333;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
		box-shadow:0 0 5px #FFF;
}
	
/*====================================================
ソリューション事業
====================================================*/
	
	#solution h1{
	text-align: center;
	padding: 50px 0;
		height: 120px;
}

#solution h1.solution_mainimg{
	background: url("../images/solution.jpg") no-repeat;
	background-size: cover; 
	background-position: top;
}

#solution p.h2_text{
	margin-top: 40px;
    line-height: 1.8;
		text-align: left !important;
}
	
	#solution .wrap{
	padding: 60px 20px 60px;
}
	
	#solution .wrap_last{
	padding: 60px 20px 130px;
}
	
	#solution .jigyou_area{
	 display: flex;
		flex-wrap: wrap;
		margin-top: 60px;
}

#solution .jigyou_box{
	width: 100%;
    margin-right: 0;
		margin-bottom: 40px;
}

#solution .jigyou_box:nth-child(3n){
  margin-right: 0;
		margin-bottom: 0;
}

#solution .jigyou_title{
	font-size: 20px;
	font-weight: bold;
	padding-top: 15px;
}

#solution .jigyou_text{
	 padding: 15px 0 20px;
}
	
	#flow_b {
    margin-bottom: 30px;
}
	
	#solution .flow_b_box {
    display: flex;
    justify-content: center;
    padding: 70px 0 30px;
    position: relative;
    margin-bottom: 60px;
		flex-wrap: wrap;
}
	
	#solution .circle_ore {
       top: -40px;
    left: 35px;
		font-size: 18px;
}
	
	#solution .flow_b_text {
    line-height: 1.8;
    margin-right: 0;
    padding-left: 0;
    position: relative;
    width: 100%;
		margin-bottom: 30px;
}
	
	#solution .flow_b_tit {
    font-size: 18px;
    padding: 0 0 30px 95px;
}
	
	#solution .flow_b_img {
    width: 100%;
		text-align: center;
}
	
	.float-button__wrap {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    right: auto;
    z-index: 10;
}
.float-button__wrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(51,51,51,1) 30%, rgba(77,77,77,1) 100%);
    color: #fff;
	writing-mode: horizontal-tb;
	border-radius: 0;
	box-shadow: none;
	font-weight: bold;
}

.float-button__wrap a:hover {
    opacity: 0.7;
}

.float-button__wrap a::before {
  font-family: 'Material Icons Outlined';
  content: '\e554';
	    font-size: 13px;
    font-weight: normal !important;
	padding-bottom: 0;
	padding-right: 3px;
}

.is-hidden {
  visibility: hidden;
  opacity: 0;
	transition: .5s all;
}
	
	.gray_ring_img {
    position: absolute;
   top: -80px;
    left: 0;
    max-width: 115px;
    filter: drop-shadow(-2px -2px 3px rgba(255,255,255,1)) drop-shadow(5px 5px 5px rgba(239, 179, 139, 0.4));
}
	
	#solution .original-box-shadow-gray{
	margin-top: 30px;
		max-width: 230px;
}

	
#flow_a .step_box{
  height:680px;
  width:320px;
  position: relative;
  margin: 60px auto;
}
	
#flow_a .p_step01,#flow_a .p_step02,#flow_a .p_step03,#flow_a .p_step04,#flow_a .p_step05{
  position: absolute;
  z-index:4;
  font-size:11px;
	text-align: left;
  line-height:1.8;
  padding:0 20px;
  max-width:115px;
}

#flow_a .p_step01 span,#flow_a .p_step02 span,#flow_a .p_step03 span,#flow_a .p_step04 span,#flow_a .p_step05 span{
  font-size:13px;
  font-weight: bold;
  display: block;
  padding-bottom:3px;
  text-align: left;
  letter-spacing:0.05em;
}
	
	#flow_a .p_step01{
  top:40px;
  right:0;
left:auto;
}

#flow_a .p_step02{
  top:145px;
  left:0;
}

#flow_a .p_step03{
  right: 0;
  top: 300px;
	left:auto;
	transform: none;
}

#flow_a .p_step04{
  bottom:170px;
  left:0;
	right:auto;
	top:auto;
}

#flow_a .p_step05{
  bottom:40px;
  right:0;
	top:auto;
}
	
	#flow_a .sp_step img{
    width: 320px;
}
	
	#flow_a .delay-step-img{
animation-delay: 0.2s;
}

#flow_a .delay-step-p{
animation-delay: 1s;
}
	


	
/*====================================================
クリエイティブ事業
====================================================*/
	
	#creative h1{
	text-align: center;
	padding: 50px 0;
		height: 120px;
}

#creative h1.creative_mainimg{
	background: url("../images/creative.jpg") no-repeat;
	background-size: cover; 
	background-position: top;
}

#creative p.h2_text{
	margin-top: 40px;
    line-height: 1.8;
		text-align: left !important;
}
	
	
		#creative .wrap{
	padding: 60px 20px 60px;
}
	
	#creative .wrap_last{
	padding: 60px 20px 130px;
}
	
	#creative .jigyou_area{
	 display: flex;
		flex-wrap: wrap;
		margin-top: 60px;
}

#creative .jigyou_box{
	width: 100%;
    margin-right: 0;
		margin-bottom: 40px;
}

#creative .jigyou_box:nth-child(3n){
  margin-right: 0;
		margin-bottom: 0;
}

#creative .jigyou_title{
	font-size: 20px;
	font-weight: bold;
	padding-top: 15px;
}

#creative .jigyou_text{
	 padding: 15px 0 20px;
}
	
	#creative .map_img {
    margin-top: 60px;
}
	
	#creative .map_txt{
	position: relative;
	top:auto;
	left: auto;
	max-width: 100%;
		margin-bottom: 40px;
}
	
	#creative h2.map_h2 {
    text-align: center !important;
}
	
	#creative .flame_img{
	padding: 40px 0 60px;
	text-align: center;
}
	
	/*====================================================
モーダル
====================================================*/

.content{
    margin: 0 auto;
    padding: 40px;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 10;
}
.modal__bg{
    background: rgba(0,0,0,20%);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 30px 5%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 1080px;
	width: 90%;
	border-radius: 10px;
	box-shadow: 5px 5px 10px -1px rgba(0, 0, 0, .16);
	text-align: center;
	box-sizing: border-box;
}
.close_icon{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	font-size: 30px;
	color: #FF6600;
	cursor: pointer;
	font-weight: bold;
}

.pictogram{
	display: flex;
	justify-content: center;
	padding-bottom: 15px;
	border-bottom: solid 1px #D4D0D0;
	margin-bottom: 15px;
}

.pictogram_item{
	padding: 0 15px;
}

.pictogram_item p{
	font-size: 14px;
	font-weight: bold;
	color: #FF822E;
}

.pictogram_item p span{
	font-size: 28px;
	font-weight: bold;
}

.company_rogo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
	max-width: 500px;
}

.rogo_item_a{
	padding-top: 0;
	padding-bottom: 10px;
	text-align: left;
	width: 100%;
}
	
	.rogo_item_a p{
	font-size: 14px !important;
}

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

.rogo_item_b ul li p{
	font-size: 12px;
	padding-top: 10px;
}
	
	.rogo_item_b ul li img{
	vertical-align: bottom;
}
	
	.rogo_item_b ul li{
	padding-right: 15px;
}
	
	.rogo_item_b ul li:last-child{
	padding-right: 0;
}

.modal-content{
	background: #fff;
	text-align: left;
	padding: 50px 100px;
	border-radius: 10px;
	box-shadow: 5px 5px 10px -1px rgba(0, 0, 0, .16);
	text-align: center;
}

.modal_name{
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.5em;
	padding-bottom: 20px;
	text-align: center;
}

.modal_text_r{
	text-align: right;
	font-size: 14px;
	font-weight: bold;
	margin-top: 20px;
}

#creative .original-box-shadow-ore{
	margin-top: 40px;
}


	
/*====================================================
スペースWEB申込み
====================================================*/

#space h1{
	text-align: center;
	padding: 50px 0;
		height: 120px;
}

#space h1.space_mainimg{
	background: url("../images/space.jpg") no-repeat;
	background-size: cover; 
	background-position: top;
}

#space h2{
	text-align: center;
}

#space h2.h2_top_m{
	margin-top: 60px;
}

#space p.h2_text{
	margin-top: 40px;
    padding-bottom: 60px;
    line-height: 1.8;
		text-align: left !important;
}

#space .keisen_bottom{
	border-bottom: solid 1px #D4D0D0;
}
	
	#space .wrap{
	padding: 0 20px;
}

#space .space_wrap{
	padding: 60px 20px 60px;
}

#space p.pan_list {
    padding: 20px 0;
}

#space .login_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#space .login_item{
	width: 100%;
	padding: 60px 0;
}

#space .login_item p{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

#space .login_item:first-child{
	border-right: none;
	border-bottom: solid 2px #fff;
}

#space .login_item .original-box-shadow-ore{
	margin-top: 30px;
	max-width: 230px;
}

#space .spacearea_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
}

#space .spacearea_item{
	width: calc((100% - 30px) / 2);
	margin-right: 30px;
}
	
	#space .spacearea_item:nth-child(3n){
	margin-right: 30px;
}

#space .spacearea_item:nth-child(2n){
	margin-right: 0 !important;
}

#space .spacearea_item:nth-child(n + 3){
	margin-top: 30px;
}

#space .spacearea_img{
	position: relative;
}

#space .spacearea_item img{
	padding-bottom: 5px;
}

#space .spacearea_img p{
	position: absolute;
	font-size: 10px;
	padding: 3px;
	background: rgba(0, 0, 0, 0.7);
	top: 0;
	left: 0;
	color: #fff;
	font-weight: normal;
}

#space .spacearea_item p.spacearea_text span{
	font-size: 12px;
	display: block;
	padding-bottom: 5px;
}

#space .spacearea_item p.spacearea_text{
	font-size: 14px;
	font-weight: bold;
}
	
	/*====================================================
タブ
====================================================*/
	
	#solution .tab, #creative .tab {
    margin: 40px auto 60px;
}
	
	/*====================================================
ギミック
====================================================*/

.delay-duration_tuyomi{  
  animation-duration: 2s;
}	

	
	}