@charset "utf-8";
/* CSS Document */
*, *::before, *::after {
box-sizing: border-box;
}

html, body {
margin: 0;
padding: 0;
}

body {
font-size: 16px;
color:#30416b;
background: #fff;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
line-height: 1.6
}

h1, h2, h3, h4, p {
margin: 0px;
padding: 0px;
}

p {
margin-bottom: 20px;
}

ul, li, dl, dt, dd {
margin: 0px;
padding: 0px;
list-style-type: none;
}

img {
margin: 0px;
padding: 0px;
border: none;
}

a, a:visited {
color: #30416b;
text-decoration: none;
}

table {
margin: 0px auto;
border-collapse: collapse;
border: 1px solid #ccc;
}

th, td {
border: 1px solid #ccc;
padding: 4px;
}

h1 {
font-size: 14px;
margin-bottom: 10px;
font-weight: normal
}

section{
width:100%;
max-width: 1200px;
padding: 100px 20px 60px;
margin: 0 auto
}

small {
display: block;
font-size: 12px;
text-align: center;
padding: 10px
}

.mb_only {
display: none;
}

.max_1000{
display: none;
}

#HeaderWrapper{
background:#fff;
border-bottom:#9b9bb1 solid 1px
}

#Header{
width: 100%;
max-width: 1560px;
padding:12px 10px;
margin: 0 auto;
display: flex;
justify-content: space-between
}

#SiteName{
display: flex;
align-content: baseline;
align-items: center;
}

#SiteName a{
width:234px;
height: 38px;
display: flex;
align-content: center
}

#SiteName a img{
width: 100%;
height: auto
}

#HeaderLink{
display: flex;
justify-content: flex-end
}

#HeaderLink a{
border-radius: 30px;
color: #fff;
font-size:20px;
text-align: center;
font-weight:bold;
padding:6px 34px;
background:#30306a;
box-shadow: 0px 3px 10px 0px rgba(48, 65, 107, 0.2);
margin: 0 10px;
}

#HeaderLink a:hover{
opacity: 0.7
}

#HeaderLink a#HeaderRequest{
background:#f07100;
}

.s_orange{
color:#ee4b03
}

.top_section h2{
font-size:47px;
display: block;
text-align: center;
margin: 0 auto 100px;
}

.top_section h2 .h2_sub{
font-size:20px;
display: block;
margin-bottom: 30px;
}

#TokuchoDetail{
counter-reset: tokucho;
}

.tokucho_detail{
display: flex;
align-content: center;
justify-content: space-between;
margin-bottom: 100px;
gap:30px; 
}

.tokucho_detail.tokucho_even{
flex-direction: row-reverse
}

.tokucho_img img{
display: block;
width: 100%;
max-width: 410px;
height: auto
}

.tokucho_text{
width: calc(100% - 500px);
}

.tokucho_text p{
font-weight: bold;
padding: 0 30px;
}

.tokucho_text h3{
position: relative;
font-size:36px;
margin-bottom: 30px;
padding-left: 60px;
}

.tokucho_text h3:before{
position: absolute;
counter-increment: tokucho;
content: ""counter(tokucho);
background:linear-gradient( -90deg, rgb(231,56,0) 0%, rgb(238,112,0) 70%, rgb(244,168,0) 100%);
width: 50px;
height: 50px;
left:0;
top:50%;
transform: translateY(-50%);
font-size:34px;
border-radius: 25px;
color: #fff;
text-align: center;
margin-right: 20px;
}

.section_wrapper{
background: url("../img/content_top.png") top center repeat-x;
}

#ServiceDetail{
display: flex;
justify-content: space-between;
gap:50px;
}

.service_detail{
width: 50%;
margin-bottom: 50px
}

.service_detail img{
display: block;
margin:0 auto 20px;
width: 100%;
max-width: 432px;
height: auto
}

.service_detail h3{
font-size:35px;
text-align: center;
margin-bottom: 60px;
}

