@charset "UTF-8";
@import url("grid.css?1");
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}

.under {
    border-bottom: 0.4rem solid var(--base-color);
    padding:0 1rem 1rem 1rem;
}
.center {
    text-align: center;
    margin-bottom: 4rem;
}

.space-top50 {margin-top: 50px;}
.space-top30 {margin-top: 30px;}

h2.title {
  color: #364e96;/*文字色*/
  padding: 0.4em 0;/*上下の余白*/
  margin: 70px auto 40px auto;
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
  font-size: 3.0rem;
  width: 70%;
}

h4 { font-size: 2rem; margin-bottom: 0.5rem; }

/* ファーストビュー */
.main-title{margin: 1.2vh 1vw 2vh 2vw;}
.main-title p {
    font-size:2.3rem;
    font-weight: 700;
    color:#0A5A92;
}
.main-title p.right {
    text-align: right;
}
.main-desc {
    font-size:1.9rem;
    line-height:190%;
}

@media screen and (max-width:1000px){
    .main-desc {font-size:1.7rem;line-height:170%;}
}

/* CTA */
.item-list{
  display: flex ;
  justify-content: center; /* 中央寄せ */
  //border: double 5px #20aae2;
  border: solid 10px #9cc2e6;
  width: 65%;
  margin: 0 auto;
  background-color: #9cc2e6;
  padding:5px 0 0 0 ;
}
.item-list .item{box-sizing: border-box;}
.item{margin: 10px 10px 10px 10px;}

div.item span.item-text {
    font-size:  2.4rem;
    font-weight: bold;
    color:  #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 問い合わせ電話ボタン */

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  scroll-padding-top: 300px;
  scroll-behavior: smooth;
}

.btn,
a.btn,
button.btn {
  //font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn--orange {
  color: #fff;
  background-color: #10b2ec;
}

a.btn--orange:hover {
  color: #fff;
  background: #3c5c9c;
}

a.btn-c {
  //font-size: 2rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

@media screen and (max-width: 768px){
    .item-list{width: 90%;}
    div.item span.item-text {font-size:  1.8rem;}
    .btn-wrap-pc-sp {text-align:center;}
}


/*申し込みの流れ-------------------------------------*/

.SP_Flex_container{
    width: 100%;
    margin: 10px auto 50px;
}

.SP_Flex_container li.Flex {
    background-color: #a5a5a5;
    color: #fff;
    //display: block;
    //padding: 10px;
    margin: 10px auto;
    text-align: center;
    border: 3px solid #a5a5a5;
    width: 160px;
    height:70px;
    display: grid;
    place-items: center center;
    line-height: 120%;
}

@media screen and (min-width:768px){
    .SP_Flex_container{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .SP_Flex_container li.Flex{//width: 100%;}
    .ya2 {display:none;}
    .ya {width:60px;}
    h4.smh {display:none;}
    img.smguid {display:none;}
}

h3 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  color: #000080;
  font-size: 3.0rem;
  font-weight: bold;
  margin: 30px 0 20px 0;
}

h3:before, h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

h3:before {left:0;}
h3:after {right: 0;}

img.ai{
    position:absolute;
    top:-8px;
    left:10px;
    width:50px;
}

section p.toku {font-size: 1.9rem;}
div .span-4 p {margin: 0 0 40px 0;//font-size:1.5rem;}


/*Q&A-------------------------------------*/

#QandA-2 {
    width: 100%;
    //font-family: メイリオ;
}
#QandA-2 h3 {
    //font-size: 16px;
    margin-top: 32px;
}
#QandA-2 dl {
    border: 1px solid #ccc;
}
#QandA-2 dt {
font-weight: bold;
    color: #111;
    background: #f4f4f4; /* 「Q」タイトルの背景色 */
    padding: 8px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#QandA-2 dt:first-child {
    border-top: none;
}
#QandA-2 dt:before {
    content: "Q.";
    font-weight: bold;
    margin-right: 8px;
}
#QandA-2 dd {
    padding: 16px 16px 24px 30px;
    margin: 0;
    line-height: 140%;
}
#QandA-2 dd {
    color: #696969;
}

/*問い合わせ-------------------------------------*/

.note {
    max-width: 1000px;
    margin: 20px auto 0;
    font-size: 1.7rem;
    line-height: 2.1;
}

/*角丸-------------------------------------*/

.tab-all {
  /* 基本のスタイル */
  width: 90%;
  padding: 15px 0;
  margin: 20px auto 20px;
  border: solid #015a9c;
  font-size: 1.8rem;
  color: #fff;
  background-color:#015a9c;
  text-align: center;

  /* 角丸のスタイル */
  border-radius: 8px;
}

/*見出し付きボックス flex-------------------------------------*/

.shisetsu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 30px auto;
}

.sitem1 {
    width: 20%;
    //margin-bottom: 30px;
    //padding: 50px 10px;
    text-align: center;
}

.sitem2 {
    width:80%;
    font-size: 2.2rem;
    font-weight: bolder;
    padding-top: 10px;
}

.sitem1 img{
    vertical-align: middle;
    width:165px;
    height:121px;
}

.description {
    margin:30px 5px 15px;
    font-size:2rem;
}

.span-3 p {
    text-align: center;
    font-size:1.8rem;
    padding-bottom: 5px;
}

@media screen and (max-width:768px){
    .ya  {display:none;}
    .ya2 {width:60px;margin: 0 auto;}

    .main-title p {font-size:1.7rem;}
    .main-title   {margin-bottom: 20px;}
    .main-desc    {font-size:1.3rem;line-height:150%;}

    .item-list     {display:block;}
    img.pcguid     {display:none;}
    .span-6 img    {margin:0 auto 0 auto ;}
    h3             {font-size: 1.8rem;}
    section p.toku {font-size: 1.5rem;margin-bottom:25px;}
    h2.title       {font-size: 2.0rem;}
    .box h4        {font-size: 1.5rem; }
    div .span-4 p  {font-size:1.4rem;}
    .tab-all       {font-size: 1.5rem;margin: 0 auto 20px;} 

    h4.pch       {display: none;}
    h4.smh       {font-size: 18px;}
    .fbox h4     {font-size: 18px;}
    span.sankou  {font-size:1.1rem;}
    .description {font-size:1.3rem;}
    .span-3 p    {font-size:1.4rem;}

    .SP_Flex_container li.Flex{font-size: 15px;}
    img.child {
        position: absolute;
        top: -32px;
        right: 15px;
        width: 71px;
        height:92px;
    }
    .sitem {
        width:25%;
        margin: 0;
        padding:0;
    }
    .sitem2 {
        width:75%;
        font-size:1.3rem;
        padding-top: 0px;
    }
    .sitem1 img{
        width:103px;
        height:75.5px;
        padding-top: 5px;
    }
    .span-3 {
        width:60%;
        margin: 0 auto 30px;
        text-align:center;
    }
}