@charset "UTF-8";

/*-------------------------
__pc
-------------------------*/

body{ font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;}
#wrap{ color: #004f75;}

/* ヘッダー */
#header{ box-sizing: border-box; position: fixed; top: 50px; left: 50%; transform: translateX(-50%); z-index: 100; width: 100%; padding: 0 50px; box-sizing: border-box;}
#header .header_inner{ width: 100%; max-width: 1100px; background-color: #ffffff; height: 70px; border-radius: 50vh; margin: 0 auto; padding: 0 50px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 0 20px 0 rgba(0, 79, 117, .2);}
#header .header_inner .header_logo{ width: 100px; height: auto;}
#header .header_inner .header_logo img{ width: 100%; height: auto;}
#header .header_inner ul{ display: flex; justify-content: flex-end; align-items: center;}
#header .header_inner ul li{ margin-left: 25px; line-height: 70px;}
#header .header_inner ul li a{ font-size: 1.6em; line-height: 1em; font-weight: 700; color: #004f75; text-decoration: none;}

/* メインビジュアル */
#main_img{ width: 100%; height: 760px; background-image: linear-gradient(-20deg, #fff1eb 0%, #ace0eb 100%);}
#main_img .main_img_inner{ width: 100%; max-width: 1300px; height: 100%; margin: 0 auto; padding: 100px 50px 0; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
#main_img .main_img_inner{ animation: fadeIn 2s ease 0s 1 normal;}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
#main_img .main_img_inner .main_com{ width: calc(55% - 10px); margin-right: 10px;}
#main_img .main_img_inner .main_com p.fukidashi{ position: relative; display: inline-block; margin-bottom: 30px; padding: 15px 20px; box-sizing: border-box; border-radius: 10px; background-color: #ffffff; text-align: left; font-size: 2.5em; font-weight: 700; line-height: 1.5; color: #004f75;}
#main_img .main_img_inner .main_com p.fukidashi::after { content: ""; position: absolute; bottom: 0; left: 50%; border-style: solid; border-width: 20px 10px 0 10px; border-color: #ffffff transparent transparent; translate: -50% 100%;}
#main_img .main_img_inner .main_com p.fukidashi span{}
#main_img .main_img_inner .main_com h1{ font-size: 5.5em; line-height: 1.3em; font-weight: 700; margin-bottom: 30px;}
#main_img .main_img_inner .main_com h1 span{ color: #00a0bf;}
@media screen and (min-width: 1205px){
#main_img .main_img_inner .main_com h1 br.tab_on{ display: none;}
}
#main_img .main_img_inner .main_com p.sub_com{ font-size: 1.7em; line-height: 1.8; font-weight: 700;}
@media screen and (max-width: 1204px){
#main_img .main_img_inner .main_com p.sub_com br.tab_none{ display: none;}
}
#main_img .main_img_inner .main_illust{ width: 45%; height: auto;}
#main_img .main_img_inner .main_illust img{ width: 100%; height: auto;}

/* 共通 */
.sec_box{ width: 100%; max-width: 1100px; margin: 0 auto; font-size: 1.7em; line-height: 1.8; padding: 120px 50px; box-sizing: border-box;}
.sec_box .sec_com{ margin-bottom: 60px;}
.sec_box .sec_com h2{ font-size: 2.5em; line-height: 1.5; letter-spacing: 0.05em; margin-bottom: 30px; font-weight: 700;}
.sec_box .sec_com p.sub_com{}

/* 導入 */
#intro{ position: relative; background-color: #004f75; color: #fff;}
#intro .intro_text{}
#intro .intro_text h2{ font-weight: 700; font-size: 1.7em; line-height: 1.4; margin-bottom: 20px;}
#intro .intro_text .mini_com{ color: #ffd232; margin-top: 20px; font-size: 1.4em; line-height: 1.4; font-weight: 700;}

