@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');
@import url("font-awesome.min.css");

body {
    margin: 0px;
    padding: 0px;
    color: #333;    /*全体の文字色*/
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;   /*フォント種類*/
    font-size: 16px;    /*文字サイズ*/
    line-height: 1.6em;     /*行間*/
    background: #fff;   /*背景色*/
    -webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}
video,audio {max-width: 100%;}
a {text-decoration: none;}
blockquote {margin-top: 40px !important; margin-bottom: 50px !important;}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display:inline-block;
}
* html .clearfix {
    height:1%;
    /*\*//*/
    height: auto;
    overflow: hidden;
    /**/
}
* html .clearfix { /* IE6にのみ適用 */
    height:1%;
}
*+html .clearfix { /* IE7にのみ適用 */
    display:inline-block;
}
.clearfix {
    display:block;
}


.pc_b {display: none;}
.pc_i {display: none;}

.sp_b {display: block;}
.sp_i {display: inline;}

@media screen and (min-width: 960px) {
    /* 960px以上に適用されるCSS（PC用） */
    .pc_b {display: block;}
    .pc_i {display: inline;}

    .sp_b {display: none;}
    .sp_i {display: none;}

    .wm760 {max-width: 760px; margin: 0 auto;}
}


/*----------------------------
* メニュー開閉ボタン
*----------------------------*/
.menu-btn{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 5;
  width: 70px;
  height: 70px;
  background: #595959;
  border: none !important;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  width: 33px;
  height: 1.5px;
  background: #fff;
  position: absolute;
  left: 18px;
  transition: all 0.5s ease;
}
.bar1 {
  top: 22px;
}
.bar2 {
  top: 33px;
}
.bar3 {
  bottom: 22px;
}

/*
  ハンバーガーメニューがクリックされたら
  上の線を真ん中に移動させて45℃回転
*/
.bar1.open {
  top: 34px;
  transform: rotate(45deg);
  background: #333;
}
/*
  ハンバーガーメニューがクリックされたら
  真ん中の線は透明化して見えないようにする
*/
.bar2.open {
  opacity: 0;
  background: #333;
}
/*
  ハンバーガーメニューがクリックされたら
  下の線は真ん中に移動させて-45℃回転
*/
.bar3.open {
  top: 34px;
  transform: rotate(-45deg);
  background: #333;
}
/*
  ハンバーガーメニューがクリックされたら
  メニューボタンの色を変更
*/
.menu-btn.open{
  background: #bca475;
}

/*
  WEB予約ボタン
*/
.reserve-btn {
  position: fixed;
  top: 0;
  right: 70px;
  z-index: 5;
  width: 100px;
  height: 70px;
  background: #BCA475;
  border: none !important;
  cursor: pointer;
}
.reserve-btn h2 {
    font-size: 14px;
    font-weight: normal !important;
    color: #fff;
    font-family:"Noto Serif Display", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
    line-height: 1em;
}
.reserve-btn h2 span {
    font-size: 14px;
    color: #fff;
    font-family:"Shippori Mincho B1", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
}
.reserve-btn.open {
  display: none;
  background: #333;
}

@media screen and (min-width: 960px) {
    /* 960px以上に適用されるCSS（PC用） */
    .reserve-btn {
      right: 0;
      width: 180px;
      height: 80px;
    }

    .reserve-btn h2 {
      font-size: 18px;
    }
}


