@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@500&display=swap');
@font-face {
font-family: 'LINESeedJP';
src: url('../font/LINESeedJP_TTF_Rg.eot');
src: url('../font/LINESeedJP_TTF_Rg.eot?iefix') format('eot'),
url('../font/LINESeedJP_OTF_Rg.woff')  format('woff'),
url('../font/LINESeedJP_OTF_Rg.woff2')  format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'LINESeedJP';
src: url('../font/LINESeedJP_TTF_Bd.eot');
src: url('../font/LINESeedJP_TTF_Bd.eot?iefix') format('eot'),
url('../font/LINESeedJP_OTF_Bd.woff')  format('woff'),
url('../font/LINESeedJP_OTF_Bd.woff2')  format('woff2');
font-weight: 600;
}


body {
    color: #000;
    font-family: 'LINESeedJP', sans-serif;
}

.fw_oz{font-family: "Oswald", sans-serif;}
.fw_nsans{font-family: 'Noto Sans JP', sans-serif;}

/*------------------------------------------------------------------------------------header*/

#mainimage{
    background-image: linear-gradient(0deg, #fff 50%, #fde732 50%, #fde732);
    position: relative;
    padding: 16em 0 0 0;
}
#mainimage .back{
    position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    z-index: 2;
}
#mainimage .back img{
    width: 100%;
}
#mainimage .container{
    z-index: 4;
    color: #000;
}
#mainimage h2{
    font-size: 13rem;
    line-height: 1;
}
#mainimage h3{
    font-size: 4.4rem;
    font-weight: 900;
    padding: 0.8em 0 0.3em 0;
}
#mainimage .read{
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    font-weight: 500;
    padding-bottom: 2.6em;
}
#mainimage .monitor{
    position: relative;
}
#mainimage .monitor .img{
    position: relative;
    width: 56em;
    margin: 0 auto;
}
#mainimage .slide{
    position: absolute;
    top: 1.4em;
    left: 0;
    right: 0;
    width: 53em;
    margin: 0 auto;
}
#mainimage .slide .item{
    position: relative;
}
#mainimage .slide .pop{
    position: absolute;
    opacity: 0;
}
#mainimage .slide .pop.active{
animation: bounceIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
#mainimage .slide .pop1{
width: 20%;
  top: 19%;
  left: 8%;
}
#mainimage .slide .pop2{
width: 26%;
  top: 36%;
  right: 4%;
}
#mainimage .slide .pop3{
width:22%;
  top: 25%;
  left: 38%;
}
#mainimage .slide .pop4{
width: 44%;
  bottom: 3.5%;
  left: 1.5%;
}

#mainimage .circle{
    position: absolute;
    right: -10em;
    top: -10em;
    z-index: 99;
}
#mainimage .circle .inner{
    background-color: #134c9a;
    color: #fff;
    width: 15em;
    height: 15em;
    border-radius: 100%;
    font-weight: 600;
}
#mainimage .circle .deg{
    transform: rotate(-8deg);
}
#mainimage .circle .txt1{
    font-size: 2rem;
    padding-top: 2.5em;
}
#mainimage .circle .txt2{
    font-size: 2.6rem;
    line-height: 1.2;
    padding-bottom: 0.2em;
}
#mainimage .circle .txt3{
    font-size: 3rem;
    line-height: 1;
    padding-left: 0.2em
}
#mainimage .circle .txt3 span{
    font-family: "Oswald", sans-serif;
    font-size: 6.6rem;
}
#mainimage .circle .txt4{
    font-size: 1.5rem;
    font-weight: 400;
    position: absolute;
right: 1.6em;
  bottom: 1.8em;
}
.target {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(0);
  }
}
/*------------------------------------------------------------------------------------detail*/
#logoslide{
  overflow: hidden;
    margin: 4em 0;
}
#logoslide ul {
  display: flex;
    align-items: center;
    width: 198em;
  animation: scrollLoop 50s linear infinite;
}
#logoslide li{
    padding-right: 2em;
}
#logoslide li.item1,#logoslide li.item3{
    padding-right: 3em;
}
#logoslide li.item5{
    padding-right: 0;
}
#logoslide .item1 img{ width: 16em;}
#logoslide .item2 img{ width: 14em;}
#logoslide .item3 img{ width: 15em;}
#logoslide .item4 img{ width: 17em;}
#logoslide .item5 img{ width: 27em;}

