body{
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ',Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
line-height: 1.6;
overflow-x: hidden; 
}
.orenge{
color: #DE6632;
}
.green{
color: #1CA23A;
}
.yello{
color: #EBC81C;
}
.lime{
color: #8CC22A;
}
.pa10{
padding: 10px 0;
}
.pa20{
padding: 20px 0;
}
.stress{
font-weight: bold;
color: #26B7BC;
}
.flex_box{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
padding: 20px 0;
flex-wrap: nowrap;
}
.flex_box img,.flex_box_between img,.flex_box_start img,.flex_box_end img{
width: 100%;
}
.flex_50box{
width: 48%;
}
.wi95{
width: 95%;
margin: 0 auto;
}
header{
position: relative;
height: 50px;
border-bottom:20px solid #BBBBBB;
}
.top_cont{
position: relative;
}
.top_color{
background: #ffffff;
}
.top_rord{
position: relative;
height: 100px;
background: #BBBBBB;
}
.kadomaru_left{
background: #ffffff;
border-top-left-radius:400px 100px;
position: absolute;
top: 0;
height: 100px;
width: 100%;
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3)inset;
border-top: 5px dashed #CCCCCC;
}
.kadomaru_right02{
background: #E0E0E0;
border-top-right-radius:400px 100px;
position: absolute;
top: 0;
height: 100px;
width: 100%;
box-shadow:inset 5px 5px 5px rgba(0,0,0,.2);
}
.kadomaru_right{
background: #E0E0E0;
border-bottom-right-radius:400px 100px;
position: absolute;
top: 0;
height: 100px;
width: 100%;
box-shadow:inset -5px -5px 5px rgba(0,0,0,.2);
}
/* TOP画面 */
.top_logo{
position: absolute;
left:  2%;
top: -40px;
width: 28%;
}
.top_logo img{
width: 100%;
padding-top: 10px;
}
.top-ss{
display: none;
}
.top_img{
position: absolute;
width: 50%;
right:0;
top: 0;
}
.top_img img{
width: 100%;
}
.car_ann{
position: absolute;
left:-200px;
top: -150px;
width: 10%;
}
.car_ann img{
width: 100%;
}
.run {
animation: run 3.5s linear;
}
@keyframes run {
0%   { transform: translate(0%, 150%)skewY(-20deg)scale(0.8,0.8);  }
30%   { transform: translate(400%, 0%); }
40%   { transform:  translate(500%, 0%)scale(0.8,1.1); }
50%   { transform:  translate(600%, 0%)scale(1.,1.8); }
100% { transform:translate(1300%, 0); }
}
.request{
border: 2px solid #EBC81C;
background: #EBC81C;
font-size: 110%;
font-weight: bold;
margin: 40px 0;
border-radius: 50px;
text-align: center;
padding:10px 40px;
animation: 0.3s;
display: inline-block;
position: absolute;
left:  20%;
top: 250px;
}
.request:hover{
background: #F97120;
}
.request a{
 color: #030303;   
}
.btn_in {
animation: btn_in 2s linear 0s 1;
}
@keyframes btn_in {
0%{
opacity: 0;
}
40%{
opacity: 0;
}
100% {
opacity: 100;  
}
}
a{
text-decoration: none;
}
h1{
font-size: 300%;
font-weight: bold;
color: #1CA23A;    
}
/* 見出しデザイン */
h2{
font-size: 200%;
font-weight: bold;
text-align: center;
animation: poyoyon3 2s;
animation-iteration-count:2; /*アニメーションを3回再生する*/
opacity: 1;
color: #FB1303;
}
@keyframes poyoyon3 {
0%, 40% {
transform: skew(0deg, 0deg);
}
10% {
transform: skew(5deg, 5deg);
}
10% {
transform: skew(-4deg, -4deg);
}
15% {
transform: skew(3deg, 3deg);
}
20% {
transform: skew(-2deg, -2deg);
}
25% {
transform: skew(1deg, 1deg);
}
30% {
transform: skew(-0.6deg, -0.6deg);
}
35% {
transform: skew(0.3deg, 0.3deg);
}
}
h3{
font-size: 130%;
font-weight: bold;
text-align: center; 
}
h4 {
background-size: contain;
text-align: center;
font-weight: bold;
margin-bottom: 40px 0 30px;
padding: 50px 10px 10px 0;
font-size: 200%;
position: relative;
background: url("../img/mini_logo.png")no-repeat center;
background-position: 50% 8%;
color: #1CA23A;
}
h5{
background: #ffffff;
font-size: 120%;
font-weight: bold;
padding:10px;
color: #4D4D4D;
text-align: left;
}
h6{
font-size: 180%; 
border-left: 10px solid #8CC22A;
background: #F2FFDC;
font-weight: bold;
padding: 10px 20px;
color: #8CC22A;
}
/* contener */
.cont01{
margin: 50px auto;
width: 80%;
position: relative;
}
/*システムの特徴*/
.contener3{
padding: 50px 0 70px;
width: 100%;
margin: 0 auto;
background: #F0D658;
}
/*流れ*/
.contener4{
padding: 50px 0 70px;
width: 100%;
margin: 0 auto;
background: #E4F5C4;
}
.flow{
width: 75%;
margin: 0 auto;
}
.flow_box{
width: 70%;
margin: 20px auto;
}
.flow_box p{
font-size: 90%;	
width: 90%;
margin: 20px auto 30px;
text-align: left;
}
/*会社概要*/
.company_cont{
 width: 90%;
margin: 30px auto;
 text-align: left;
}
.company_cont p{
width: 90%;
margin: 20px auto;
}
.company_cont a{
color: #1CA23A;	
font-weight: 600;
}
.midashi01{
font-size: 120%;
font-weight: bold;
position: relative;
padding: 0.3em 1.5em 0.3em 1em;
background: #ffffff;
color: #1CA23A;	
border-radius: 1em .1em 1em .0em/.1em 1em .1em 1em;
display: inline-block;
}
.midashi01::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 15px rgb(149, 158, 155);
}
.midashi02{
font-size: 120%;
font-weight: bold;
position: relative;
padding: 0.3em 1.5em 0.3em 1em;
background: #1CA23A;
color: #ffffff;	
border-radius: 1em .1em 1em .0em/.1em 1em .1em 1em;
display: inline-block;
}
.midashi02::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 15px rgba(184,233,167,1.00);
}
.img50{
width: 50%;
margin: 10px auto;
}
.img50 img{
width: 100%;
}
/*費用*/
.contener5{
margin: 0 auto;
padding: 50px 0 70px;
}
.price{
width: 70%;
margin: 0 auto;
padding: 60px 0;
}
.price table{
width: 100%;
border-collapse: collapse;
}
.price table th {
background: #F9E4DB;
width: 20%;
padding: 10px 30px;
border: 1px solid #D17B00;
text-align: center;
color: #FF4001;
font-weight: bold;
}
.price table td {
background: #ffffff;
text-align: left;
padding: 10px 30px;
border: 1px solid #D17B00;
}
.price p{
margin: 20px auto;
}
.fo_85{
font-size: 85%;
}
/*よくある質問*/
.contener6{
padding: 50px 0 70px;
}
.qanda{
width: 60%;
margin: auto;
}
.qanda section{
padding: 10px;
}
/*アコーディオン*/
.acco-container {
position: relative;
width: 100%;
outline: 0;
cursor: pointer
}
.acco-container .acco-title {
display: block;
position: relative;
margin: 0;
padding: 0.8em 0.8em 0.8em 2em;
font-size: 110%;
font-weight: normal;
cursor: pointer;
background: #FFFFFF;
border: 1px solid #26A644;
}
.acco-container .acco-title:hover,
.acco-container .acco-title:active,
.acco-container .content-entry.open .acco-title {
 background:#26A644;
 color: white;
}
.acco-title{
position: relative;
}
.acco-title:before{
content: "Q.";
font-weight: bold;
margin-right: 8px;
font-size: 130%;
color: #49E822;
}
.acco-title:after {
content: "";
position: absolute;
right: 25px;
top: 38%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top: solid 2px #002D4A;
border-right: solid 2px #002D4A;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.acco-title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
.acco-content {
display: none;
padding: 2em 2.3125em;
margin: 0 10px;
border-top: none;
background: #FFF6F8;
}
.acco-content p:before{
content: "A.";
font-weight: bold;
margin-right: 8px;
font-size: 130%;
color: crimson;
}
/* CSS for CodePen */
.acco-container {
width: 100%;
margin: 1.875em auto;
}
.img_flex{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.flex_img01{
width: 48%;
}
.img_flex img{
width: 100%;
}
.flex_cent{
width: 48%;
}
.flex_cent p{
width: 95%;
margin: 0 auto;
font-size: 115%;
font-weight: bold;
color: #002D4A;
}
/*　最後に　*/
.last_cont{
margin: 0 auto;
padding: 50px 0 70px;
}
.last_cont_inner{
margin: 0 auto;
width: 85%; 
}
.last_cont_inner p{
width:90%; 
margin: 30px auto;
}

/*　お問い合わせ　*/
.contener7{
position: relative;
}
.end_box02{
position: relative;
text-align: center;
}
.end_photo{
display: block;
}
.end_sp{
display: none;
}
.end_photo img,.end_sp img{
width: 100%;
margin: 0 auto;
vertical-align: top;
}
.end_box02 p{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
font-size: 110%;
}
a.endbtn{
background: #fff;
padding: 20px 80px;
color: #26A644;
font-weight: bold;
font-size: 110%;
text-decoration: none;
text-align: center;
display: inline-block;
border: 1px solid #26A644;
animation: 0.3s;
}
a.endbtn:hover {
color: #fff;
background: #26A644;
border: 1px solid #E5D00A;
}
/* リンクボタン */
.menu{
width: auto;
font-weight: bold;
text-align: center;
}
nav {
}
nav ul {
display: flex;
flex-flow: row;
justify-content: flex-end;
margin: 0;
padding: 3px 7px 0 7px;
align-items: center;
white-space: nowrap;
}
.menu nav ul li a {
display:block;
margin: 0 5px;
color: #00CED1;
}
.menu nav ul li a dl {
display: flex;
align-items: center;
padding-left: 3px;
}

.menu nav ul li a dl dt img{
height: 30px;
}
.menu nav ul li a dl dd {
margin: 0 5px;
font-weight: bold;
}
nav li+ li {
}
nav a{
box-shadow: 0 3px 0 0 #ffffff;
background-color: #ffffff;
display: inline-block;
padding: 0.5em;
cursor: pointer;
transition: all 0.3s ease 0s; 
border-radius: 15px 15px 0 0;
text-decoration: none;
}
nav a:hover{
box-shadow: 0 10px 2px 0 #ffffff;
transform: translateY(0.5em);
}
nav a::after {
}
.img_80{
width: 80%;
margin: 50px auto;
}
.img_80 img{
width: 100%;
}
.arrow {
position: relative;
width: 100px;
margin: 0 auto;
padding:30px 0; 
}
.arrow::before {
animation: arrow 2.5s infinite;
border: solid #FF0000;
border-width: 0 0 10px 10px;
content: "";
margin: auto;
position: absolute;
top: -64px;
left: 25px;
transform: rotate(-45deg);
width: 20px;
height: 20px;
}
@keyframes arrow {
0% {
transform: rotate(-45deg) translate(0, 0);
}
60% {
transform: rotate(-45deg) translate(-30px, 30px);
}
0%, 60%, 100% {
opacity: 0;
}
30% {
opacity: 1;
}
}
/* システムの特徴*/
.system{
width: 90%;
text-align: center;
margin: 5px auto;	
}
.systembox{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
}	
.system section{
padding: 5px;
width: 30%;
margin: 3px;
}
.system-img img{
width: 90%;
}
.system-sent{
margin: 0;
padding: 10px 15px;
text-align: center;
}
.system-sent p{
text-align: left;
font-size: 80%;
}
.system .point{
text-align: left;
}
/*　フッター　*/
footer{
text-align: center;
padding: 60px 0;
}
footer img{
width: 20%;
}
/*トップページ*/
#page-top{
position: fixed;
bottom: 2%;
right: 2%;
cursor:pointer;
width: 8%;
opacity: 0.8;
}
.pagetopbtn img{
width: 100%;
opacity: 0.8;
}





/*　iPadサイズ　----------------------------------*/

@media screen and (max-width: 768px){
 header{
position: relative;
height: 50px;
border-bottom:20px solid #BBBBBB;
background: #BBBBBB;
}
.car_ann{
position: absolute;
left:-200px;
top: 30px;
width: 20%;
}
.request{
font-size: 100%;
width: 80%;
margin: 40px auto;
padding:10px;
display: inherit;
position: static;
}
.top_cont{
position: static;
}   
.top_logo{
position: absolute;
left:  2%;
top: -50px;
width: 53%;
}
.top_logo img{
width: 130%;
padding-top: 10px;
}
    
.menu,.part01{
display: none;
}
h1{
font-size: 150%;
}
h2{
font-size:110%;
}
h4 {
margin:30px;
padding: 50px 10px 10px 0;
font-size: 130%;
background-position: 50% 10%;

}
h5{
font-size: 100%;
}
/* TOP画面 */
.contener1{
display: none;
}
.top{
position: static;
}
.top-logo{
position: absolute;
left: 2%;
top: 10px;
}
.top-logo　img{
width: 80%;
height: 80%;
}
.top-ss{
display: block;
}
.top-ssimg{
position: relative;
}	
.top-ssimg img{
width: 100%;
}
/*コンテナ*/	
/* 最初に*/
.intro{
width: 90%;
margin: 10px auto;	
}
.intro-img img{
height:120%;
}
/* システムについて*/
.system{
width: 90%;
}
.systembox{
flex-direction: column;
justify-content: center;
align-items: center;
}	
.system section{
padding: 0 5px;
width: 95%;
margin: 0 auto;
}
.system-img img{
width: 85%;
}
.system-sent{
margin: 0;
padding: 10px 0;
}
.system-sent p{
font-size: 95%;
padding-bottom: 20px
}
 /*会社概要*/
.company_cont{
width: 95%;
margin: 20px auto;
}
.company_cont p{
width: 95%;
}
.midashi01,.midashi02{
font-size: 110%;
padding: 0.3em 1em 0.3em 0.7em;
}
.img50{
width: 90%;
margin: 10px auto;
}

/*導入までの流れ*/
.flow{
width: 90%;
margin: 0 auto;
}
.flow_box{
width: 100%;
margin: 20px auto;
}
.flow_box p{
width: 95%;
margin: 20px auto 30px;
}
/*よくある質問*/
.contener6{
padding:40px 0;
}
.qanda{
width: 95%;
margin: auto;
}
/*　最後に　*/
.last_cont{
margin: 0 auto;
padding: 40px 0;
}
.last_cont_inner{
margin: 0 auto;
width: 95%; 
}
.last_cont_inner p{
width:90%; 
margin: 30px auto;
}
/*　お問い合わせ　*/
.end_box02{
position: relative;
text-align: center;
}
.end_photo{
display: none;
}
.end_sp{
display: block;
}
.end_photo img,.end_sp img{
width: 100%;
margin: 0 auto;
vertical-align: top;
}
.end_box02 p{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
font-size: 100%;
width: 90%;
}
a.endbtn{
padding: 5px 15px;

margin: auto;
font-size: 100%;
}
.footer img{  
width: 50%;
}
.flex_box{
display: flex;
flex-direction:column-reverse;
align-items: center;
justify-content: center;
padding: 20px 0;
flex-wrap: nowrap;
}	
}

/*　スマホサイズ　----------------------------------*/

@media only screen and (max-width:479px) {
/* TOP画面 */
.top-logo img{
width: 50%;
height: 50%;
}
/* contener */
.cont01{
margin: 30px auto;
width: 95%;
}
.img_80{
width: 90%;
margin: 40px auto;
}
.img_80 img{
width: 100%;
}
.flex_50box{
width: 90%;
}
/*料金*/
.price{
width: 90%;
margin: 0 auto;
padding: 30px 0;
}
.price table{
width: 95%;
 margin: 0 auto;
border-collapse: collapse;
}
.price table th {
padding: 5px;
border: 1px solid #D17B00;
text-align: left;
width: auto;
display: block;
border-top: none;
}
.price table td {
width: auto;
display: block;
border-top: none;
}
.price table tr:first-child {
border-top: 1px solid #D17B00;
}

.acco-container .acco-title {
margin: 0;
padding: 10px 20px 10px 10px;
font-size: 100%;

}
.acco-title:before{
font-size: 100%;
}
.acco-title:after {
right: 10px;
top: 38%;
}
.acco-content {
padding: 10px;
margin: 0 10px;
}
.acco-content p{
font-size: 90%;
}
/* CSS for CodePen */
.acco-container {
width: 100%;
margin: 1.875em auto;
}
/*トップページ*/
#page-top{
width: 17%;
}
.car_ann{
position: absolute;
left:-100px;
top: 10px;
width: 20%;
}
 
}