/*----------------------------
* メニュー本体
*----------------------------*/
.menu{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
}
.menu h2 {
  position: fixed;
  top: 0;
  left: 0;
  padding: 15px 37px 30px;
  box-sizing: border-box;
}
.menu h2 img {
    width: 100%;
    max-width: 100px;
    cursor: pointer;
}
.menu__item_top {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 30px 0 20px;
  border-bottom: solid 1px #e6dfd5;
  font-size: 14px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.menu__item {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 20px 0;
  border-bottom: solid 2px #e6dfd5;
  font-size: 14px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.menu__item_none {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 20px 0;
  border-bottom: none !important;
  font-size: 14px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.menu__reserve {
  display: block;
  width: 80%;
  height: auto;
  margin: 20px auto 0;
  padding: 20px 0;
  font-size: 14px;
  text-align: center;
  color: #000;
  cursor: pointer;
  background-color: #bca475;
}

.menu__item_top,
.menu__item,
.menu__item_none,
.menu__reserve {
    font-family:"Shippori Mincho B1", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
}
.menu__item_top span,
.menu__item span,
.menu__item_none span,
.menu__reserve span {
    font-family:"Noto Serif Display", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
    font-size: 26px;
    font-weight: normal !important;
}

@media screen and (min-width: 960px) {
    /* 960px以上に適用されるCSS（PC用） */
    .pc_menu {
        position: fixed;
        top: 0;
        right: 180px;
        z-index: 5;
        width: 330px;
    }
    .pc_menu .pc_head_a {
        display: inline-block;
        float: left;
        font-family:"Noto Serif Display", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
        font-size: 22px;
        color: #333;
        margin-top: 30px;
        padding: 0;
    }
}


/*----------------------------
* アニメーション部分
*----------------------------*/

/* アニメーション前のメニューの状態 */
.menu{
  transform: translateX(100vw);
  transition: all .3s linear;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
  transform: translateX(0);
}

/*----------------------------
* メニュー内アコーディオン
*----------------------------*/
.accordion1 {text-align: center;}
.accordion1 .inner {display: none;}
.accordion1 div{position:relative; cursor: pointer; padding: 10px;}
.accordion1 div p{display: inline-block;}
.accordion1 .inner a{
  display:inline-block;
  width:100%;
  padding: 10px 0;
  background: #333;
  border-bottom:solid 1px #999;
  color: #fff !important;
}
.accordion1 .inner li:last-child a{
  border: none !important;
}
.accordion1 p:after {
  content: "";
  position: absolute;
  right: 25%;
  top: 15%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 14px;
  height: 14px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.accordion1 p.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 25%;
}

@media screen and (min-width: 960px) {
    /* 960px以上に適用されるCSS（PC用） */
    .pc_menu .accordion1 {
        display: inline-block;
        float: left;
        width: auto;
        margin: 30px 0 0;
        padding: 0;
        border: none;
    }
    .pc_menu .accordion1 div {
        padding: 0 30px;
    }
    .pc_menu .accordion1 p:after,
    .pc_menu .accordion1 p.open:after {
        display: none;
    }
    .pc_menu .accordion1 span {
        color: #333;
        font-size: 22px;
    }
    .pc_menu .inner li {
        font-family:"Noto Serif Display", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
        color: #333;
        padding: 0;
    }
    .pc_menu .inner a {
        padding: 15px 0;
    }
}





/*----------------------------
* スライドショー
*----------------------------*/

.slider {
    position:relative;
    z-index: 1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/
  
  .slider-item01 {
    background:url("../images/1.webp");
  }
  
  .slider-item02 {
    background:url("../images/2.webp");
  }
  
  .slider-item03 {
    background:url("../images/3.webp");
  }
  
  .slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  }
  
  @media screen and (min-width: 960px) {
      /* 960px以上に適用されるCSS（PC用） */
      .slider-item01 {
          background:url("../images/pc1.jpg");
          background-repeat: no-repeat;
          background-position: left 200% center;
          background-size: 80%;
      }
      .slider-item02 {
          background:url("../images/pc3.jpg");
          background-repeat: no-repeat;
          background-position: left 200% center;
          background-size: 80%;
      }
      .slider-item03 {
          background:url("../images/pc3.webp");
          background-repeat: no-repeat;
          background-position: left 200% center;
          background-size: 80%;
      }
  }
  
  
  /*矢印の設定*/
  
  .slick-prev, 
  .slick-next {
    position: absolute;
    z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ddd;/*矢印の色*/
    border-right: 2px solid #ddd;/*矢印の色*/
    height: 25px;
    width: 25px;
  }
  
  .slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
  }
  
  .slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
  }
  
  /*ドットナビゲーションの設定*/
  
  .slick-dots {
    position: relative;
    z-index: 3;
    text-align:center;
    margin:-50px 0 0 0;/*ドットの位置*/
    display: none;
  }
  
  .slick-dots li {
    display:inline-block;
    margin:0 5px;
    display: none;
  }
  
  .slick-dots button {
    color: transparent;
    outline: none;
    width:12px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border: none !important;
    background:#ddd;/*ドットボタンの色*/
  }
  
  .slick-dots .slick-active button{
      background:#333;/*ドットボタンの現在地表示の色*/
  }
  
  /*----------------------------
* スライドショーレイアウト
*----------------------------*/
ul.slider{
	margin:0;
	padding: 0;
	list-style: none;
  }
  
  .slider a{
	color: #fff;
  }
  
  .slider a:hover,
  .slider a:active{
	text-decoration: none;
  }
  
  .slider p{
	width: 100%;
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 15%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size:5vw;
	font-family:"Shippori Mincho B1", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #fff;
  }
  .slider li:first-child p {
	color: #333 !important;
  }
  .slider-item .sli_txt img {
	  display: none;
  }
  
  @media screen and (min-width: 960px) {
	  /* 960px以上に適用されるCSS（PC用） */
	  .slider-item .sli_txt {
		  left: 0 !important;
		  bottom: 0 !important;
		  transform:  none !important;
		  width: 45%;
		  height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
		  background-color: #000;
		  font-size:2vw;
		  text-align: center;
	  }
	  .slider li:first-child .sli_txt {
		  color: #fff !important;
	  }
	  .slider li:nth-child(2) .sli_txt {
		  background-color: #000 !important;
		  color: #fff !important;
	  }
	  .slider li:last-child .sli_txt {
		  background-color: #000 !important;
		  color: #333 !important;
	  }
	  .slider .sli_txt span {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translateY(-50%) translateX(-50%);
		  -webkit- transform: translateY(-50%) translateX(-50%);
		  width: 100%;
	  }
	  .slider-item .sli_txt img {
		  display: block !important;
		  width: 100%;
		  margin: 0 auto;
		  padding: 15% 0 15%;
	  }
  }
  
  
  .wrapper{
	position: relative;
  }
  
  .container{
	background: #555;
  }
  
  .container p{
	padding: 300px 0; 
	text-align: center;
	color: #fff;
  }



/*----------------------------
* ギャラリー（各店舗ページ）
*----------------------------*/
.gallery{
    margin:0 0 25px 0;/*メイン画像下に余白をつける*/
}

/*戻る、次へ矢印の位置*/
.gallery-prev, 
.gallery-next {
    position: absolute;/*絶対配置にする*/
    z-index: 1;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}
.gallery-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}
.gallery-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/
.choice-btn {
    box-sizing:border-box;
    width: 100%;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 50px;
}
.choice-btn li{
  cursor: pointer;
  outline: none;
  background:#333;
  --widthA: calc(100% / 3);
  width: calc(var(--widthA) - 14px) !important;
  margin-right: 20px;
  margin-bottom: 20px;
}
.choice-btn li:nth-of-type(3n){
  margin-right: 0 !important;
}
.choice-btn li img{
  opacity: 0.4;/*選択されていないものは透過40%*/
}
.choice-btn li.slick-current img{
  opacity: 1;/*選択されているものは透過しない*/
}
.choice-btn .slick-track {
  transform: translate3d(0px, 0px, 0px) !important;
}