/* 横スクロールアニメーション */
@keyframes scrollLoop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

#readbox{
    padding-bottom: 10em;
}
#readbox h2{
    font-size: 6rem;
    font-weight: 600;
    line-height: 1.4;
}
#readbox h2 span{
    font-size: 6.8rem;
}
#readbox p{
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 2.2;
    margin-top: 1.5em;
}

#service{
    position: relative;
    background-color: #fefbe5;
    padding: 6em 0;
}
.triangle {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 0;
  top: -15em;
}
#service .triangle.right {
left: 0;
  border-left: 100vw solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 24em solid #fef22c;
}
#service .triangle.left {
right: 0;
  border-right: 100vw solid transparent;
  border-left: 0 solid transparent;
  border-bottom: 24em solid #fefbe5;
}
#service h2, #price h2{
    font-size: 2rem;
}
#service h2 p, #price h2 p{
    font-size: 5rem;
    font-weight: 800;
    line-height: 1.5;
}
#service .txt, #price .txt{
    font-size: 2rem;
    line-height: 2.4;
}
#service .txt{
    padding: 2em 0 0 0;
}
#design{
    padding-top: 6em;
}
#service ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#service ul li{
    margin: 2em; 
}
#service ul li p{
    font-size: 3rem;
    font-weight: 600;
    padding-bottom: 0.5em;
}
#service .item1 img{ width: 18em;}
#service .item2 img{ width: 16em;}
#service .item3 img{ width: 17em;}
#service .item4 img{ width: 19em;}
#service .item5 img{ width: 30em;}
#service .item4{ margin: 2em 0 2em 8em;}
#service .item1 p{ padding-left: 0.4em;}
#service .item2 p{ padding-left: 0.5em;}
#service .item5 p{ padding-right: 1em;}


#price{
    padding: 8em 0;
}
#price .txt{
    padding: 2em 0 5em 0;
}
#price .flexbox{
    justify-content:center;
}
#price .box{
    width: 47%;
    margin: 0 1.5em;
    border-radius: 2em;
    padding: 3em 2.5em 4.5em 2.5em;
    text-align: justify;
}
#price .box1{
    background-color: #fde732;
}
#price .box2{
    border: 1px solid #b2b2b2;
}
#price h3{
    font-size: 2.2rem;
    font-weight: 600;
}
#price .price{
    font-size: 2.2rem;
    font-weight: 600;
}
#price .price span{
    font-size: 4rem;
}
#price .read{
    font-size: 1.8rem;
    line-height: 1.8;
    padding: 1em 0 2em 0;
}
#price ul{}
#price ul li{
    font-size: 1.8rem;
    font-weight: 600;
    padding: 1.3em 0 1.2em 1em;
    border-bottom: 1px solid #000;
    text-indent: -1em;
    line-height: 1.4;
}
#price .box2  li{
    border-bottom: 1px solid #cdcdcd;
}


#form{
    background-color: #eeeeee;
    padding: 8em 0;
}
#form h2{
    font-size: 4rem;
    font-weight: 600;
}
#form .read{
    font-size: 2rem;
    line-height: 1.8;
    padding: 2em 0 3em 0;
}
#form .txtbox{
    text-align: left;
    padding-left: 3.5em;
}
#form .box{
    background-color: #fff;
    border-radius: 2em;
    padding: 4em 2.5em;
    width: 97%;
  margin: 0 auto;
}
#form dl{
    text-align: left;
    display: flex;
    font-size: 1.8rem;
    padding: 1em 0;
}
#form dt{
    font-weight: 600;
    width: 10em;
    padding-top: 0.7em;
}
#form dd{
    flex: 1;
}
#form dd p{
    color: #bd0d0d;
    font-size: 1.5rem;
}
#form dl.check dt{
    padding-top: 0;
}
#form dl label{
    font-size: 2.2rem;
    font-weight: 600;
    padding-right: 1em;
  display: inline-flex;
  align-items: center;
}
#form dl.check{
    align-items: center;
}

