@charset "UTF-8";

/* ボディ */
body {
  /* word-break: break-all; */
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 10px;
  padding: auto;
  background-color: #f5f5f5;
  /* word-break: keep-all; */
  overflow-wrap: break-word;
  /* 必要なら単語単位で改行（超長単語対策） */
  /* white-space: normal;  */
}

/* ヘッダー */
header {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100px;
  background-color: white;
  /* background-color: #00258e; */
  align-items: center;
}

.title {
  margin: auto;
}

.logo_img {
  margin: auto;
  width: 60%;
  height: 60%;
}

.logo {
  font-size: 20px;
}

.hdr_menu {
  list-style: none;
  display: inline-block;
  padding: 1em;
}

/* section */
.head {
  width: 100%;
  height: 30px;
  background: url(img/bg_breadcrumb.png) repeat-x 0 0 #f5f5f5;
}

/* container */
div.container {
  margin-left: 1em;
  margin-right: 1em;
}

/* 
.japanese-style {
  list-style-type: decimal; */
/* 1. 2. 3. 形式 */
/* } */

/* .japanese-style li { */
/* margin-bottom: 1em; */
/* 段落風にスペース */
/* } */
.japanese-style {
  counter-reset: main-counter;
  list-style: none;
  padding-left: 1em;
}

.japanese-style>li {
  counter-increment: main-counter;
}

.japanese-style>li::before {
  content: counter(main-counter) ". ";
  font-weight: bold;
}

.sub-list {
  counter-reset: sub-counter;
  list-style: none;
  padding-left: 2em;
}

.sub-list>li {
  counter-increment: sub-counter;
}

.sub-list>li::before {
  content: counter(main-counter) "." counter(sub-counter) ". ";
  font-weight: bold;
}

.indent {
  padding-left: 1em;
}


/*  囲み */
.box {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #FFF;
  border: solid 3px #00258e;
  /*線*/
  border-radius: 10px;
  /*角の丸み*/
}

.box p {
  /* margin: 5%; */
  padding: 0;
}

.box video {
  width: 100%;
}

/* 見出しテキストスタイル */
h4 {
  font-size: 18px;
  font-weight: bold;
  text-decoration: underline solid black;
  margin: 15px;
  margin-left: 0;
  margin-right: 0;
}

.text_bold {
  font-weight: bold;
}

h5 {
  font-size: 1em;
}

.formula {
  font-size: 0.9rem;
  padding-left: 1em;
}

.formula2 {
  font-size: 0.84rem;
  padding-left: 1em;
}

/* リンク */
a {
  text-decoration: none;
  color: rgb(52, 52, 212);
}

/* 区切り線 */
hr.style1 {
  border-top: 2px dashed #00258e
}

hr.style2 {
  border-top: 3px solid #00258e;
}

/* 回り込み */
.flex_parent {
  display: block;
}

/* 改行させない単語 */
.block {
  display: inline-block;
}

/* 　中央ぞろえ左寄せ */
.text_center {
  display: table;
  margin: 0 0 0 0;
}

/* フロートの中央ぞろえ左寄せ */
.text_right {
  display: table;
  margin: auto;
  text-align: left;
  font-size: 0.8em;
}

/* 画像中央寄せ */
div.img_center img {
  width: 100%;
  display: block;
  margin-left: 5%;
  margin-right: 0;
}