@media screen and (min-width: 960px) {
    /* 960px以上に適用されるCSS（PC用） */
    .pc_center {
        width: 90%;
        max-width: 808px;
        margin: 0 auto 40px;
        padding-left:5px;
    }
    .gallery,
    .choice-btn{
        float: left;
    }
    .gallery{
        margin: 25px;/*メイン画像下に余白をつける*/
        width: 55%;
    }
    .choice-btn {
        width: 35%;
        margin-top: 25px;
        padding: 0;
    }
    .choice-btn li{
        --widthA: calc(100% / 2);
        width: calc(var(--widthA) - 14px) !important;
    }
    .choice-btn li:nth-of-type(odd){
        margin-right: 20px !important;
    }
    .choice-btn li:nth-of-type(even){
        margin-right: 0 !important;
    }
}


/*----------------------------
* スクロール（ページトップ ※未使用）
*----------------------------*/
#pagetop{
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bca475;
  border: none !important;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
}
#pagetop p {
  z-index: 7;
}



/*----------------------------
* ページ本体（ヘッダー）
*----------------------------*/
#h1_bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 70px;
  border: none !important;
  background: #fff;
}
h1 {
  width: 100%;
  max-width: 160px;
  cursor: pointer;
}
h1 img {
  width: 100%;
  max-width: 160px;
  padding: 15px 10px !important;
}
h1.open {
  display: none;
}

@media screen and (min-width: 960px) {
    /* 960px以上に適用されるCSS（PC用） */
    #h1_bg {
        height: 80px;
    }
    h1 {
        max-width: 200px;
    }
    h1 img {
        width: 100%;
        max-width: 200px;
        padding: 15px !important;
    }
}



