@charset "utf-8";

/*ブレイクポイント基本*/

/* TB
====================================== */
@media screen and (min-width: 800px) {

}/*TB*/

/* PC
====================================== */
@media screen and (min-width: 1100px) {

}/*PC*/



/*基本設定
---------------------------------------*/

html {
  font-size: 62.5%;/* 標準の文字サイズを10pxに設定 */
  scroll-behavior: smooth;

}

body {
  color: #000;
  font-size: 1.5rem;
  line-height: 1.5;
  font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-text-size-adjust: 100%;/* フォントサイズ自動調整OFF */
}

/*画像の自動リサイズ
---------------------------------------*/
img {
  max-width: 100%;
  height: auto;
}

/*SP/PC表示切り替え
---------------------------------------*/
.is-sp { display: block !important; }
.is-pc { display: none  !important; }

@media screen and (min-width: 800px) {
.is-sp { display: none  !important; }
.is-pc { display: block !important; }
}

/*リンク
---------------------------------------*/
a:link    {color: #006ec3;text-decoration: underline;}
a:visited {color: #006ec3;text-decoration: underline;}
a:hover   {color: #f06428;text-decoration: underline;}
a:active  {color: #f06428;text-decoration: underline;}


/*構造
---------------------------------------*/

#wrapper {}


/* ###################################################################### */
/* ヘッダー */
/* ###################################################################### */


header {
  background: #fefefe;
}
.header_inner {
  display: flex;
  justify-content: space-between;
}
header #logo {
  display: flex;
  margin-left: 20px;
  align-items: center;
  justify-content:  flex-start;
}
header #logo p {
  line-height: 1.2;
  font-size: 1.1rem;
}
header #logo a img{
  display: block;
  width: 120px;
  margin-right: 20px;
}
.header_sp_tel a {
  width: 60px;
  height: 60px;
  padding: 10px;
  display: block;
  background-color: #006ec3;
}

/* PC
====================================== */
@media screen and (min-width: 800px) {
.header_inner {
  padding: 0;
  height: 70px;
}
header #logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0px;
}
header #logo p {
  text-align: left;
  margin-top: 3px;
  margin: 0 20px;
}
header #logo a img{
  width: 220px;
}
.header_pc_tel {
  display: block;
  text-align: center;
  color: #fff;
  color: #ffffff;
  width: 300px;
  background-color: #006ec3;
}
.header_pc_tel span{
  display: block;
  font-size: 1.4rem;
}
.header_pc_tel span.number{
  font-size: 2rem;
  padding-top: 10px;
}
}/* PC */



/* ###################################################################### */
/* フッター */
/* ###################################################################### */

footer {
  padding: 60px 20px;
  background: #f0f0f0;
  text-align: center;
}
footer .logo{
  width: 200px;
  margin: 0 auto;
}










/* ###################################################################### */
/* 表紙 */
/* ###################################################################### */

.cover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding:  100px 20px;
  background: url(../img/cover_bg_sp.jpg)  50% 50% no-repeat #006ec3;
  background-size: cover;
}
/* PC
====================================== */
@media screen and (min-width: 800px) {
.cover {
  display: block;
  height: auto;
  padding: 80px 0;
  background: url(../img/cover_bg_pc.jpg)  50% 50% no-repeat #006ec3;
  background-size: cover;
}
.cover_inner {
  max-width: 1100px;
  padding: 0 20px;
  margin: 0 auto;
}
.cover_inner img{
  width: 560px;
}
}/* PC */


/* ###################################################################### */
/* ナビゲーション */
/* ###################################################################### */


.section_nav {
  padding: 30px 20px;
}
.section_nav li {
  display: inline-block;
}
.section_nav li + li::before {
  content: "－";
  color: #000;
  padding: 0 10px;
}
.section_nav li a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
.section_nav li a:hover {
  text-decoration: underline;
}
/* PC
====================================== */
@media screen and (min-width: 800px) {
.navigation {
  text-align: left;
  max-width: 1100px;
  margin: 0 auto;
}
}/* PC */




/* ###################################################################### */
/* 事業紹介 */
/* ###################################################################### */


#about {
  margin-bottom: 80px;
}
.about_text {
  padding: 0 20px;
}
.about_label {
  font-weight: bold;
  color: #006ec3;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
}
.about_ttl {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 20px;
}
.about_body p {
  line-height: 2.0;
  margin-bottom: 1.5em;
}
.about_link {
  display: block;
  font-weight: bold;
  color: #006ec3;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none; 
}
/* PC
====================================== */
@media screen and (min-width: 800px) {
#about {
  max-width: 1300px;
  margin: 0 auto;
  background: url(../img/about_bg_pc.jpg) 100% 50% no-repeat ;
  background-size: auto 100% ; 
  margin-bottom: 80px;
}
.about_text {
  max-width: 1100px;
  padding: 40px 20px;
  margin: 0 auto;
}
.about_ttl {
  font-size: 4.5rem;
  margin-bottom: 0px;
}
.about_body p {
  padding: 40px 40px 40px 0;
  background: #fff;
  max-width: 500px;
  border-radius: 0 30px 20px 0;
}

}/* PC */










