@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
.only-pc {
  display: none;
}

@media (min-width: 766px) and (max-width: 1000px) {
  .only-pc {
    display: none;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .only-pc {
    display: inline;
  }
}

@media (min-width: 1001px) {
  .only-pc {
    display: inline;
  }
}

.only-sppc {
  display: block;
}

@media (min-width: 766px) and (max-width: 1000px) {
  .only-sppc {
    display: none;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .only-sppc {
    display: block;
  }
}

@media (min-width: 1001px) {
  .only-sppc {
    display: block;
  }
}

.only-tabsp {
  display: block;
}

@media (min-width: 766px) and (max-width: 1000px) {
  .only-tabsp {
    display: block;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .only-tabsp {
    display: none;
  }
}

@media (min-width: 1001px) {
  .only-tabsp {
    display: none;
  }
}

.only-tab {
  display: none;
}

@media (min-width: 766px) and (max-width: 1000px) {
  .only-tab {
    display: block;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .only-tab {
    display: none;
  }
}

@media (min-width: 1001px) {
  .only-tab {
    display: none;
  }
}

.only-pctab {
  display: none;
}

@media (min-width: 766px) and (max-width: 1000px) {
  .only-pctab {
    display: inline-block;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .only-pctab {
    display: inline-block;
  }
}

@media (min-width: 1001px) {
  .only-pctab {
    display: inline-block;
  }
}

.only-tabpc {
  display: none;
}

@media (min-width: 766px) and (max-width: 1000px) {
  .only-tabpc {
    display: inline-block;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .only-tabpc {
    display: inline-block;
  }
}

@media (min-width: 1001px) {
  .only-tabpc {
    display: inline-block;
  }
}

.only-sp {
  display: inline-block;
}

@media (min-width: 766px) and (max-width: 1000px) {
  .only-sp {
    display: none;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .only-sp {
    display: none;
  }
}

@media (min-width: 1001px) {
  .only-sp {
    display: none;
  }
}

.wideimg {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wideimg::before {
  content: " ";
  display: block;
  padding-top: 30%;
}

.wideimg > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

.sqimg {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.sqimg::before {
  content: " ";
  display: block;
  padding-top: 90%;
}

.sqimg > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

.sqimg-tabpc {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.sqimg-tabpc::before {
  content: " ";
  display: block;
  padding-top: 60%;
}

@media (min-width: 766px) and (max-width: 1000px) {
  .sqimg-tabpc::before {
    padding-top: 90%;
  }
}

@media (min-width: 1001px) {
  .sqimg-tabpc::before {
    padding-top: 90%;
  }
}

.sqimg-tabpc > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

html {
  background: fff;
  color: 333;
  overflow-y: scroll;
}

body {
  font: 13px/1.22 arial,helvetica,clean,sans-serif;
  *font-size: small;
  *font: x-small;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

table {
  font-size: inherit;
  font: 100%;
}

a img, img {
  border: 0;
}

figure, blockquote, dd, div, dl, dt,
h1, h2, h3, h4, h5, h6,
li, ol, p, pre, span, td, th, ul {
  margin: 0;
  padding: 0;
}

abbr, acronym {
  border: 0;
}

address, caption, cite, code, dfn, em, th, strong, var {
  font-style: normal;
  font-weight: normal;
}

caption, th {
  text-align: left;
}

code, kbd, pre, samp, tt {
  font-family: monospace;
  line-height: 100%;
}

* + html code, kbd, pre, samp, tt {
  font-size: 108%;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

q:before, q:after {
  content: '';
}

button, fieldset, form, input, label, legend, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}

hr {
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  background-color: #FFF;
  color: #FFF;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
  line-height: 160%;
  letter-spacing: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  margin: 0;
  padding: 0px;
  font-size: 16px;
  background-color: #fff;
  color: #000;
  font-weight: 500;
}

@media (min-width: 766px) and (max-width: 1000px) {
  body {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  body {
    font-size: 18px;
    letter-spacing: 0.5px;
  }
}

@media (min-width: 1001px) {
  body {
    font-size: 19px;
    letter-spacing: 0.5px;
  }
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 766px) and (max-width: 1000px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 1001px) {
  html {
    font-size: 20px;
  }
}

form {
  margin: 0;
  padding: 0px;
}

::selection {
  background: #135d25;
  /*背景色*/
  color: #fff;
  /*文字色*/
}

::-moz-selection {
  background: #135d25;
  /*背景色*/
  color: #fff;
  /*文字色*/
}

li {
  line-height: 160%;
}

h1 {
  line-height: 1.2;
  margin: 0;
  padding: 0px;
  font-weight: normal;
  font-size: 0.75rem;
  color: #b99900;
  padding: .5rem 0 .5rem 0;
}

@media (min-width: 1001px) {
  h1 {
    line-height: 1.5;
    padding: 0 0 .5rem 0;
  }
}

strong {
  font-weight: bolder;
}

img {
  border: none;
}

a:link {
  color: #616161;
}

a:visited {
  color: #616161;
}

a:hover {
  color: #616161;
}

a:active {
  color: #616161;
}

a {
  line-height: 160%;
  text-decoration: none;
}

p {
  margin: 0;
  padding: 0px;
}

.small {
  font-size: 0.9em;
}

.float {
  animation: float 2s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

.inner {
  width: 90%;
  margin: 0 auto;
  margin: 0 auto;
}

@media (min-width: 766px) and (max-width: 1000px) {
  .inner {
    width: 90%;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .inner {
    width: 900px;
  }
}

@media (min-width: 1001px) {
  .inner {
    width: 900px;
  }
}

section img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width:1000px) {
    #company img {
        max-width: 400px;
        width: 80%;
        height: auto;
      }
/*========max-width:787========*/
}

dl.is-empty {
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

li.is-empty {
  height: 0;
  width: 0;
  margin: 0 !important;
  padding: 0;
}

a.linkc:link {
  color: #3e89ca;
  font-weight: bolder;
  text-decoration: underline;
}



footer {
  background-color: #0B53AB;
  color:#fff;
  text-align: center;
  padding:2rem 0 5rem 0;
}
footer a:link{
  color:#fff;
  text-decoration: underline;
}
footer a:visited{
  color:#fff;
  text-decoration: underline;
}
footer .inner {
  padding: 3rem 0 2rem 0;
  text-align: center;
}

footer .fixed-btn{
  width:100%;
  box-sizing:border-box;
  position: fixed;
  bottom: 0;
}
footer .fixed-btn img:hover{
 opacity:0.8;
}
footer .fixed-btn img{
  max-width: 100%;
  height: auto;
}
@media (min-width: 1001px) {
  footer .fixed-btn{
    width:400px;
    box-sizing:border-box;
    position: fixed;
    bottom: 0;
    right:0;
  }
}

@media (min-width: 766px) and (max-width: 1000px) {
  .inner100{
    width:100%;
    box-sizing: border-box;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .inner100{
    width:800px;
    margin:0 auto;
  }
}

@media (min-width: 1001px) {
  .inner100{
    width:900px;
    margin:0 auto;
  }
}


/* #mv  */
#mv{
background-color: #6798c1;
}

#mv .inner100 {
  background-color: #2776ab;
}
#mv .inner100 ul{
  margin:-3rem 0 0 0;
}

@media (min-width: 1001px) {
  #mv .inner100 {
      width: 900px;
      margin: 0 auto;
      border-left: 6px solid #000;
      border-right: 6px solid #000;
  }
}


/* #jitsurei  */
#jitsurei h2{
background-color: #fbdb03;
position: relative;
}
#jitsurei h2:after{
  content:'';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 20px;
  bottom:-19px;
  border-color: #fbdb03 transparent transparent transparent;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}
#jitsurei {
  padding:1px 0;
background: #fff url(../images/jitsurei-bg.png) 0 0 repeat;
}
#jitsurei .pc-layout h3{
  padding:2rem 0 0 0 ;  
}
#jitsurei .pc-layout .pic{
  width:60%;
  margin:0 auto; 
}
#jitsurei ol li{
    position: relative;  
    width:95%;
    margin:0 auto 2rem 0;
    height:calc(100vw * 0.95 *1.4);
} 
#jitsurei ol li .txt{
    position: absolute; 
} 
#jitsurei ol li .btn1{
    position: absolute; 
    bottom:calc(100vw * 0.8 *0.25);
    width:80%;
    left:12%;
} 
#jitsurei ol li .btn2{
    position: absolute; 
    width:80%;
    bottom:10px;  
    left:12%;      
} 
@media (min-width: 1001px) {
  #jitsurei h2:after{
    content:'';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 30px;
    bottom:-28px;
    border-color: #fbdb03 transparent transparent transparent;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
  }  
  #jitsurei .pc-layout{
      position: relative;
      width:100%;
      height: 370px;
  }
  #jitsurei .pc-layout h3{
    padding:0;
      position: absolute;
      width:75%;
       top:70px;     
  }  
  #jitsurei .pc-layout .pic{
      position: absolute;
      width:40%;
      right:-100px;
      bottom:0px;
  }
  #jitsurei ol{
      display: flex;   
  }
  #jitsurei ol li{
      position: relative;  
      width:100%;
      height: 647px;
  } 
  #jitsurei ol li .txt{
      position: absolute; 
      height: 647px;      
  } 
  #jitsurei ol li .btn1{
      position: absolute; 
      bottom:110px;
      width:80%;
      left:12%;      
  } 
  #jitsurei ol li .btn2{
      position: absolute; 
      bottom:1rem;
      left:12%;
       width:80%;     
  }
  #jitsurei ol li .btn1:hover,  #jitsurei ol li .btn2:hover{
    opacity:0.6;
  } 

}