/*----------------------------
* ページ本体（セクション）
*----------------------------*/
.section_h2 {
    position: relative;
    margin-top: 50px;
    margin-bottom: 40px;
    font-family:"Noto Serif Display", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
    font-size: 30px;
    font-weight: normal !important;
    color: #211815;
    text-align: center;
}

.section_h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #bca475;/*線の色*/
}

.section_h2 span {
    display: block;
    font-family:"Shippori Mincho B1", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
    font-size: 18px;
    margin-top: 10px;
}

/*----------------------------
* ページ本体（フッター）
*----------------------------*/

.footer {
    background-color: #000;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 0 0 0;
    margin: 0 auto;
    max-width: 960px;
  }
  @media (min-width: 769px) {
    .footer-container {
      display: flex;
      flex-direction: row;
    }
  }
  
  .footer-logo {
    margin: auto auto 2rem auto;
  }
  @media (min-width: 769px) {
    .footer-logo {
      width: 40%;
    }
  }
  .footer-logo img {
    width: 7rem;
  }
  @media (min-width: 769px) {
    .footer-logo img {
      width: 7rem;
      display: block;
      margin: 0 2rem 0 auto;
    }
  }
  
  .adress {
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    margin: 0 0 2% 0;
  }
  @media (min-width: 769px) {
    .adress {
      font-size: 14px;
      text-align: left;
      width: 60%;
    }
  }  

  .copyright {
    font-size: 10px;
    text-align: center;
    background-color: #000;
    color: #ffffff;
  }





/*----------------------------
* TOP_ABOUT
*----------------------------*/
#about {
    box-sizing:border-box;
    width: 100%;
    margin: 0 auto;
    padding: 40px 25px;
    background-color: #f9f7f3;
}
#about h3,
#about p {
    font-family:"Shippori Mincho B1", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
    text-align: center;
}
#about h3 {
    font-size: 24px;
    margin-bottom: 30px;
    line-height: 1.3em;
}
#about p {
    font-size: 14px;
    line-height: 29px;
}
#about .view a {
    display: block;
    width: 145px;
    height: 25px;
    margin: 25px auto 15px;
    padding: 11px 0 14px 35px;
    position: relative;
    text-align: left;
    background: #000;
        font-family:"Noto Serif Display", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
    font-size: 20px;
    font-weight: normal;
    color: #fff !important;
}
#about .view a:after {
    content: "";
    position: absolute;
    right: 20%;
    top: 35%;
    transition: all 0.2s ease-in-out;
    display: block;
    width: 14px;
    height: 14px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}



/*----------------------------
* TOP_service
*----------------------------*/
#service {
    box-sizing:border-box;
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
    padding: 40px 25px;
    font-family:"Shippori Mincho B1", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
    font-size: 12px;
    line-height: 1.5;
    color: #000;
    vertical-align: top;
}

#service .head {
    font-size: 16px;
    text-align: left;
    margin-bottom: 10px;
}

#service .view a {
    display: block;
    width: 130px;
    height: 20px;
    margin: 10px auto 50px;
    padding: 11px 0 14px 50px;
    position: relative;
    text-align: left;
    background: #000;
        font-family:"Noto Serif Display", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
    font-size: 16px;
    font-weight: normal;
    color: #fff !important;
}
#service .view a:after {
    content: "";
    position: absolute;
    right: 25%;
    top: 35%;
    transition: all 0.2s ease-in-out;
    display: block;
    width: 10px;
    height: 10px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#service .box {
    margin-top: 50px;
}

#service img {
    width: 100%;
    margin-bottom:20px;
}

#service h3{
font-family:"Shippori Mincho B1", YuMincho,"游明朝","Yu Mincho","游明朝体","Times New Roman","Roboto Slab",Garamond,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HiraMinProN-W3,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
text-align: center;
font-size: 24px;
margin-bottom: 10px;
line-height: 1.3em;
}

@media screen and (min-width: 960px) {
    /* 960px以上に適用されるCSS（PC用） */
    #service .box {
        --widthB: calc(100% / 3);
        width: calc(var(--widthB) - 17px) !important;
        float: left;
    }
    #service #kotilabo {
        margin-left: 25px;
        margin-right: 25px;
    }
    #service .head {
        font-size: 18px;
        text-align: left;
        margin-bottom: 20px;
    }
    .headbr {
        display:none;
    }
}


.top-tex {
	font-size: 13px;
	text-align: 1.6;
}

#iconbox {
	display:flex;
	justify-content:center; 
	padding: 10px;
  width: 50%;
}

#iconbox img {
	width: 50%;
}