.highlights{
background: linear-gradient(transparent 70%, #ffee00 0%)
}

.service_detail p{
padding:0 10px;
font-weight: bold
}

#AboutWrapper{
background-image:url("../img/about_arrow.png") , url("../img/about_top.png") ;
background-position:top center , top left;
background-repeat:no-repeat , repeat-x;
}

section#About{
padding-top: 150px;
}

#About.top_section .h2_sub{
font-size:24px;
}

#AboutGoGo > dl{
width: 954px;
height: 666px;
margin:0 auto;
position: relative
}

#AboutGoGo > dl > dt{
position: absolute;
width: 420px;
height: 420px;
top:170px;
left: 50%;
transform: translateX(-50%);
border-radius: 210px;
box-shadow: 0px 0px 30px 20px rgba(205, 223, 255, 1);
background: #fff;
font-size:32px;
font-weight: bold;
text-align: center;
padding-top: 200px;
}

#AboutGoGo dd.about_circle{
position: absolute;
width: 340px;
height: 340px;
padding:10px;
border-radius: 170px;
}
#AboutGoGo dd.about_site{
border:#ee4b03 1px solid; 
top:0;
left:50%;
transform: translateX(-50%);
}

#AboutGoGo dd.about_system{
border:#37b846 1px solid; 
top:270px;
left:0;
}

#AboutGoGo dd.about_marketing{
border:#1661f7 1px solid; 
top:270px;
left:614px;
}

#AboutGoGo dd.about_circle dl{
width: 320px;
height: 320px;
border-radius: 160px;
background: #fceedd;
padding-top: 80px
}

#AboutGoGo dd.about_circle dl dt{
font-weight: bold;
font-size:35px;
margin-bottom: 30px;
text-align: center;
letter-spacing: -2px;
line-height: 1.3
}

#AboutGoGo dd.about_system dl dt,
#AboutGoGo dd.about_marketing dl dt{
font-size:26px;
}

#AboutGoGo dd.about_circle dl dd{
font-size:17px;
background: url("../img/about_check.png") no-repeat left center;
padding-left: 25px;
font-weight: bold;
margin-left: 30px
}

#AboutGoGo dd.about_site dl{
background: #fceedd
}

#AboutGoGo dd.about_system dl{
background: #d8f3d5
}

#AboutGoGo dd.about_marketing dl{
background: #d9e3f7
}

#AboutMatome p{
text-align: center;
margin: 0 auto 20px;
font-size:26px;
font-weight: bold;
}

#Synergy{
width: 100%;
max-width: 1100px;
margin:150px auto 0;
border: 2px solid #0a266b;
padding: 30px 30px
}

#Synergy h4{
width: 100%;
max-width: 850px;
margin:-70px auto 40px;
padding: 10px;
font-size:30px;
color:#fff;
text-align: center;
background:#0a266b;
position: relative
}

#Synergy h4:after{
position: absolute;
content:"";
background:#0a266b;
width: 20px;
height: 20px;
z-index: -1;
bottom:-15px;
left: 50%;
transform:rotate(45deg) translateX(-50%)
}

#Synergy h4 span{
color:#ffee00;
}

#Synergy p{
font-size:26px;
font-weight: bold;
margin-bottom: 0
}

#VoiceWrapper{
background: url("../img/voice_bg.jpg") no-repeat top center;
background-size:cover
}

.mid_section h2{
font-size:48px;
display: block;
text-align: center;
margin: 0 auto 100px;
}

.mid_section h2 img{
display: block;
margin: 0 auto 30px
}

#Voice li{
background: url("../img/voice_people01.png") no-repeat left center;
padding: 10px 0 10px 100px;
margin-bottom: 50px
}

#Voice li.voice_02{
background-image: url("../img/voice_people02.png");
}

#Voice li.voice_03{
background-image: url("../img/voice_people03.png");
}

#Voice li.voice_04{
background-image: url("../img/voice_people04.png");
}

#Voice div{
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(48, 48, 106, 0.15);
padding: 10px;
background: #fff;
position: relative;
z-index: 0;
}

