@charset "utf-8";

@import "https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,600,700,900|Roboto&display=swap";


/* =========================================================== */
/*  grid.css                                                    */
/* =========================================================== */

/* =========================================================== */
/*  grid
    .gred       基本 SP時縦並び した余白あり
    .gred-sl    SP時 縦並び 下余白なし
    .gred-r     SP時 縦並び 下余白あり PC時逆順
    .gred-kp    SP時 横並びを維持                              */
/* =========================================================== */

[class *='grid'] { width:100%; display:flex; }
[class *='grid'].md { align-items:center; }
[class *='grid'] > [class *='col-']:not(:last-child) { margin-right:2%; }

[class *='grid'] .col-1  { width: 6.5%; }
[class *='grid'] .col-2  { width:15.0%; }
[class *='grid'] .col-3  { width:23.5%; }
[class *='grid'] .col-4  { width:32.0%; }
[class *='grid'] .col-5  { width:40.5%; }
[class *='grid'] .col-6  { width:49.0%; }
[class *='grid'] .col-7  { width:57.5%; }
[class *='grid'] .col-8  { width:66.0%; }
[class *='grid'] .col-9  { width:74.5%; }
[class *='grid'] .col-10 { width:83.0%; }
[class *='grid'] .col-11 { width:91.5%; }

/* PCで逆順 */
.grid-r { flex-direction:row-reverse; }
.grid-r > [class *='col-']                  { margin-right:0 !important; }
.grid-r > [class *='col-']:not(:last-child) { margin-left:2%; }

/* =========================================================== */
/*  responsive                                                 */
/* =========================================================== */

@media only screen and (max-width:640px) {
  /* SP時 横並び */
  .grid-kp { flex-direction:row; }

  /* SP時 縦並び */
  .grid, .grid-sl, .grid-r { flex-direction:column; }
  .grid > [class *='col-'],
  .grid-sl > [class *='col-'],
  .grid-r > [class *='col-'] { width:100%; margin-right:0 !important; margin-left:0 !important; }
  .grid > [class *='col-'],
  .grid-r > [class *='col-'] { margin-bottom:1.5em !important; }
  .grid-sl > [class *='col-']{ margin-bottom:0 !important; } 
}



/* =========================================================== */
/*  mod.css                                                    */
/* =========================================================== */