/* 特長 */
#merit{}
#merit .merit_list{}
#merit .merit_list dl{ margin-bottom: 35px; padding: 50px; box-sizing: border-box; border-radius: 15px; background-color: #fff; box-shadow: 0 0 20px 0 rgba(0, 79, 117, .2); position: relative;}
#merit .merit_list dl dt{ font-size: 1.6em; line-height: 1.3; margin-bottom: 20px; font-weight: 700;}
#merit .merit_list dl dt span.marker{ font-weight:bold; background: -webkit-linear-gradient(left, rgb(255,220,50) 50%, transparent 50%); background: -moz-linear-gradient(left, rgb(255,220,50) 50%, transparent 50%); background: linear-gradient(left, rgb(255,220,50) 50%, transparent 50%); background-repeat: no-repeat; background-size: 200% .8em;  background-position: 100% .5em; transition: 2s;}
#merit .merit_list dl dt span.marker.is-active{	background-position: 0% .5em;}
#merit .merit_list dl dd{ text-align: left;}
#merit .merit_list dl:last-child{ margin-bottom: 0;}
#merit .merit_list dl dd.point_illust{ width: 170px; height: auto;}
#merit .merit_list dl dd.point_illust img{ width: 100%; height: auto;}
#merit .merit_list dl.merit01 dd.point_illust{ position: absolute; top: -130px; left: -80px;}
#merit .merit_list dl.merit03 dd.point_illust{ position: absolute; bottom: -90px; right: 40px;}

/* 開発事例 */
#case{ background-image: linear-gradient(-20deg, #fff1eb 0%, #ace0eb 100%);}
#case .sec_box{ max-width: 100%; padding: 120px 0;}
#case #case_list ul{ text-align: left;}
#case #case_list ul li{ background-color: #fff; margin: 0 25px; border-radius: 15px;}
#case #case_list ul li .case_photo{ width: 100%; height: 0; padding-top: 75%; overflow: hidden; position: relative; border-radius: 15px 15px 0 0;}
#case #case_list ul li .case_photo span{ width: 100%; height: 100%; display: block; background-color: #F5F5F5;}
#case #case_list ul li .case_photo span img{ width: auto; height: 100%; object-fit: contain; position: absolute; inset: 0;}
#case #case_list ul li .case_data{ padding: 30px; box-sizing: border-box;}
#case #case_list ul li .case_data p.icon{ font-size: 0.8em; margin-bottom: 15px;}
#case #case_list ul li .case_data p.icon span{ display: inline-block; color: #fff; background-color: #004f75; padding: 0 10px; box-sizing: border-box; border-radius: 50vh;}
#case #case_list ul li .case_data h3{ font-size: 1.3em; line-height: 1.3; font-weight: 700; margin-bottom: 15px;}
#case #case_list ul li .case_data p.case_data_com{ line-height: 1.3; margin-bottom: 15px; border-bottom: 2px dotted #004f75; padding-bottom: 15px;}
#case #case_list ul li .case_data dl{ margin-bottom: 10px;}
#case #case_list ul li .case_data dl dt{ font-size: 0.8em; font-weight: 700;}
#case #case_list ul li .case_data dl dd{ font-size: 0.8em; line-height: 1.6;}
#case #case_list ul li .case_data dl:last-child{ margin-bottom: 0;}
/*調整*/
.slick-slide{ height: auto!important;}
.slick-track{ display: flex!important;}
.slide_arrow{ width: 30px; height: 30px; z-index: 10;}
.slide_arrow.prev_arrow{ position: absolute; top: 50%; transform: translateY(-50%); left: 50px; background-image: url(../images/arrow01_l@2x.png); background-size: cover; background-repeat: no-repeat; background-position: center;}
.slide_arrow.next_arrow{ position: absolute; top: 50%; transform: translateY(-50%); right: 50px; background-image: url(../images/arrow01_r@2x.png); background-size: cover; background-repeat: no-repeat; background-position: center;}
.slide_arrow{ width: 70px; height: 70px; background-size: cover; background-repeat: no-repeat;}
.slide_arrow:hover{ cursor: pointer;}

/* 開発の流れ */
#process{}
#process .sec_box{ position: relative;}
#process .process_list{}
#process .process_list ul{ display: flex; justify-content: center;}
#process .process_list ul li{ background-color: #004f75; color: #F7F8F0; font-size: 1.5em; margin-bottom: 10px; border-radius: 10px; padding: 0 10px; height: 250px; margin-right: 55px; position: relative;}
@media screen and (min-width:768px) {
#process .process_list ul li{ -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
}
#process .process_list ul li:last-child{ margin-right: 0;}
#process .process_list ul li:after{ content: ''; display: block; width: 50px; height: 50px; background-image: url(../images/arrow02@2x.png); background-size: cover; background-repeat: no-repeat; position: absolute; right: -50px; top: 50%; transform: translateY(-50%);}#process .process_list ul li:last-child:after{ display: none;}
#process .sec_box .process_illust{ position: absolute; top: 15px; left: 80px; width: 200px;}
#process .sec_box .process_illust img{ width: 100%; height: auto;}