#Voice div:before{
position: absolute;
content:"";
background:#fff;
width: 20px;
height: 20px;
z-index: -100;
top:50%;
left:-15px;
transform:rotate(45deg) translateY(-50%);
}

#Voice div p{
margin:0 0 0 10px;
font-size:20px;
font-weight: bold
}

#WorkDetail{
display: flex;
justify-content: space-between;
align-content: flex-start;
gap:50px;
}

.work_detail{
width: 50%
}

.work_detail h3{
margin-bottom: 20px;
}

.work_detail h3 a:hover {
text-decoration:underline;
}

.work_img{
display: block;
background:url("../img/work_murakami.jpg") center no-repeat;
background-size:100%; 
box-shadow: 0px 0px 20px 0px rgba(48, 48, 106, 0.15);
width: 100%;
max-width:540px;
margin-bottom: 20px;
position: relative;
transition:all .2s ease;
}


.work_img:hover{
background-size:105%;
}

.work_img:after{
display: block;
content:"";
padding-top:63%;
}

#WorkNekosystem.work_img{
background-image:url("../img/work_nekosystem.jpg");
}

#ReasonWrapper.section_wrapper{
background-image: url("../img/content_top.png"), url("../img/reason_bg.jpg") ;
background-repeat: repeat-x , no-repeat;
background-position: top center;
background-size:auto 50px , cover
}

.reason_copy{
text-align: center;
font-size:26px;
font-weight: bold;
margin-bottom: 70px
}

.reason_text{
width: 100%;
max-width:950px;
margin:0 auto;
}

.reason_text p{
font-size:20px;
margin-bottom: 30px
}

.reason_text span{
font-weight:bold
}

#Form{
overflow: hidden
}

#Form p{
text-align: center;
font-size:18px;
font-weight:bold;
margin-bottom: 50px
}

#Form .shikinenjo{
width: 100%;
max-width:1000px; 
border:solid 2px #f87236;
padding:30px;
margin: 0 auto 100px
}

#Form .shikinenjo p{
text-align:left;
font-size:20px;
margin: 0
}

#Form p.note{
font-size: 14px;
width: 100%;
max-width: 870px;
margin: 0 auto 10px;
text-align: left;
}

#Form p.note span{
color:#e20000;
}

#Form table{
border:none;
width: 100%;
max-width: 810px;
margin: 0 auto 50px;
}

#Form th,
#Form td{
border:none;
padding:15px 20px;
}

#Form th{
border-bottom:solid 14px #fff;
background:#e1e1e1;
width: 250px
}

#Form input[type="text"]{
border-radius: 5px;
height: 30px;
border: solid 1px #ccc;
width: 270px;
font-size:16px;
}

#Form textarea{
font-size:16px;
}

#Form label{
margin-right:30px;
cursor: pointer;
font-weight: bold
}

#Form label input[type="radio"]{
cursor: pointer
}

#Form .require:after{
content:"*";
font-size:12px;
color:#e20000; 
line-height: 0
}

#Form input[type="submit"]{
display: block;
border:none;
background:#30306a;
color:#fff;
border-radius: 5px;
padding: 10px;
font-size:20px;
text-align: center;
width: 200px;
margin: 0 auto;
box-shadow: 0px 3px 10px 0px rgba(48, 65, 107, 0.2);
}

#FooterWrap{
width: 100%;
border-top:#9b9bb1 solid 1px
}

footer{
width: 100%;
max-width: 1560px;
padding: 15px 15px 0px 15px;
margin: 0 auto;
}

footer img{
width: 100%;
max-width: 180px;
height: auto;
}
footer p{
font-size:14px;
margin-bottom: 0
}
footer a{
font-weight: bold
}

#Thanks h1{
font-size:30px;
margin-bottom: 50px;
font-weight: bold
}



@media screen and (max-width:1000px) {
.max_1000{
display:block;
}

.top_section h2,
.mid_section h2{
font-size: 40px;
}

#Tokucho.top_section h2{
font-size: 48px;
}