/* #meritto  */
#meritto{
  background: #7cdbfa url(../images/meritto-bg-sp.png) 0 0 no-repeat;
  background-size: contain;
  padding:1rem 0;
}
#meritto ol{
  width:90%;
  margin:0 auto;
}
#meritto ol li{
  margin:0 0 2rem 0;
}
@media (min-width: 1001px) {
#meritto{
  background: #7cdbfa url(../images/meritto-bg-pc.png) center top no-repeat;
  background-size: contain;
  padding:1rem 0;
}
#meritto h3{
  width:600px;
  margin:0 auto;
} 
#meritto ol{
      width:600px;
      margin:0 auto;
} 
#meritto ol li{ 
}  
}


/* #reason */
#reason{
  background: #fff url(../images/reason-bg.gif) 0 0 repeat;
  background-size: 10px;
  padding:1px 0;
}
#reason ol li{
  margin:0 0 2rem 0;
}
#reason ol .photo{
  width:80%;
  margin: 0 auto;
}
#reason ol .txt{
  width:80%;
  margin: 0 auto;
  padding:.5rem 0;

}

@media (min-width: 1001px) {
  #konna{
    width:100%;
    text-align: center;
  background-color: #000;
  position: relative;
  height: 365px;
  }
  #konna .inner100{
    width:900px;
    text-align: center;
  }
  #reason h3{
    width:700px;
    margin: 0 auto;
    padding:90px 0 0 0;

  }  
   #reason ol{
    width:700px;
    margin:0 auto;
  }
  #reason ol li{
    margin:0 0 3rem 0;
  }  
}