/* 料金 */
#price{ background-color: #b4dee8;}
#price .price_box{ margin-top: -20px; font-size: 1.2em; line-height: 1.6;}
#price .price_box span{ display: inline-block; background-color: #fff; padding: 5px 20px; box-sizing: border-box; border-radius: 10px;}

/* お問い合わせ */
#contact{}
#contact .sec_box{ position: relative;}
#contact .contact_btn{}
#contact .contact_btn a{	display: inline-block;	background: linear-gradient(90deg, rgba(247,150,10,1) 0%, rgba(247,180,48,1) 50%, rgba(247,150,10,1) 100%); background-size: 200% 100%; border-radius: 50vh; margin: 0 auto; padding: 25px 70px; box-sizing: border-box; line-height: 1.8; text-decoration: none;	font-size: 1.7em; font-weight: 700;	color: #fff; border-bottom: solid 5px #f58c00; transition: 0.3s ease-in-out;}
#contact .contact_btn a span{ display: inline-block; position: relative; padding-right: 45px;}
#contact .contact_btn a span:after{ content: ''; display: block; width: 35px; height: 35px; background-image: url(../images/icon_contact@2x.png); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; right: 0; top: 50%;  transform: translateY(-50%);}
#contact .sec_box .contact_illust{ position: absolute; bottom: -20px; right: 100px; width: 180px;}
#contact .sec_box .contact_illust img{ width: 100%; height: auto;}

/* フッター */
#footer{ background-color: #004f75;}
#footer .footer_inner{ width: 100%; max-width: 1100px; margin: 0 auto; padding: 100px 50px 50px; box-sizing: border-box;}
#footer .footer_inner ul{ display: flex; justify-content: center; align-items: center; margin-bottom: 70px;}
#footer .footer_inner ul li{ margin: 0 20px;}
#footer .footer_inner ul li a{ font-size: 1.6em; color: #fff; text-decoration: none; font-weight: 700;}
.footer_logo{}
.footer_logo p{	font-size: 1.6em; color: #fff; margin-bottom: 15px;}
.footer_logo p span{ display: inline-block; position: relative;}
.footer_logo p span:before,
.footer_logo p span:after{ width: 1px; height: 28px; content: ''; display: block; background-color: #fff;}
.footer_logo p span:before{ margin-right: 0.5em; transform: rotate(-30deg); position: absolute; bottom: -7px; left: -1em;}
.footer_logo p span:after{ margin-left: 0.5em; transform: rotate(30deg); position: absolute; bottom: -7px; right: -1em;}
.footer_logo .footer_logo_img a{	display: inline-block;	background: linear-gradient(90deg, rgba(0,160,190,1) 0%, rgba(50,190,220,1) 50%, rgba(0,160,190,1) 100%); background-size: 200% 100%; border-radius: 50vh; margin: 0 auto; padding: 15px 35px; line-height: 1.8; text-decoration: none;	font-size: 1.6em; font-weight: 700;	color: #fff; border-bottom: solid 5px #008cab; transition: 0.3s ease-in-out;}
.footer_logo .footer_logo_img a span{ display: inline-block; position: relative; padding-right: 30px;}
.footer_logo .footer_logo_img a span:after{ content: ''; display: block; width: 20px; height: 20px; background-image: url(../images/icon_site@2x.png); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; right: 0; top: 50%;  transform: translateY(-50%);}
#footer .footer_inner .cl{ margin-top: 70px; font-size: 1.5em; color: #fff;}

/* 固定ボタン */
.fix_btn{ position: fixed; bottom: 35px; right: 35px; z-index: 20;}
.fix_btn a{	display: inline-block; width: 160px; height: 160px;	background: linear-gradient(135deg, rgba(247,150,10,1) 0%, rgba(247,180,48,1) 50%, rgba(247,150,10,1) 100%); background-size: 200% 100%; border-radius: 50vh;	font-size: 2.3em; line-height: 1.3; text-decoration: none; font-weight: 700;	color: #fff; border-bottom: solid 5px #f58c00; transition: 0.3s ease-in-out; position: relative;}
.fix_btn a p{ width: 100%; position: absolute; top: 50%; transform: translateY( -50%);}
.fix_btn a p span{ display: inline-block; width: 100%; height: 100%; position: relative; padding-top: 40px; box-sizing: border-box;}
.fix_btn a p span:after{ content: ''; display: block; width: 30px; height: 30px; background-image: url(../images/icon_contact@2x.png); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.fix_btn a:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: -1; background: inherit; -webkit-animation: ripple 4s cubic-bezier(0.3, 0, 0.1, 1) infinite; animation: ripple 4s cubic-bezier(0.3, 0, 0.1, 1) infinite;}
@-webkit-keyframes ripple {
  0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0;}
  60% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.5;}
  100% { -webkit-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0;}
}
@keyframes ripple {
  0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0;}
  60% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.5;}
  100% { -webkit-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0;}
}