#form input[type='text'],#form input[type='email']{
	width:70%;
	border:1px solid #b2b2b2;
	padding:0.7em 1em;
	font-size:1.8rem;
    margin-bottom: 0.4em;
    box-shadow: none;
    height: auto;
    line-height: 1.8;
    border-radius: 0.4em;
}

#form input[type='radio'] {
  appearance: none;
  position: relative;
  width: 1.6em;
  height: 1.6em;
  border: 1px solid #b2b2b2;
  border-radius: 100%;
  cursor: pointer;
    margin-right: 0.5em;
}

#form input[type='radio']:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  border-radius: 100%;
  background-color: #bd0d0d;
}
#form .btnbox{
    padding-top: 2em;
    font-size: 1.8rem;
}
#form .btnbox .title{
    padding-bottom: 0.5em;
}
#form .btnbox input{
    margin-top: 2em;
	border:0;
	background:#4b4b4b;
	 color:#fff;
    font-weight: 600;
    font-size: 2.2rem;
    width: 40rem;
    border-radius: 0.4em;
padding: 1em 0;
	cursor:pointer;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
    text-shadow: none;
}
#form .btnbox input:hover{
    background-color: #91004f;
    text-decoration: none;
}
/*------------------------------------------------------------------------------------footer*/
#footer{
    background-image: url("../../../common/img/logo_f.svg");
    background-repeat: no-repeat;
  background-position: -3em 58%;
  background-size: 37em auto;
}
#footer ul.f_navi {
  display: flex;
    justify-content: center;
  margin-bottom: 0;
}
#footer ul.f_navi li {
    margin: 0 0.5em;
    font-size: 1.8rem;
}
#footer .copy{
    color: #fff;
}
#footer .copy .f_logo {
    position: relative;
    top: auto;
}
#footer .flexbox{
    justify-content: flex-start;
      align-items: last baseline;
    margin: 4em 0;
}
#footer .telbox{
    margin-right: 4em;
}
#footer .telbox .title{
    font-size: 2rem;
    font-weight: 500;
}
#footer .telbox .num{
    font-size: 3.5rem;
    line-height: 1;
}
#footer .f_contact {
  margin-bottom: 0;
}
#footer .copyright {
  position: relative;
  bottom: auto;
  font-size: 1.2rem;
  font-weight: 600;
}
#privacy .close::after {
  padding-top: 0.22em;
}
@media screen and (min-width: 769px) and (max-width: 1500px) {
/*base*/
html {
	font-size: 0.67vw;
}
.container{
max-width:100%;
padding:0 4em;
margin:0 auto;
}
   
    
}

@media only screen and (max-width: 768px) {
    
    .pc{display: none !important;}
    
#mainimage{
    background-image: none;
    background-color: #fde732;
    padding: 10em 0 0 0;
}
#mainimage .back{
    bottom: -3em;
}
#mainimage h2{
    font-size: 5.5rem;
    line-height: 1;
}
#mainimage h3{
    font-size: 2.8rem;
    font-weight: 900;
    padding: 1.5em 0 0.4em 0;
}
#mainimage .read{
    font-size: 2rem;
}
#mainimage .monitor .img{
    width: 100%;
}
#mainimage .slide{
    top: 0.5em;
    width: 95%;
}

#mainimage .circle{
    top: auto;
    right: -0.5em;
    bottom: -5em;
}
#mainimage .circle .inner{
    width: 12em;
    height: 12em;
}
#mainimage .circle .txt1{
font-size: 1.6rem;
    padding-top: 2.2em;
}
#mainimage .circle .txt2{
font-size: 2.2rem;
}
#mainimage .circle .txt3{
    font-size: 2rem;
}
#mainimage .circle .txt3 span{
    font-size: 5.6rem;
}
#mainimage .circle .txt4{
font-size: 1.2rem;
    right: 1.2em;
    bottom: 1.6em;
}
/*------------------------------------------------------------------------------------detail*/
#logoslide{
    margin: 8em 0 4em 0;
}
#logoslide ul {
    width: 168em;
}
#logoslide .item1 img{ width: 13em;}
#logoslide .item2 img{ width: 11em;}
#logoslide .item3 img{ width: 12em;}
#logoslide .item4 img{ width: 14em;}
#logoslide .item5 img{ width: 24em;}