/* #flow */
#flow {
  background: #fff url(../images/flow-bg.gif) 0 0 repeat;
  background-size: 10px;
  padding:1px 0;
}
#flow h3 img{
  border-bottom: 5px solid yellow;
}
#flow h3 {
  margin:0 0 2rem 0;
}
#flow li{
  padding:0 0 3rem 0;
  margin:0 0 1rem 0;
  background: url(../images/flow-ar.png) center bottom no-repeat;
  background-size: 30px;
}
#flow li:last-of-type{
  background:none;
}
#flow li p{
  width:75%;
  margin:0 auto;
}
@media (min-width: 1001px) {
  #flow h3{
  background-color: #1f4284;
  text-align: center;
  border-bottom: 7px solid yellow
}
  #flow h3 img{
  width:600px;
  margin:0 auto;
  border:none;
}
#flow li{
  display: flex;  
  justify-content: space-between; 
  align-items: center; 
  background: url(../images/flow-ar.png) 25% bottom no-repeat;
  background-size: 30px;
}
#flow li h4{
  width:50%;
}
#flow li p{
  width:50%;
}
}

/* # about */
#about{
  background-color: #1d53ab;
  padding:1px 0;
}

#about h3{
  font-size: 3rem;
  font-weight: bolder;
  color:#ffffff2e;
  text-align: right;
  padding:1rem 0;
  margin:0 0 3rem 0;
}
#about h4{
  margin:-6rem auto 0 auto;
  width:100%;
}
#about .txt-box{
  width:90%;
  box-sizing: border-box;
  margin:0 auto 3rem auto;
  background-color: #fff;
  padding:4rem 2rem 2rem 2rem;
  border-radius: .5rem;
}
@media (min-width: 1001px) {
#about h3{
  margin:0 0 2rem 0;
}
#about .txt-box{
  padding:1.5rem;
}
#about h4{
  margin:-3rem auto 0 auto;
  width:40%;
}  
}