/*-------------------------
__tab
-------------------------*/

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

.tab_none{ display: none;}

#header{ top: 30px; padding: 0 30px;}
#header .header_inner{ padding: 0 30px;}
#header .header_inner ul li{ margin-left: 18px;}
#header .header_inner ul li a{ font-size: 1.5em;}

#main_img{ height: auto;}
#main_img .main_img_inner{ padding: 150px 50px 80px;}
#main_img .main_img_inner .main_com{ margin-right: 0;}
#main_img .main_img_inner .main_com p.fukidashi{ font-size: 2em; padding: 10px 15px;}
#main_img .main_img_inner .main_com h1{ font-size: 5em; line-height: 1.2em; margin-bottom: 20px;}
#main_img .main_img_inner .main_com p.sub_com{ font-size: 1.5em;}

.sec_box{ font-size: 1.5em; padding: 80px 50px;}
.sec_box .sec_com{ margin-bottom: 50px;}
.sec_box .sec_com h2{ font-size: 2.2em; margin-bottom: 20px;}

#merit .merit_list dl{ padding: 30px;}
#merit .merit_list dl dd.point_illust { width: 140px; height: auto;}
#merit .merit_list dl.merit01 dd.point_illust{ left: -50px;}
#merit .merit_list dl.merit03 dd.point_illust{ right: -30px;}

#case .sec_box{ padding: 80px 0;}
#case #case_list ul li{ margin: 0 15px;}
.slide_arrow{ width: 60px; height: 60px;}
.slide_arrow.prev_arrow{ left: 30px;}
.slide_arrow.next_arrow{ right: 30px;}

#process .process_list ul li{ font-size: 1.3em; height: 200px; margin-right: 45px;}
#process .process_list ul li:after{ width: 40px; height: 40px; right: -40px;}
#process .sec_box .process_illust{ left: 25px; width: 150px;}

#contact .contact_btn a{ padding: 20px 60px;}
#contact .sec_box .contact_illust{ right: 50px; width: 140px;}

#footer .footer_inner{ padding: 80px 50px 50px;}
#footer .footer_inner ul{ flex-wrap: wrap; margin-bottom: 50px;}
#footer .footer_inner ul li{ margin: 10px 20px;}

.fix_btn{ bottom: 30px; right: 30px;}
.fix_btn a{	width: 140px; height: 140px; font-size: 2.1em;}

}

@media screen and (min-width:1000px){
#merit .sec_box .sec_com p br.tab_on{ display: none;}
}

@media screen and (max-width:849px){
#main_img .main_img_inner{ display: block; padding: 140px 50px 80px;}
#main_img .main_img_inner .main_com{ width: 100%; margin-bottom: 20px;}
#main_img .main_img_inner .main_com h1 br.tab_on{ display: none;}
#main_img .main_img_inner .main_illust{ max-width: 430px; width: 100%; margin: 0 auto;}
}

@media screen and (min-width:768px) {
.pc_none{ display: none;}
.sp_only{ display: none;}
#contact .contact_btn a:hover,
.footer_logo .footer_logo_img a:hover,
.fix_btn a:hover{ background-position: 100% 0;}
}

/*-------------------------
__sp
-------------------------*/

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

.sp_none{ display: none;}
#main_img .main_img_inner .main_com h1 br.sp_on{ display: block;}

#header{ top: 0; padding: 0;}
#header .header_inner{ height: auto; padding: 10px 0 10px 20px; border-radius: 0;}
#header .header_inner .header_logo{ margin-right: 15px;}
#header .header_inner ul{ width: calc(100% - 100px); flex-wrap: wrap; justify-content: flex-start;}
#header .header_inner ul li{ margin:5px 8px; line-height: 1em;}
#header .header_inner ul li a{ font-size: 1.4em;}