#readbox{
    padding-bottom: 10em;
}
#readbox h2{
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.2;
}
#readbox h2 span{
    font-size: 4.8rem;
    line-height: 1.2;
}
#readbox p{
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 2;
    margin-top: 1.5em;
}

#service{
    padding: 6em 0;
}
.triangle {
  top: -10em;
}
#service .triangle.right {
  border-bottom: 14em solid #fef22c;
}
#service .triangle.left {
  border-bottom: 14em solid #fefbe5;
}
#service h2, #price h2{
}
#service h2 p, #price h2 p{
}
#service .txt, #price .txt{
    line-height: 2;
}
#service .txt{
    padding: 2em 0 0 0;
}
#design{
}
#service ul{
    display: block;
}
#service ul li,#service .item4{
    margin: 3em 0; 
}
#service ul li p{
}
#service .item1 img{ width: 18em;margin-right: 1em;}
#service .item2 img{ width: 16em;}
#service .item3 img{ width: 17em;margin-right: 1em;}
#service .item4 img{ width: 19em;}
#service .item5 img{ width: 100%;margin-right: -2em}

#service .item1 p{ padding-left: 0;}
#service .item2 p{ padding-left: 0;}
#service .item5 p{ padding-right: 0;}

#price{
    padding: 6em 0;
}
#price .txt{
    padding: 2em 0 5em 0;
}
#price .flexbox{
    display: block;
}
#price .box{
    width: 100%;
    margin: 0;
    padding: 3em 2em 4em 2em;
}
#price .box1{
    margin-bottom: 3em;
}
#price .box2{
}
#price h3{
}
#price .price{
}
#price .price span{
}
#price .read{
}
#price ul{}
#price ul li{
}
#price .box2  li{
}


#form{
    padding: 6em 0;
}
#form h2{
    text-align: center;
    font-size: 3.5rem;
}
#form .read{
    font-size: 2rem;
    line-height: 1.8;
    padding: 2em 0 3em 0;
}
#form .txtbox{
    padding-left: 0;
}
#form .box{
    padding: 4em 2em;
    width: 100%;
}
#form dl{
    display: block;
    font-size: 1.8rem;
    padding: 1em 0;
}
#form dt{
    width: auto;
    padding: 0 0 0.5em 0;
}
#form dd{
}
#form dd p{
}
#form dl.check dt{
    padding-top: 0;
}
#form dl label{
    font-size: 2.2rem;
    padding-right: 0;
    margin: 3px -2em 3px 0;
  display: flex;
}
#form dl.check{
}

#form input[type='text'],#form input[type='email']{
	width:100%;
}
#form .btnbox{
    text-align: justify;
}
#form .btnbox .title{
    padding-bottom: 0.5em;
}
#form .btnbox input{
    width: 100%;
}
/*------------------------------------------------------------------------------------footer*/
#footer{
    background-image: url("../../../common/img/logo_f.svg");
    background-repeat: no-repeat;
  background-position: -3em 58%;
  background-size: 37em auto;
}
#footer ul.f_navi {
  margin-bottom: 3em;
}
#footer ul.f_navi li {
    margin: 0 0.8em;
    padding: 0;
}
#footer .copy{
    color: #fff;
}
#footer .copy .f_logo {
    position: relative;
    top: auto;
}
#footer .flexbox{
    display: block;
    margin: 2em 0 4em 0;
}
#footer .telbox{
    margin: 0 0 2em 0;
}
#footer .telbox .title{
    font-size: 2rem;
    font-weight: 500;
}
#footer .telbox .num{
    font-size: 3.5rem;
    line-height: 1;
}
    #footer .telbox .num a{
        color: #fff;
    }
#footer .f_contact {
  margin-bottom: 0;
}
#footer .copyright {
  position: relative;
  bottom: auto;
  font-size: 1.2rem;
  font-weight: 600;
}
    
    
    
}

@media only screen and (min-width: 769px) {
    .sp{display: none !important;}
}