.tokucho_detail{
display:block;
}

.tokucho_img img{
margin: 50px auto
}

.tokucho_text{
width:100%;
}
.tokucho_text h3 {
text-align: center;
padding-left:0;
}

.tokucho_text h3:before {
top:-60px;
left:50%;
transform: translate(-50%,0);
margin-right:0;
}

.tokucho_text p {
padding: 0;
}

#TokuchoDetail div:last-child{
margin-bottom: 0;
}

#TokuchoDetail div:last-child .tokucho_img img{
margin-bottom: 0;
}

#ServiceDetail{
display: block;
}

.service_detail{
width: 100%;
margin-bottom: 60px
}

.service_detail p{
padding:0;
}

.service_detail p br{
display:none;
}
.service_detail img{
margin: 0 auto
}

section#About {
padding:110px calc(100vw * 20 / 1000) 60px;
}

#AboutGoGo > dl{
width:calc(100vw * 954 / 1000);
height:calc(100vw * 666 / 1000);
}

#AboutGoGo > dl > dt{
width:calc(100vw * 420 / 1000);
height:calc(100vw * 420 / 1000);
top:calc(100vw * 170 / 1000);
border-radius:calc(100vw * 210 / 1000);
font-size:calc(100vw * 32 / 1000);
padding-top:calc(100vw * 200 / 1000);
}

#AboutGoGo dd.about_circle{
width:calc(100vw * 340 / 1000);
height:calc(100vw * 340 / 1000);
padding:calc(100vw * 10 / 1000);
border-radius:calc(100vw * 170 / 1000);
}

#AboutGoGo dd.about_system{
top:calc(100vw * 270 / 1000);
}

#AboutGoGo dd.about_marketing{
top:calc(100vw * 270 / 1000);
left:calc(100vw * 614 / 1000);
}


#AboutGoGo dd.about_circle dl{
width:calc(100vw * 320 / 1000);
height:calc(100vw * 320 / 1000);
border-radius:calc(100vw * 160 / 1000);
padding-top: calc(100vw * 80 / 1000)
}

#AboutGoGo dd.about_circle dl dt{
font-size:calc(100vw * 35 / 1000);
margin-bottom:calc(100vw * 30 / 1000);
}

#AboutGoGo dd.about_system dl dt,
#AboutGoGo dd.about_marketing dl dt{
font-size:calc(100vw * 26 / 1000);
}

#AboutGoGo dd.about_circle dl dd{
font-size:calc(100vw * 17 / 1000);
padding-left:calc(100vw * 25 / 1000);
margin-left:calc(100vw * 30 / 1000);
background-size:calc(100vw * 18 / 1000) calc(100vw * 17 / 1000);
}

#AboutMatome p {
font-size:calc(100vw * 26 / 1000);
}

#WorkDetail{
display:block;
}

.work_detail{
width: 100%;
max-width: 540px;
margin: 0 auto 60px
}

.work_img{
margin:0 auto 20px;
}
#Form p {
text-align: left;
}

}


@media screen and (max-width:810px) {
section{
padding: 60px 20px;
}
.mb_only {
display: block;
}
#Header{
padding:0;
}
#SiteName a{
width:150px;
height: 24px;
margin: 15px 10px
}
#HeaderLink a{
border-radius:0;
font-size:14px;
padding:18px 10px;
box-shadow:none;
margin:0 0 0 1px;
}
.top_section h2, .mid_section h2 {
font-size:calc(100vw * 40 / 810);
}
.tokucho_text p{
font-weight: normal
}
.service_detail p {
font-weight: normal
}
#Synergy h4 {
font-size: 20px;
}
#Synergy p {
font-size: 19px;
}
#Voice div p {
font-size: 16px;
font-weight: normal;
}
.reason_copy {
text-align: left;
}
}

