/* screens smaller than 1200---------------------------------------------------------- */
@media only screen and (max-width:1199px) {

  /*header*/
  /*------------------------------------------------------------------------------*/
  #header_in {
    width: 95%;
  }

  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/


/* screens smaller than 1000---------------------------------------------------------- */
@media only screen and (max-width:999px) {

  /*layout*/
  /*------------------------------------------------------------------------------*/
  .inner01 {
    width: 95%;
    padding: 0;
  }

  .tel {
    pointer-events: auto;
  }

  /*title*/
  /*------------------------------------------------------------------------------*/
  .title_01 .main {
    font-size: clamp(24px, 18.353px + 1.765vw, 36px);
    margin-top: clamp(15px, 7.941px + 2.206vw, 30px);
  }

  /*catch*/
  /*------------------------------------------------------------------------------*/
  #catch .title {
    gap: 2vw;
    font-size: 4.2vw;
  }

  #catch .title::before {
    width: clamp(14px, 7.412px + 2.059vw, 28px);
    height: clamp(28px, 14.824px + 4.118vw, 56px);
  }

  #catch .title::after {
    width: clamp(14px, 7.412px + 2.059vw, 28px);
    height: clamp(28px, 14.824px + 4.118vw, 56px);
  }

  .thanks #catch {
    padding: clamp(60px, 31.765px + 8.824vw, 120px) 0;
  }

  /*reason*/
  /*------------------------------------------------------------------------------*/
  #reason .box {
    margin-top: 60px;
    max-width: 100%;
    padding: clamp(70px, 10vw, 80px) clamp(15px, 2.6vw, 20px) clamp(20px, 5.2vw, 40px);
  }

  #reason .box.right {
    margin-left: 0;
  }

  #reason .txt_box {
    width: 50%;
    padding: 0;
  }

  #reason .img_box {
    width: 47%;
    margin-right: 0;
  }

  #reason .box.right .img_box {
    margin-left: 0;
  }

  /*voice*/
  /*------------------------------------------------------------------------------*/
  #voice {
    padding: clamp(50px, 26.471px + 7.353vw, 100px) 0 0;
  }

  #voice .title_01 {
    margin-bottom: clamp(35px, 18.529px + 5.147vw, 70px);
  }

  .voice_item {
    padding-left: 10px;
  }

  /*flow*/
  /*------------------------------------------------------------------------------*/
  .flow_in {
    padding: clamp(20px, 12.941px + 2.206vw, 35px);
  }

  #flow .title_01 {
    margin-bottom: clamp(40px, 21.176px + 5.882vw, 80px);
  }

  .flow_list {
    gap: 8vw calc((100% - 630px) / 2);
  }

  .flow_item .flow_img {
    margin-bottom: clamp(20px, 10.588px + 2.941vw, 40px);
  }

  .flow_item:not(:nth-of-type(3n)) .flow_img::after {
    right: calc(0px - (95vw - clamp(20px, 12.941px + 2.206vw, 35px) - 630px) / 4);
  }

  /*FAQ*/
  /*------------------------------------------------------------------------------*/
  #faq {
    margin-bottom: clamp(50px, 26.471px + 7.353vw, 100px);
  }

  #faq .faq_box p {
    padding: 0 10px 0 0;
  }

  /*contact*/
  /*------------------------------------------------------------------------------*/
  #contact {
    margin-bottom: clamp(30px, 11.176px + 5.882vw, 70px);
  }

  .contact_in {
    width: 95%;
  }

  #contact .tel_box .tel {
    margin-bottom: clamp(25px, 13.235px + 3.676vw, 50px);
  }

  /*footer*/
  /*------------------------------------------------------------------------------*/
  .f_nav {
    margin: clamp(25px, 8.529px + 5.147vw, 60px) auto;
  }


#fnavi{
display: flex;
justify-content: center;
font-size: 1em;
position: fixed;
bottom: 0;
left: 0;
right: 0;

margin: 0;
padding: 0;
}
#fnavi li{
text-align: center;
width: calc(100% / 3);
list-style: none;
margin: 0;
padding: 0;
}
#fnavi li a{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
padding: 3vw 1vw;
color: #fff;
}
#fnavi li a span{
font-size: 0.8em;
display: inline-block;
}
#fnavi li:nth-of-type(1) a{
background: #001f38;
}
#fnavi li:nth-of-type(2) a{
background: var(--primary-color);
}
#fnavi li:nth-of-type(3) a{
background: var(--secondly-color);
}


  
  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/