/* # faq */
#faq {
  background-color: #FFDB00;
  padding:3rem 0;
}
#faq h3{
  background: url(../images/faq-tit-bg.gif) 0 1.5rem repeat-x;
  background-size: 60px;
  margin:0 0 3rem 0;
}
#faq h3 img{
  width:auto;
  height: 4rem;
  margin:0 auto;
  display:block
}
#faq dl{
  border:5px solid #000;
  margin:0 0 2rem 0;
}
#faq dt{
  background-color: #eee;
  font-weight: bolder;
  font-size: 1.1rem;
  padding:1.2rem;  
  display: flex;  
  align-items: start;   
}
#faq dt .icon{
  padding:0 .5rem 0 0;
  font-size: 1.1em;
}
#faq dd{
  padding:1.2rem;
  background-color: #fff;
}
#faq .btn1:hover{
    opacity:0.6;
  }
@media (min-width: 1001px) {
#faq {
  background-color: #FFDB00;
  padding:3rem 0;
}
#faq .end{
  width:500px;
  margin:0 auto;
}  
}

/* # company*/
#company{
    background-color: #6798c1; 
    padding:1px 0; 
}
#company dl{
  border-bottom:2px dotted #000;
  padding: 1rem 0;
}
#company dl:last-of-type{
  border:none;
  }
#company dt{
  font-weight: bolder;
  padding: 0 0 .5rem 0;
}
#company dt span{
  background-color: #1f4284;
    color: #fff;
    padding: 0.2rem 0.5rem;
    display: inline-block;
}
#company dd{
}
#company h2{
  font-size: 2rem;
  text-align: center;
  padding: 3rem 0 1rem 0;
  font-weight: bolder;
}
#company .inner100 {
  background-color: #fff;
    width: 90%;
    border: 6px solid #000;
    padding :1rem;
    box-sizing: border-box;
    margin:2rem auto;
}
#company .btn{
  text-align: center;
  padding: 2rem 0;
}
#company .btn a{
  width:80%;
  margin:0 auto;
  background-color: #ffdb00;
  padding: 1rem .5rem;
  text-align: center;
  font-weight: bolder;
  border-radius: 2rem;
  box-sizing: border-box;
  display: inline-block;
  color:#000;
  border:4px solid #000;

}
@media (min-width: 1001px) {
#company .inner100 {
  background-color: #fff;
    width: 900px;
    border: 6px solid #000;
    padding :3rem;
    box-sizing: border-box;
    margin:2rem auto;
}
#company h2 span{
  width:400px;
  margin:0 auto .5rem auto;
  display: block;
}
#company .btn a{
  width:400px;

}
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}