@media screen and (max-width:610px) {
.pc_only{
display:none;
}
section {
padding:calc(100vw * 60 / 610) calc(100vw * 20 / 610);
}

.top_section h2,#Tokucho.top_section h2{
font-size:calc(100vw * 48 / 610);
margin: 0 auto calc(100vw * 100 / 610);
}
.top_section h2 .h2_sub {
font-size: 17px;
}

.tokucho_text h3{
font-size:calc(100vw * 36 / 610);
}

.tokucho_img img {
margin:calc(100vw * 50 / 610) auto;
}

.service_detail{
margin-bottom:calc(100vw * 60 / 610);
}

.service_detail h3 {
font-size:calc(100vw * 36 / 610);
margin-bottom:calc(100vw * 60 / 610);
}

#AboutWrapper {
background-image: url("../img/about_arrow_mb.png") , url("../img/about_top.png");
background-size:200px auto , auto 100px;
}

section#About {
padding:110px calc(100vw * 20 / 610) 60px;
}

#AboutGoGo > dl{
width:calc(100vw * 570 / 610);
height:calc(100vw * 575 / 610);
}

#AboutGoGo > dl > dt {
 width: calc(100vw * 288 / 610);
 height: calc(100vw * 288 / 610);
 top: calc(100vw * 150 / 610);
 border-radius: calc(100vw * 144 / 610);
 font-size: calc(100vw * 21 / 610);
 padding-top: calc(100vw * 134 / 610);
}


#AboutGoGo dd.about_circle{
width:calc(100vw * 260 / 610);
height:calc(100vw * 260 / 610);
padding:calc(100vw * 0 / 610);
border-radius:calc(100vw * 130 / 610);
border:none;
}

#AboutGoGo dd.about_system{
top:calc(100vw * 294 / 610);
}

#AboutGoGo dd.about_marketing{
top:calc(100vw * 294 / 610);
left:calc(100vw * 310 / 610);
}


#AboutGoGo dd.about_circle dl{
width:calc(100vw * 260 / 610);
height:calc(100vw * 260 / 610);
border-radius:calc(100vw * 130 / 610);
padding-top: calc(100vw * 70 / 610)
}

#AboutGoGo dd.about_circle dl dt{
font-size:calc(100vw * 22 / 610);
margin-bottom:calc(100vw * 28 / 610);
}

#AboutGoGo dd.about_system dl dt,
#AboutGoGo dd.about_marketing dl dt{
font-size:calc(100vw * 22 / 610);
}

#AboutGoGo dd.about_circle dl dd{
font-size:calc(100vw * 15 /610);
padding-left:calc(100vw * 14 / 610);
margin-left:calc(100vw * 24 / 610);
background-size:calc(100vw * 11 / 610) calc(100vw * 11 / 610);
}

#AboutMatome p {
font-size:16px;
text-align: left
}

#Synergy {
margin:calc(100vw * 150 / 610) auto 0;
padding:calc(100vw * 30 / 610);
}
#Synergy h4 {
font-size:calc(100vw * 23 / 610);
margin:calc(100vw * -70 / 610) auto calc(100vw * 40 / 610);
}

#Synergy p {
font-size: 16px;
}

.mid_section h2 {
font-size:calc(100vw * 48 / 610);
margin: 0 auto 60px;
}

.reason_copy {
font-size: 18px;
margin-bottom: 60px;
}
.reason_text p {
font-size: 16px;
margin-bottom: 20px;
}
#Form p {
font-size: 16px;
font-weight: normal
}
#Form .shikinenjo {
font-size: 18px;
padding: 15px;
margin: 0 auto 60px;
}
#Form table {
margin: 0 auto 30px;
}

#Form th,
#Form td{
width: 100%;
padding:15px;
display: block;
text-align: left
}

#Form th{
border-bottom:none;
}

#Form td{
padding:30px 15px;
}

#Form input[type="text"],
#Form textarea{
width: 100%;
}

#Form label{
margin-bottom: 15px;
display: block
}


#Form input[type="submit"]{
padding: 10px;
font-size:16px;
width: 180px;
}

#Thanks h1{
font-size:20px;
}
}