@charset "UTF-8";
@import url("grid.css");
@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;
}


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; }


/* 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 120px;
}

.SP_Flex_container li.Flex {
    background-color: #a5a5a5;
    color: #fff;
    display: block;
    padding: 20px;
    margin: 10px auto;
    text-align: center;
    //border: 3px solid #cddc39;
    border: 3px solid #a5a5a5;
    //width: 50%;
}

@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;}
}

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

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;}

.jirei {
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.4em 1.5em;/*アイコン分のスペース*/
  margin: 0 0 15px 0;
  font-size: 2.4rem;
}

.jirei:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.6em;/*アイコンの位置*/
  color: #ff6a6a; /*アイコン色*/
}

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;}

p.circle-two {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1.4em;
    margin: 4rem 0 4rem 0;
    font-size: 2.1rem;
}

p.circle-two::before {
    position: absolute;
    top: 0.7em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: #70e2ef;
    box-shadow: 0.4em -0.4em 0 -1px #ffcdcd;
    content: "";
}

/*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;
}

@media screen and (max-width:768px){
    .ya {display:none;}
    .ya2 {
        width:60px;
        margin: 0 auto;
    }
    .item-list{display:block;}
    .span-6 img{margin:0 auto 0 auto ;}
    h3 {font-size: 2.0rem;}
    section p.toku {font-size: 1.4rem;}
    h2.title {font-size: 2.0rem;}
    p.circle-two {font-size:1.5rem;}
    .jirei {font-size:1.8rem;}
    h4 { font-size: 1.7rem; }
    div .span-4 p {font-size:1.4rem;}
}