#main_img .main_img_inner{ padding: 110px 20px 50px;}
#main_img .main_img_inner .main_com p.fukidashi{ font-size: 1.7em; margin-bottom: 25px;}
#main_img .main_img_inner .main_com h1{ font-size: 3.5em; margin-bottom: 10px;}
#main_img .main_img_inner .main_com p.sub_com{ font-size: 1.4em;}
#main_img .main_img_inner .main_illust{ width: 80%;}

.sec_box{ font-size: 1.4em; line-height: 1.6; padding: 50px 20px;}
.sec_box .sec_com{ margin-bottom: 20px;}
.sec_box .sec_com h2{ font-size: 2em; line-height: 1.4; letter-spacing: 0; margin-bottom: 15px;}

#merit .sec_box{padding: 50px 20px 150px;}
#merit .merit_list dl{ padding: 25px; margin-bottom: 15px;}
#merit .merit_list dl dt{ font-size: 1.5em; margin-bottom: 15px;}
#merit .merit_list dl.merit01 dd.point_illust{ display: none;}
#merit .merit_list dl.merit03 dd.point_illust{ bottom: -150px; right: auto; left: 50%; transform: translateX( -50%);}

#case .sec_box{ padding: 50px 0;}
#case .sec_box .sec_com{ padding: 0 20px; box-sizing: border-box;}
.slick-list{ padding: 0 40px!important;}
#case #case_list ul li{ margin: 0 10px;}
#case #case_list ul li .case_data{ padding: 20px;}
#case #case_list ul li .case_data p.icon{ margin-bottom: 10px;}
#case #case_list ul li .case_data h3{ margin-bottom: 10px;}
#case #case_list ul li .case_data dl dt{ font-size: 0.9em;}
#case #case_list ul li .case_data dl dd{ font-size: 0.9em;}
.slide_arrow{ width: 40px; height: 40px;}
.slide_arrow.prev_arrow{ left: 15px;}
.slide_arrow.next_arrow{ right: 15px;}

#process .process_list ul{ display: block; width: 70%; margin: 0 auto; padding-bottom: 90px; box-sizing: border-box;}
#process .process_list ul li{ font-size: 1.2em; font-weight: 700; height: auto; padding: 5px 10px; margin-right: 0; margin-bottom: 30px;}
#process .process_list ul li:last-child{ margin-bottom: 0;}
#process .process_list ul li:after{ width: 30px; height: 30px; top: auto; bottom: -28px; left: 50%; transform: translateX( -50%) rotate(90deg);}
#process .sec_box .process_illust{ top: auto; bottom: -20px; left: 50%; transform: translateX( -50%);}

#price .price_box{ margin-top: 20px; font-size: 1.1em;}
#price .price_box span{ padding: 10px 20px;}

#contact .contact_btn a{ width: 100%; max-width: 290px; padding: 20px 35px; font-size: 1.5em;}
#contact .sec_box{ padding: 50px 20px 130px;}
#contact .sec_box .contact_illust{ left: 50%; right: auto; transform: translateX( -50%);}
#contact .contact_btn a span{ padding-right: 35px;}
#contact .contact_btn a span:after{ width: 30px; height: 30px;}

#footer .footer_inner{ padding: 50px 20px 70px;}
#footer .footer_inner ul{ margin-bottom: 40px;}
#footer .footer_inner ul li{ margin: 8px 10px;}
#footer .footer_inner ul li a{ font-size: 1.5em;}
#footer .footer_inner .cl{ margin-top: 70px;}
.footer_logo p{ font-size: 1.4em; margin-bottom: 10px;}
.footer_logo .footer_logo_img a{ font-size: 1.5em; padding: 12px 30px;}

.fix_btn{ bottom: 15px; right: 15px;}
.fix_btn a{	width: 110px; height: 110px; font-size: 1.7em;}
.fix_btn a p span{ padding-top: 30px;}
.fix_btn a p span:after{ width: 25px; height: 25px;}

}

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

	#main_img .main_img_inner{ padding: 90px 20px 50px;}
#header .header_inner .header_logo{ width: 90px; margin-right: 10px;}
#header .header_inner ul li{ margin: 3px 5px;}
#header .header_inner ul li a{ font-size: 1.3em;}

#main_img .main_img_inner .main_com p.sub_com{ font-size: 1.3em;}
.sec_box{ font-size: 1.3em; line-height: 1.6;}

}