/* screens smaller than 768---------------------------------------------------------- */
@media only screen and (max-width:768px) {
  .pc_tb {
    display: none;
  }

  /*header*/
  /*------------------------------------------------------------------------------*/
  #header_in {
    height: 80px;
  }

  header .txt {
    display: none;
  }

  header .flex01 {
    height: 80px;
  }

  header #logo {
    width: 50%;
  }

  header .tel .txt,
  header .contact .txt {
    display: none;
  }

  header .tel,
  header .contact {
    width: 20vw;
    min-width: 60px;
    line-height: 56px;
    display: block;
    text-align: center;
  }

  header .tel {
    margin-right: 1vw;
  }

  header .tel .tel_icon {
    display: block;
    background: var(--primary-color);
    box-shadow: 0px 5px 0px 0px #632412;
    border-radius: 5px;
  }

  header .mail_icon {
    display: block;
  }

  header .mail_icon img {
    width: 38.4px;
    height: auto;
  }

  /*mv*/
  /*------------------------------------------------------------------------------*/
  #mv .txt_box {
    padding: clamp(50px, 10vw, 80px) 20px clamp(60px, 11vw, 90px);
  }

  #mv .btn_box {
    margin-top: 25px;
  }

  /*cta*/
  /*------------------------------------------------------------------------------*/
  .cta_in {
    padding: 5.86vw 5.21vw 5.21vw;
  }

  .cta_in .title {
    font-size: clamp(21px, 6.000px + 4.688vw, 42px);
    margin-bottom: clamp(20px, 12.857px + 2.232vw, 30px);
  }

  .cta_in .text {
    font-size: clamp(16px, 13.143px + 0.893vw, 20px);
    margin-bottom: clamp(16px, 13.143px + 0.893vw, 20px);
    text-wrap: balance;
  }
  .cta_in .text br {
    display: none;
  }
  
  .cta_in .tel{
font-size: 1em;
font-weight: bold;
margin: 0 0 1em 0 ;
}
.cta_in .tel span{
font-size: 1.5em;
}
.cta_in .tel a{
display: block;
  padding: 3vw;
  line-height: 1.5em;

  border-radius: 10px;
  background: #FFF;
  border: var(--primary-color) solid 2px;

    width: 100%;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.cta_in .tel br{
display: inline-block;
}


  .cta_box {
    gap: 3vw;
    flex-wrap: wrap;
  }

  .cta_box a {
  padding: 3vw;
    width: 100%;
    max-width: 540px;
	height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /*check*/
  /*------------------------------------------------------------------------------*/
  #check .sub_txt {
    margin-bottom: clamp(20px, 7vw, 60px);
  }

  #check .in {
    gap: 35px 4%;
  }

  #check .box {
    width: 48%;
  }

  #check .img_box {
    text-align: center;
  }

  /*reason*/
  /*------------------------------------------------------------------------------*/
  #reason .box {
    margin-top: clamp(30px, 7vw, 60px);
  }

  #reason .box.right .no {
    left: -15px;
    right: auto;
  }

  #reason .txt_box {
    width: 100%;
    margin-bottom: 25px;
  }

  #reason .img_box {
    width: 100%;
    justify-content: center;
  }

  /*voice*/
  /*------------------------------------------------------------------------------*/
  .voice_item {
    flex-wrap: wrap;
    gap: 10px;
  }

  .voice_img {
    width: 100%;
  }

  .voice_text {
    padding-top: 0;
  }


  /*flow*/
  /*------------------------------------------------------------------------------*/
  .flow_list {
    gap: 8vw calc((100% - 420px) / 2);
    justify-content: center;
  }

  .flow_item:not(:nth-of-type(3n)) .flow_img::after {
    content: none;
  }

  .flow_item:nth-of-type(2n+1) .flow_img::after {
    content: '';
    background: url(../image/arrow01.png);
    width: 22px;
    height: 18px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(0px - (95vw - clamp(20px, 12.941px + 2.206vw, 35px) - 420px) / 4) !important;
  }

  /*FAQ*/
  /*------------------------------------------------------------------------------*/
  #faq .question p {
    font-size: 18px;
  }

  #faq .question .sub {
    font-size: 22px;
    margin-right: 0.5em;
  }

  #faq .answer p {
    width: 100%;
    padding: 0;
  }

  #faq .answer .sub {
    font-size: 22px;
    margin-right: 0.5em;
  }

  /*contact*/
  /*------------------------------------------------------------------------------*/
  #contact .subtext {
    margin-bottom: 30px;
    text-align: left;
  }

  #mailform {
    gap: 20px;
  }

  #mailform .main {
    font-size: 18px;
  }

  #mailform textarea {
    height: 100px !important;
  }

  #mailform .list_box {
    gap: 1em;
  }

  #mailform .list_box label {
    width: 100%;
  }

  #mailform input[type="submit"] {
    width: 100%;
  }

  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/



/* screens smaller than 600---------------------------------------------------------- */
@media only screen and (max-width:599px) {

  /*header*/
  /*------------------------------------------------------------------------------*/
  header #g_nav {
    height: auto;
    gap: 0;
    text-align: center;
  }

  header #g_nav a {
    width: 50%;
    padding: 8px 5px;
  }

  header #g_nav a:nth-child(1),
  header #g_nav a:nth-child(2) {
    border-bottom: 1px solid #555;
  }

  header #g_nav a:nth-child(1),
  header #g_nav a:nth-child(3) {
    border-right: 1px solid #555;
  }

  /*catch*/
  /*------------------------------------------------------------------------------*/
  #catch .title {
    font-size: clamp(22px, 10.571px + 3.571vw, 32px);
  }

  #catch .title::before,
  #catch .title::after {
    width: 21px;
    height: 42px;
  }

  #catch .title br {
    display: inherit;
  }

  /*check*/
  /*------------------------------------------------------------------------------*/
  #check .box {
    width: 100%;
  }

  /*flow*/
  /*------------------------------------------------------------------------------*/
  .flow_list {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 60px;
  }

  .flow_item {
    position: relative;
  }

  .flow_item:nth-of-type(2n+1) .flow_img::after {
    content: none;
  }

  .flow_item:not(:last-of-type)::after {
    content: '';
    background: url(../image/arrow01.png);
    width: 22px;
    height: 18px;
    position: absolute;
    bottom: -47px;
    left: 50%;
    transform: rotate(90deg) translateX(-50%);
  }

  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/