/* 共通
-------------------------------------------------------------- */
[class ^= 'wrap-'].c, section.c, [class *= 'section'].c { text-align:center; }
.wrap-01 { background-color:#fff !important; }
/*
.wrap-inner { margin:0 auto; width:1000px !important; }
*/

/* 文字装飾 */
.pgh-emp-03 { font-size:130%; }

/* 改行 */
.pgh-br-pc { display:block !important; }
.pgh-br-sp { display:none !important; }

/* btn
-------------------------------------------------------------- */
/* 共通 */
[class *='btn-'].lg { width:45%; min-width:280px; }

/* 基本のボタン */
[class *='btn-0']        { padding:.8em 1.6em; font-weight:bold; border-radius:500px; -webkit-border-radius:500px; -moz-border-radius:500px; }
[class *='btn-0']:before { content:"\f054"; font-size:80%; margin-right:.5em; }

/* ボタン オフ */
[class *='btn-0'].off, [class *='btn-0'].off:before {opacity:0.4 !important; pointer-events: none;}

/* other
-------------------------------------------------------------- */
.pc { display:block !important; }
.sp { display:none !important; }


/* =========================================================== */
/*  responsive                                                 */
/* =========================================================== */
@media only screen and (max-width:1000px) {
  /*
  .wrap-inner    { width:90% !important; }
  */
}

@media only screen and (max-width:768px) {
  .pgh-br-pc { display:none !important; }
}

@media only screen and (max-width:640px) {
  .pgh-br-sp { display:block !important; }
  .pc { display:none !important; }
  .sp { display:block !important; }	
}


/* =========================================================== */
/*  asset補正                                                  */
/* =========================================================== */

main {line-height:1.780; color:#3c3a3a;background:#F1F3F4;font-size: 1.25rem; }
main .breadcrumbs-wrap{font-size: 1rem;}

h1 { margin-bottom:.5em; font-size: 3rem; font-weight:600; text-align:left; }
h2 { margin-bottom:2em; font-size:2rem; font-weight:bold;}
h2:before { content:"＼"; font-size:90%; }
h2:after  { content:"／"; font-size:90%; }
h3 { margin-bottom:.5em; font-size:150%; font-weight:bold; }

sup { font-size:60% !important; }

[class ^= 'wrap-0'] { padding:60px 0; }

.btn-02 { font-size:1.375rem; }
.list-a01 { font-size:80%; }
.list-a02 { font-size:80%; }

/* =========================================================== */
/*  固有                                                       */
/* =========================================================== */

.btn-cv{
  background-color: transparent;
}

.btn-cv a { margin-bottom:.5em !important; border-radius:500px; -webkit-border-radius:500px; -moz-border-radius:500px; }
.btn-cv .link-arr-01{text-decoration: underline;}
.btn-cv span { display:block; font-size:1rem;}
.chg .btn-cv { position:fixed; left:0; bottom:0; width:100%; font-size:1.5rem; margin:0; padding:1em 0; text-align:center; background-color:rgba(255,255,255,.8); box-shadow:0px -3px 4px -4px #999; z-index:10; }
.chg .btn-cv span{padding:0%;display:block;}
.chg .btn-cv a { margin:0; }
.chg .btn-cv .link-arr-01{padding-bottom:6em;}
.end .btn-cv { display:none; }

#btn-under span { display:block; font-size:1rem;}

#topv { padding:65px 0 0; background-size:cover; background-image: radial-gradient( circle 343px at 46.3% 47.5%,  rgba(242,242,242,0.5) 0%, rgba(241,241,241,0.5) 72.9% ),url(../images/fv.webp); }
#topv .grid{ margin-bottom: 0 !important; }
#topv .col-7{ padding-top:2%;  }
#topv .col-5{ align-self: end;  }
#topv .title { font-size: 3.125rem;font-weight:600; line-height:1.61}
#topv .title span {color:#ff543e; }
#topv .top_sp { margin: 0 auto;}
#topv sup a {color:#ff543e;}


#point { border-bottom:solid 1px #DEE1E6; }
#point [class *= "col"] { padding:2em 1.4em; border:2px solid #535353; } 
#anx { font-size:105%; border-bottom:solid 1px #DEE1E6;}
#anx .balloon {width: 100%;margin: 1.5em 0;overflow: hidden;}
#anx .balloon .icon {float: left;width: 100px;}
#anx .balloon .icon img{height: auto;border: solid 1px #535353;border-radius: 50%; background: #fff;}
#anx .balloon .comments {margin-left: 130px;}
#anx .balloons{margin:0 0 2em 15%; }
#anx .says {display: inline-block;position: relative;margin: 20px 0 0 0px;padding: 17px 20px;border-radius: 12px;background: #BABCBE;font-size: 105%;}
#anx .says:after {content: "";display: inline-block;position: absolute;top: 18px; left: -24px;border: 12px solid transparent;border-right: 12px solid #BABCBE;}
#anx .says p {margin: 0;padding: 0;}
#anx .box-p01{ font-size:130%; text-align:center;}
#anx strong { font-size:120%; padding:0 .1em; background:linear-gradient(transparent 75%, #ff543e 75%); }

#comment { padding: 20px 0 10px !important; }

#know { border-bottom:solid 1px #DEE1E6; }
#know .grid, #know .col-6 { margin-bottom: 0 !important; }

#know strong { font-size:120%; padding:0 .1em; background:linear-gradient(transparent 75%, #ff543e 75%);color: #202124; }
#know p { font-size:135%;}
#know [class *= "box"] p { font-size:100%; }
#know .before { background-color:rgba(255,255,255,.6) }
#know .arrow       { position:relative; padding-bottom:4em; }
#know .arrow:after { position:absolute; display:block; width:100%; bottom:0; text-align:center; content:url(../images/flow_arrow_01.webp); }
#know .merit-box {padding: 2.5em 2em;margin: 0 0 2em;background: #fff;border-top: solid 10px #535353;font-size: 120%;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);}
#know .merit-box p {margin: 0; padding: 0;}
#know .merit-title{animation: bound .8s ease-in;color: #202124;}
@keyframes bound {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px) scaleY(0.5);
  }
}
#flow { margin-top: 0; border-bottom:solid 1px #DEE1E6;}
#flow .col-6{margin-bottom: 2em;}
#flow .col-6{border:2px solid #535353;border-radius:30px;padding:2em 2.4em;}
#flow [class *= "flow-"] {position:relative; }
#flow [class *= "flow-"]:before { display:inline-block; position:absolute; width:50px; height:50px; top:-50px; left:-50px; text-align:center; color:#fff; background-color:#535353; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }
#flow h3{ text-align: left; }
#flow .flow-01:before { content:url(../images/numw_1.svg); padding:8px 16px; }
#flow .flow-02:before { content:url(../images/numw_2.svg); padding:8px 14px; }
#flow .flow-03:before { content:url(../images/numw_3.svg); padding:8px 14px; }
#flow .flow-04:before { content:url(../images/numw_4.svg); padding:10px 16px 0  12px; }
#flow .list-a01 { margin-bottom:0 !important; font-weight:normal; }

#qa {border-bottom:solid 1px #DEE1E6;}
#qa .box-p01{background: #DEE1E6;}
#qa .q { position:relative; display:block; padding-right:2em; font-size:110%; font-weight:bold; cursor:pointer; }
#qa .q:before { content:"\f078"; font-size:80%; margin-right:.5em; position:absolute; right:0; top:5%; }
#qa .a { display:none; padding-top:1em; }

#att { padding-bottom:20px; }
#att .section{ margin-bottom:0; }
#att .btn-02 { margin-bottom:.5em;}
#att .btn-02 a:link, a:active, a:visited { color:#535353;}

/*メンテナンスなどのお知らせ用枠　*/
#info p{font-size: 90%; }

/* グローバルナビ */
#quick .gnavi-sub,
#quick .headerNav-btns .login,
#quick #globalNav .gnavi-direct,
#quick #globalNav .gnavi-shop,
#quick #globalNav .gnavi-sp a[href="https://my.sbiaruhi.co.jp/startlogin"] {
  display: none;
}