/* ###################################################################### */
/* 店舗 */
/* ###################################################################### */


#stores {
  max-width: 1100px;
  padding: 0 20px;
  margin: 0 auto 80px;
}

/*リスト*/
.shop_list li {
  margin-bottom: 40px;
}
.shop_list li .img{
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.shop_list li .img img {
  width: 100%;
}
.shop_list li h3{
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.shop_list li p{
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 5px;
}
a.map_btn {
  display: inline-block;
  text-decoration: none;
  padding: 12px 40px;
  text-indent: 30px;
  border: 1px solid #006ec3;
  border-radius: 99px;
  background:  url(../img/icon-map-pin.svg) 30px 50% no-repeat;
  background-size: 2rem;
}
a.map_btn:hover {
  border: 1px solid #f06428;
  background:  url(../img/icon-map-pin-hover.svg) 30px 50% no-repeat;
  background-size: 2rem;
}
/* PC
====================================== */
@media screen and (min-width: 800px) {
.shop_list  {
  display: grid;
  grid-template-columns:  1fr 1fr 1fr;
  gap: 40px;
}
.shop_list li {
  margin-bottom: 0px;
}
.shop_list li .img{
  margin-bottom: 15px;
}
.shop_list li h3{
  font-size: 1.8rem;
  margin-bottom: 5px;
}
.shop_list li p{
  font-size: 1.5rem;
  margin-bottom: 5px;
}

/* リスト（大）※is_large クラス付与で拡張※ */
.shop_list.is_large {
  display: block;
}
.shop_list.is_large li{
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.shop_list.is_large .img{
  flex: 1;
  margin: 0 40px 0 0 ;
}
.shop_list.is_large .txt{
  flex: 2;
}
.shop_list.is_large li h3{
  font-size: 2.2rem;
  margin-bottom: 10px;
}
.shop_list.is_large li p{
  font-size: 1.8rem;
  margin-bottom: 10px;
}
}/* PC */





/* ###################################################################### */
/* 利用案内 */
/* ###################################################################### */


#guide {
  max-width: 1100px;
  padding: 0 20px;
  margin: 0 auto 80px;
}
.guide_list li {
  padding: 40px 30px;
  border: 1px solid #006ec3;
  border-radius: 15px;
  margin-bottom: 20px;
}
.guide_list h4 {
  display: flex;
  align-items: center;
  color: #006ec3;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 20px;
}
.guide_list h4 img{
  width: 40px;
  margin-right: 15px;
}
/* PC
====================================== */
@media screen and (min-width: 800px) {
.guide_list  {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.guide_list li {
  padding: 30px;
  margin-bottom: 0;
}
.guide_list h4 {
  font-size: 1.8rem;
  margin-bottom: 25px;
}
}/* PC */

/*コールセンター*/
.callcenter {
  padding: 40px 30px;
  border: 1px solid #006ec3;
  border-radius: 15px;
  margin-bottom: 20px;
  background: #f9fdff;
}
.callcenter .title{
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-bottom: 20px;
}
.callcenter .title img{
  width: 60px;
  margin-right: 15px;
}
.callcenter .title span {
  display: block;
  font-size: 1.3rem;
  margin-top: 5px;
  font-weight: bold;
  color: #006ec3;
  letter-spacing: 0.15em;
  line-height: 1;
  margin-bottom: 5px;
}
.callcenter .title h4 {
  font-weight: bold;
  color: #006ec3;
  font-size: 2.5rem;
  line-height: 1.2;
}
.callcenter p{
  margin-bottom: 30px;
}
.callcenter .btn_tel a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  padding: 15px 30px;
  font-size: 2rem;
  border-radius: 99px;
  background: #006ec3;
}
.callcenter .btn_tel a:hover {
  background: #f06428;
}
/* PC */
@media screen and (min-width: 800px) {
.callcenter {
  padding: 40px ;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.callcenter p{
  margin-bottom: 0px;
}
.callcenter .btn_tel a {
  width: 400px;
}
}/* PC */
































/* ###################################################################### */
/* 共通 */
/* ###################################################################### */




.section_ttl_label  {
  margin-bottom: 40px;
}
.section_ttl_label span {
  font-weight: bold;
  font-size: 1.5rem;
  color: #006ec3;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}
.section_ttl_label h2{
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 30px;
}
/* PC */
@media screen and (min-width: 800px) {
.section_ttl_label  {
  margin-bottom: 60px;
}
}/* PC */



/*調整用クラス
---------------------------------------*/



/*マージン*/
.mt5 {margin-top: 5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}
.mt60{margin-top:60px !important;}
.mt70{margin-top:70px !important;}
.mt80{margin-top:80px !important;}
.mt90{margin-top:90px !important;}
.mt100{margin-top:100px !important;}

.mb5 {margin-bottom: 5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb70{margin-bottom:70px !important;}
.mb80{margin-bottom:80px !important;}
.mb90{margin-bottom:90px !important;}
.mb100{margin-bottom:100px !important;}
.mb150{margin-bottom:150px !important;}
.mb200{margin-bottom:200px !important;}

.ml5 {margin-left: 5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}
.ml30{margin-left:30px !important;}
.ml35{margin-left:35px !important;}
.ml40{margin-left:40px !important;}
.ml45{margin-left:45px !important;}
.ml50{margin-left:50px !important;}

.mr5{margin-right: 5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mr35{margin-right:35px !important;}
.mr40{margin-right:40px !important;}
.mr45{margin-right:45px !important;}
.mr50{margin-right:50px !important;}

.noMg{margin:0 !important;}

/*左右マージン*/
.inr5 {padding:0  5px;}
.inr10{padding:0 10px;}
.inr15{padding:0 15px;}
.inr20{padding:0 20px;}
.inr25{padding:0 25px;}
.inr30{padding:0 30px;}
.inr35{padding:0 35px;}
.inr40{padding:0 40px;}
.inr45{padding:0 45px;}
.inr50{padding:0 50px;}

/*フロート*/
.float-l{float:left;}
.float-r{float:right;}

/*アライン*/
.align-c{text-align: center !important;}
.align-l{text-align: left   !important;}
.align-r{text-align: right  !important;}

/*フォントサイズ（相対）*/
big   {font-size:1.2em}
small {font-size:0.8em;}

/*フォントサイズ（絶対）*/
.fs-10 {font-size:1.0rem}
.fs-11 {font-size:1.1rem}
.fs-12 {font-size:1.2rem}
.fs-13 {font-size:1.3rem}
.fs-14 {font-size:1.4rem}
.fs-15 {font-size:1.5rem}
.fs-16 {font-size:1.6rem}
.fs-17 {font-size:1.7rem}
.fs-18 {font-size:1.8rem}
.fs-19 {font-size:1.9rem}
.fs-20 {font-size:2.0rem}
.fs-21 {font-size:2.1rem}
.fs-22 {font-size:2.2rem}
.fs-23 {font-size:2.3rem}
.fs-24 {font-size:2.4rem}
.fs-25 {font-size:2.5rem}
.fs-26 {font-size:2.6rem}
.fs-27 {font-size:2.7rem}
.fs-28 {font-size:2.8rem}
.fs-29 {font-size:2.9rem}
.fs-30 {font-size:3.0rem}
.fs-35 {font-size:3.5rem}
.fs-40 {font-size:4.0rem}
.fs-45 {font-size:4.5rem}
.fs-50 {font-size:5.0rem}

/*フォントサイズ（絶対）※ハイフンなし！*/
.fs10 {font-size:1.0rem}
.fs11 {font-size:1.1rem}
.fs12 {font-size:1.2rem}
.fs13 {font-size:1.3rem}
.fs14 {font-size:1.4rem}
.fs15 {font-size:1.5rem}
.fs16 {font-size:1.6rem}
.fs17 {font-size:1.7rem}
.fs18 {font-size:1.8rem}
.fs19 {font-size:1.9rem}
.fs20 {font-size:2.0rem}
.fs21 {font-size:2.1rem}
.fs22 {font-size:2.2rem}
.fs23 {font-size:2.3rem}
.fs24 {font-size:2.4rem}
.fs25 {font-size:2.5rem}
.fs26 {font-size:2.6rem}
.fs27 {font-size:2.7rem}
.fs28 {font-size:2.8rem}
.fs29 {font-size:2.9rem}
.fs30 {font-size:3.0rem}
.fs35 {font-size:3.5rem}
.fs40 {font-size:4.0rem}
.fs45 {font-size:4.5rem}
.fs50 {font-size:5.0rem}

/*画像透過*/
a.imgHover:hover{
  opacity:0.7;
  transition: opacity 0.5s ease;
}

/*回りこみ解除禁止（簡易crearfix）*/
.ovh{overflow:hidden;}

/*boeder*/
hr.border{
  clear:both;
  padding:0;
  margin: 0;
  display:block;
  height:1px;
  border:0;   
  border-top:.99px solid #ddd;
}

/*boeder-黒*/
hr.border_bk{
  clear:both;
  padding:0;
  margin: 0;
  display:block;
  height:1px;
  border:0;   
  border-top:.99px solid #000;
}

/*テキスト強調*/
em {
}
strong {
}