/* 画像サイズ */
img {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.float_left {
  width: 70%;
  margin: 5%;
}

.float_left_small {
  width: 65%;
  margin-left: 5%;
  margin-top: 10px;
  margin-bottom: 8%;
}

.float_left_two {
  width: 100%;
}

.float_left_object {
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
  margin-bottom: 8%;
}

.img {
  width: 80%;
}

/* インデント */
.indent p {
  margin-left: 1rem;
  text-indent: -1rem;
}

/* ストアロゴ */
/* .store_logo {
  width: 50%;
  margin-top: 10px;
  margin-left: 10px;
} */
.store_logo {
  width: 100%;
  /* 必要に応じて50%でもOK */
  display: flex;
  flex-wrap: wrap;
}

.store_logo img {
  margin-top: 10px;
  margin-left: 10px;
  max-width: 100%;
}

.box_function {
  margin: 25px 10px 20px 10px;
}

/* 画像スクロール */
.slide_wrap {
  overflow-x: scroll;
}

.slide_box {
  width: 100%;
  min-width: 600px;
  /*600px以下の場合スクロール*/
}

/* フッター */
footer {
  margin-top: 150px;
  margin-bottom: 50px;
}

.footer_container {
  font-size: small;
  display: table;
  margin: 0 auto;
}

/* トップへ戻るボタン */
html {
  scroll-behavior: smooth;
}

.gotop {
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #FFF;
  border: 1px solid #999;
  padding-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  font-size: 85%;
  text-decoration: none;
  color: #333;
  opacity: 0.5;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
}

.gotop::before {
  content: "";
  display: block;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  width: 25%;
  height: 25%;
  top: -10%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  transform: rotate(-45deg);
  bottom: 0;
}

/* お問い合わせ */
.form {
  margin-left: 6%;
  margin-right: 6%;
}

/* 下線 */
.setting_title {
  text-decoration: underline solid black;
  font-weight: bold;
}

@media screen and (min-width: 520px) {

  /* 481px以上に適用されるCSS（タブレット用） */
  /* container */
  div.container {
    margin-left: 1em;
    margin-right: 1em;
  }

  /* 改行なし */
  .sp {
    display: none;
  }

  /* 計算式 */
  .formula {
    font-size: 1rem;
  }

  .formula2 {
    font-size: 1rem;
  }

  /* 回り込み解除 */
  .float_left {
    display: inline-block;
    vertical-align: 0;
    width: 50%;
  }

  .float_right {
    display: inline-block;
  }

  .float_left_small {
    width: 45%;
    margin-left: 5%;
    margin-top: 10px;
    margin-bottom: 8%;
  }

  .float_left_object {
    width: 65%;
    margin-left: 5%;
    margin-top: 10px;
    margin-bottom: 8%;
  }

  /* 中央ぞろえ左寄せ*/
  .text_center {
    display: table;
    margin: 0 125px 0 125px;
  }

  .text_center2 {
    display: table;
    margin: 0 140px 0 140px;
  }

  /* フロートの中央ぞろえ左寄せ */
  .text_right {
    display: table;
    margin: auto;
    text-align: left;
  }

  /* 画像中央寄せ */
  .img_center {
    text-align: center;
    margin: 0;
  }

  .img {
    width: 40%;
  }

  .gotop:hover {
    opacity: 1;
  }
}

@media screen and (min-width: 960px) {
  /* 960px以上に適用されるCSS（PC用） */

  /* container */
  div.container {
    margin: 0 auto;
    max-width: 1024px;
    /* 1024pxは横幅の上限 */
  }

  /* 改行なし */
  .sp {
    display: none;
  }

  /* 計算式 */
  .formula {
    font-size: 1rem;
  }

  .formula2 {
    font-size: 1rem;
  }

  /* 回り込み解除 */
  .float_left {
    display: inline-block;
    vertical-align: 0;
    width: 50%;
  }

  .float_right {
    display: inline-block;
  }

  .float_left_two {
    width: 80%;
    display: block;
    margin: 0 auto;
    margin-bottom: 5%;
    max-width: 100%;
    height: auto;
  }

  .float_left_three {
    width: 90%;
    display: block;
    margin: 0 auto;
    margin-bottom: 5%;
    max-width: 100%;
    height: auto;
  }

  .float_left_small {
    width: 45%;
    margin-left: 5%;
    margin-top: 10px;
    margin-bottom: 8%;
  }

  /* 囲み枠 */
  .box {
    max-width: 960px;
    padding: 0.5em 2em;
    margin: 2em;
    margin-left: 1em;
    margin-right: 1em;
    background: #FFF;
    border: solid 3px #00258e;
    /*線*/
    border-radius: 10px;
    /* 角の丸み */
  }

  /* 中央ぞろえ左寄せ*/
  .text_center {
    display: table;
    margin: 0 165px 0 165px;
  }

  .text_center2 {
    display: table;
    margin: 0 auto 0 280px;
  }

  /* フロートの中央ぞろえ左寄せ */
  .text_right {
    display: table;
    margin: auto;
    text-align: left;
  }

  /* 画像中央寄せ */
  .img_center {
    text-align: center;
    margin: 0;
  }

  /* 画像サイズ */
  img {
    width: 100%;
  }

  /* スクロール画像 */
  .slide-box {
    width: 100%;
  }

  .gotop:hover {
    opacity: 2;
  }
}