/* =========================================================== */
/*  responsive                                                 */
/* =========================================================== */

@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

@media only screen and (max-width:1000px) {
	#anx .balloons{margin:0 0 4em 0;}
  #topv .title { font-size: 2.4rem; }
  #topv .title span {font-size: 2.4rem; }
  #topv h1 {font-size: 2.4rem; }
  #topv .col-7 { padding-left: 5%; }
}

@media only screen and (max-width:960px) {
  .nav-2110 .grid > [class *='col-']{ margin-bottom:0 !important; }
  [class*="grid"] {
    display: block;
  }
  .nav-2110 #globalNav .gnavi-sp-login{
    display: none;
  }
}

@media only screen and (max-width:768px) {
  main {font-size: 1rem; }
  #topv .title { font-size: 1.9rem; }
  #topv .title span {font-size: 1.9rem; }
  #topv h1 {font-size: 1.9rem; }
}

@media only screen and (max-width:640px) {
  [class ^= 'wrap-0']{ padding:40px 0; }

  .chg .btn-cv span{ display:inline;}
  .chg .btn-cv a {margin: 0; }	

  h2 { margin-bottom:1.5em; font-size:1.75rem;}
  #topv { padding:40px 0; text-align: center; background-position: 40% center ;background-image: radial-gradient( circle 343px at 46.3% 47.5%,  rgba(242,242,242,0.7) 0%, rgba(241,241,241,0.7) 72.9% ),url(../images/fv.webp) ;}	
  #topv .title { font-size: 1.8rem;font-weight:700; }
  #topv .title span {font-size: 1.8rem; color:#ff543e; }
  #topv .img-wd-02 { width:70%; }
  #topv .img-wd-03 { width:58%; }
  #topv .top_sp { margin: 0 auto; position: relative;}
  #topv .top_sp img {padding-bottom: .8rem;filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.4));}
  #topv .unne {position: absolute;top: 0; right:0px;}
  #topv h1 {font-size: 1.8rem;font-weight:700; text-align:center; }
  .sp_topv {padding: 0 5%; }
  .sp_topv .btn-02{margin: 0;}
  .btn-cv span { display:inline;}
  .btn-02 { font-size:1.1rem; }

  #know p { font-size:125%;}	

  #anx .balloon .icon { width:80px; }
  #anx .balloon .comments {margin-left: 100px;}
  #anx .says {margin:0px; }
  #anx .box-p01{ font-size:120%; text-align:center;}

  #flow [class *= "flow-"]:before { display:inline-block; position:absolute; width:40px; height:40px; top:-40px; left:-40px; text-align:center; }
  #flow .flow-01:before { content:url(../images/numw_1.svg); padding:2px 10px; }
  #flow .flow-02:before { content:url(../images/numw_2.svg); padding:2px 8px; }
  #flow .flow-03:before { content:url(../images/numw_3.svg); padding:2px 8px; }
  #flow .flow-04:before { content:url(../images/numw_4.svg); padding:4px 10px 0 8px; }

  #point{
    padding-top: 40px;
  }
}

@media only screen and (max-width:375px) {
  #topv .img-wd-02 { width:60%; }
  #topv .img-wd-03 { width:42.5%; }
  #topv .title { font-size: 1.6rem;}
  #topv .title span {font-size: 1.7rem; }
  #topv h1 {font-size: 1.7rem;}
}