@charset "UTF-8";
html {
  scroll-behavior: smooth;
}
body {
  font-family: Helvetica Neue,Helvetica,YuGothic,Yu Gothic,'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
  color: #555555;
  margin: 0;
  line-height: 1.9rem;
  font-size: 1.05rem;
}

a:link, a:visited, a:hover {
  text-decoration: none;
}
strong, .strong {
  font-weight: bold;
}
header, #menu, main, footer, .current {
  max-width: 1024px;
  margin: auto;
}
header {
  height: 160px;
  padding-top: 18px;
}
.flex-box {
  display: flex;
  align-items: center;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.indent {
  margin-left: 1rem;
}
@media screen and (max-width: 800px) {
  header {
    height: auto;
    padding: 10px;
  }
  .flex-box {
    display: block;
  }
}
header .flex-box .w50 {
  flex-basis: 50%;
}
@media screen and (max-width: 800px) {
  header .flex-box .w50 {
    flex-basis: 100%;
  }
}
.flex-box .right {
  text-align: right;
}
.flex-box .h160 {
  height: 160px;
  padding-top: 20px;
}
@media screen and (max-width: 800px) {
  .tel {
    margin-top: -30px;
  }
  .flex-box .h160 {
    height: auto;
    padding-top: 0;
  }
}
.logo h2 {
  font-size: 1.25rem;
  color: #0f3685;
  line-height: 1.6rem;
}
@media screen and (max-width: 800px) {
  .logo h2 {
    font-size: 3.5vw;
  }
}
.logo img {
  max-width: 464px;
  height: auto;
}
@media screen and (max-width: 800px) {
  .logo img {
    max-width:90%;
  }
}
h4.tel-fax {
  line-height: 2.6rem;
}
img.icon {
  width:15px;
  height:auto;
}
.telno {
  color: #555;
  font-weight: bold;
  font-size: 1.3rem;
  letter-spacing: 0.05rem;
}
.depo {
  color: #f7b52b;
  font-size: 120%;
  font-weight: bold;
}
.depo::before {
  content:"▍";
}
@media screen and (max-width: 800px) {
  .depo {
    font-size: 100%;
  }
}

.fax {
  font-weight: normal;
}
@media screen and (max-width: 800px) {
  .fax {
    display: none;
  }
}
/* menu */
nav {
  width: 100%;
  background-color: #fcd995;
}
.drawer_hidden {
  display: none;
}
.nav_list {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 800px) {
  .nav_list {
    display: block;
  }
}
.nav_list li {
  list-style: none;
  border-left:1px solid #fff;
}
.nav_list li a:visited, .nav_list li a:link {
  color: #013088;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  line-height: 1.6rem;
  padding: 2px 0;
}
.nav_list li a.s {
  width: 95px;
}
.nav_list li a.l {
  width: 116px;
}
.nav_list li:last-of-type {
  border-right:1px solid #fff;
}
.nav_list li a:hover, .nav_list li a.current {
  color: #fff;
  background-color: #013088;
}
@media screen and (max-width: 800px) {
  .nav_list li a:visited, .nav_list li a:link {
    display: block;
    width: auto;
    height: 30px;
    line-height: 30px;
    text-align: left;
    color: #555;
  }
  .nav_list li a:hover, .nav_list li a.current {
    background-color: #fff;
    color: #555;
  }
}
.current {
  height: 30px;
  background-color: #013088;
  margin: 0 auto;
}
@media screen and (max-width: 800px) {
  .current {
    display: none;
  }
}
br.sp {
  display: none;
}
@media screen and (max-width: 800px) {
  br.pc {
    display: none;
  }
  br.sp {
    display: block;
  }
}
/* hamburger */
@media screen and (max-width: 800px) {
  .drawer_hidden {
    display: none;
  }
  .drawer_open {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100;
    cursor: pointer;
  }
  .drawer_open span,
  .drawer_open span:before,
  .drawer_open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #555;
    transition: 0.5s;
    position: absolute;
  }
  .drawer_open span:before {
    bottom: 8px;
  }
  .drawer_open span:after {
    top: 8px;
  }
  #drawer_input:checked ~ .drawer_open span {
    background: rgba(255, 255, 255, 0);
  }
  #drawer_input:checked ~ .drawer_open span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  #drawer_input:checked ~ .drawer_open span::after {
    top: 0;
    transform: rotate(-45deg);
  }
  .nav_content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0%;
    left: 100%;
    z-index: 99;
    background: rgb(255, 255, 255);
    transition: .5s;
    padding-top: 20px;
  }
  .nav_list li {
    border-bottom: 1px solid #aaa;
    padding: 10px 20px;
    list-style: none;
  }
  .nav_list li a {
    color: #555;
    text-decoration: none;
  }
  #drawer_input:checked ~ .nav_content {
    left: 0;
  }
}
.top-img {
  display: flex;
  height: 300px;
}
@media screen and (max-width: 800px) {
  .top-img {
    display: block;
    height: auto;
  }
}
.toptext {
  color: #fff;
  background-color: #013088;
  width: 384px;
  height: 300px;
  text-align: center;
  padding: 15px;
  line-height: 1.3rem;
}
.toptext h3 {
  font-size: 2rem;
  color: #f8b62a;
  font-weight: bold;
  line-height: 4rem;
}
.toptext h4 {
  font-size: 1.5rem;
  line-height: 2rem;
}
@media screen and (max-width: 800px) {
  .toptext {
    width: 100%;
    margin-top: -9px;
  }
}
#top2, .section {
  background-color: #f5f1e1;
  padding: 20px 30px;
}
#top2 h2 {
  color: #0f3685;
  font-size: 1.8rem;
  font-weight: bold;
}
#top2 hr, footer hr, .section hr, .post02 hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid #999;
}

.column2, .column3, .column4 {
  display: flex;
}
.column2>div {
  width: 50%;
  padding: 10px;
}
.column3>div {
  width: 33.3%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.column4>div {
  width: 25%;
  padding: 10px;
}
.case .column2, .about .column2, .posting .column2 {
  flex-wrap: wrap;
}
.about .column2>div {
  padding: 10px 12px;
  border: 2px solid #f5f1d7;
  display: flex;
  align-items: center;
}
.about .column2>div:nth-child(odd) {
  color: #fff;
  width: 30%;
  background-color: #ffb700;
}
.about .column2>div:nth-child(even) {
  width: 70%;
}

@media screen and (max-width: 800px) {
  .column3, .column2, .case .column4, .posting .column2 {
    display: block;
  }
  .column3>div, .column2>div, .column4>div,
  .about .column2>div:nth-child(odd),
  .about .column2>div:nth-child(even) {
    width:100%;
  }
  .about .column2>div {
    padding: 5px 12px;
  }
}
.column2 .w40 {
  width: 40%;
}
.column2 .w40 img {
  width: 80%;
}
.column2 .w40 .window img {
  width: 100%;
}
.column2 .w60 {
  width: 60%;
}
@media screen and (max-width: 800px) {
  .column2 .w40, .column2 .w60 {
    width: 100%;
  }
}
#top2 h4 {
  color: #0f3685;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
}
#top2 .detail-link {
  width: 100%;
  margin-top: auto;
}
#top2 .detail-link a:link, #top2 .detail-link a:visited {
  width: 128px;
  height: 30px;
  color: #fff;
  background-color: #f19716;
  display: block;
  text-align: center;
  text-decoration: none;
  float: right;
}
footer .com, footer .info {
  display: flex;
  padding: 10px 20px;
  margin-top: 20px;
}
footer .com h1 {
  color: #0f3685;
  width: 45%;
  font-size: 1.4rem;
  font-weight: bold;
}
@media screen and (max-width: 800px) {
  footer .com, footer .info {
    display: block;
  }
}
footer .com p span, footer .info a:visited, footer .info a:link {
  color: #8e55a7;
  letter-spacing: 0.05rem;
}
footer .com p, footer .info p {
  font-size: 1.3rem;
}
footer .info h3 {
  width: 30%;
  color: #f7b52b;
  font-size: 1.4rem;
  font-weight: bold;
}
@media screen and (max-width: 800px) {
  footer .com h1, footer .info h3 {
    width: 100%;
  }
}
.sitemap {
  background-color: #d9d2e9;
  display: flex;
  padding: 30px;
  margin-top: 20px;
}
.sitemap .title {
  width: 40%;
}
.sitemap .title h4 {
  font-size: 1.2rem;
  font-weight: bold;
}
.map ul {
  display: flex;
  flex-wrap: wrap;
}
.map ul li {
  width: 33.3%;
  list-style-type: disc;
}
@media screen and (max-width: 800px) {
  .sitemap, .map ul {
    display: block;
  }
  .sitemap .title, .map ul li {
    width: 100%;
  }
}
.map ul li a:link, .map ul li a:visited {
  text-decoration: none;
  color: #8e55a7;
}
.map ul li a:hover {
  opacity: .4;
}

.copyright {
  color: #909090;
  width: 100%;
  padding: 20px 0 30px 0;
  text-align: center;
}

/* Go to Page Top */
.pagetop{
  display: block;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  -webkit-box-shadow: inset 1px 1px 1px #fff;
  box-shadow: inset 1px 1px 1px #fff;
  border: 1px solid #ccc;
  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;
  border-radius: 8px;
}
.pagetop::before{
  content: "";
  display: block;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  width: 30%;
  height: 30%;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  transform: rotate(-45deg);
}
.pagetop:hover{
  background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
}

/* Circle Triangle icon */
.circle-tri {
  align-items: center;
  display: inline-flex;
  position: relative;
  padding: 6px 10px 6px 48px;
  background-color: #fbb82b;
}
.circle-tri::before, .circle-tri::after {
  content: "";
  display: block;
  position: absolute;
}
.circle-tri::before {
  width: 34px;
  height: 34px;
  border: 2px solid #013088;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  left: 8px;
}
.circle-tri::after {
  border: 14px solid transparent;
  border-left: 23px solid #013088;
  left: 17px;
}
a:link.circle-tri, a:visited.circle-tri, div.circle-tri {
  color: #013088;
  font-size: 1.4rem;
  font-weight: bold;
}
a:hover.circle-tri {
  opacity: 0.6;
}
.case a:link.circle-tri, .case a:visited.circle-tri, .case div.circle-tri {
  font-size: 1.2rem;
  width:100%;
}
.case a:link.circle-tri.s, .case a:visited.circle-tri.s, .case div.circle-tri.s {
  font-size: 0.9rem;
}
.case a:link.circle-tri .s, .case a:visited.circle-tri .s, .case div.circle-tri .s {
  font-size: 0.7rem;
  margin-left: 0.6rem;
  font-weight: normal;
}
.case a:link.circle-tri .w {
  width:40%;
  line-height: 0.9rem;
}

.section {
  margin-bottom: 30px;
}
.section h4 {
  color: #013088;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
  text-indent: -1.5rem;
  padding-left: 1.5rem;
}
.section h4:before {
  content:"▍";
  color: #f7b52b;
}
.point {
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
.point .a {
  color: #0f3685;
  background-color: #feda8b;
  border-bottom: 1px solid #ddd;
  font-size:1.1rem;
  font-weight: bold;
  padding: 10px;
}
.point .b {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.point .b.red {
  color: #d91515;
}
.haifu, .area4, .area5 {
  display: flex;
  flex-wrap: wrap;
}
.haifu>div {
  font-size:1.1rem;
  font-weight: bold;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.haifu>div:nth-child(odd) {
  width: 55%;
}
.haifu>div:nth-child(even) {
  width: 45%;
}
.haifu>div:nth-child(1),
.haifu>div:nth-child(2),
.haifu>div:nth-child(5),
.haifu>div:nth-child(6) {
  background-color: #feda8b;
} 
@media screen and (max-width: 800px) {
  .haifu {
    display: block;
  }
  .haifu>div:nth-child(odd), .haifu>div:nth-child(even) {
    width: 100%;
  }
  .haifu>div:nth-child(odd) {
    background-color: #feda8b;
  }
  .haifu>div:nth-child(even) {
    background-color: #fff;
  }
}
.orange {
  color: #f7b52b;
}
.caution {
  font-size: 1.2rem;
  padding-top: 1rem;
}
#senbetsu .a {
  font-weight: bold;
  color: #0f3685;
}
#senbetsu p {
  line-height: 3rem;
}
.area1 {
  flex-basis: 55%;
  padding-right: 30px;
}
.area2 {
  flex-basis: 45%;
}

/* Popup */
.open {
  cursor:pointer;
}
#pop-up {
  display: none;
}
.overlay {
  display: none;
}
#pop-up:checked + .overlay {
  display: block;
  z-index: 9999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}
.window {
  width: 90vw;
  max-width: 780px;
  height: 710px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
}
.text {
  font-size: 18px;
  margin: 0;
}
.close {
  cursor:pointer;
  position: absolute;
  top: -6px;
  right: 4px;
  font-size: 20px;
}
.area3 {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}
.kosu, .kotsu, .area3 .case {
  color: #0f3685;
  font-size: 1.3rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.area4, .area5 {
  width: 100%;
  background-color: #f5f1e1;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin-bottom: 40px;
}
.area5 {
  width: 66.6%;
  margin-bottom: 15px;
}
.area4>div, .area5>div {
  display: flex;
}
.area4>div {
  width: 33.3%;
}
.area5>div {
  width: 50%;
  display: flex;
}
@media screen and (max-width: 800px) {
  .area4 {
    display: block;
  }
  .area4>div, .area5, .area5>div {
    width: 100%;
  }
}
.area4 .name, .area4 .no, .area5 .name, .area5 .no {
  color: #000;
  font-size: 1.1rem;
  padding: 4px 8px;
  width: 50%;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.area4 .name {
  background-color: #f7daa8;
}
.area4 .no, .area5 .no {
  text-align: right;
}
@media screen and (max-width: 800px) {
  .area4 .name, .area4 .no, .area5 .name, .area5 .no {
    padding: 4px 16px;
  }
}
.area5 .name {
  background-color: #d0f0bb;
}
.section.area {
  padding-bottom: 26px;
}

table.price {
  width: 100%;
  margin: 1.5rem 0;
}
table.price td {
  width: 11.1%;
  text-align: center;
  vertical-align: middle;
  border: 3px solid #fff;
  line-height: 1.5rem;
  color: #0f3685;
  font-weight: bold;
  padding: 3px;
}
table.price td.g, table.price tr.g td {
  background-color: #d9e622;
}
table.price tr.g td.w {
  background-color: #fff;
}
ul.disc {
  list-style: disc;
  margin-left: 28px;
}
ul.disc2 li {
  text-indent: -.5em;
  padding-left: .5em;
}
ul.disc2.b>li {
  color: #0f3685;
}
ul.disc3>li {
  color: #555;
  text-indent: -1em;
  padding-left: 1em;
}
ul.disc2 li:before, h6:before, .qa h5:before, .post02 ul li:before {
  content: "●";
}
ul.disc3 li:before {
  content: "・";
}
.section h5 {
  color: #0f3685;
  font-weight: bold;
  margin-top: 1rem;
}
.process h5 {
  margin-top: 0;
  width:100%;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  padding:10px;
}

.process h5.blue {
  background-color: #0f3685;
}
.process h5.orange {
  background-color: #ffa200;
}
.process ul.disc2 li {
  padding: 10px;
}
.process .sen {
  color: #0f3685;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  line-height: 2rem;
}
.process p.blue {
  color: #0f3685;
  font-weight: bold;
}
.rem1 {
  margin-top: 1rem;
}
.method .column3 {
  margin-bottom: 30px;
}
.method .column3 img {
  margin-bottom: 10px;
}

.method .column2>div {
  width: 33.3%;
}
@media screen and (max-width: 800px) {
  .method .column2>div, .method .column2>div img {
    width:100%;
  }
}
.case .column4 {
  flex-wrap: wrap;
}
.case .column4>div a {
  width:100%;
}

h6 {
  color: #f7b52b;
  font-size: 130%;
  text-indent: -0.85rem;
  padding-left: 1rem;
}

h6 .s {
  font-size: 90%;
}
.mat, .way {
  text-indent: -3em;
  padding-left: 3em;
}
.mat:before {
  content: "内容：";
}
.way:before {
  content: "方法：";
}
.other:before {
  content: "その他：";
}
.areac:before {
  content: "配布エリア：";
}
.mat:before, .way:before, .other:before, .areac:before {
  font-weight: bold;
}
.qa2 {
  padding: 0 20px;
}
@media screen and (max-width: 800px) {
  .qa2 {
    padding: 0;
  }
}
.qa h5 {
  color: #f7b52b;
  font-size: 1.45rem;
  margin-top: 40px;
}
.pri {
  color: #000;
  padding:20px 20px 40px 20px;
  margin: 10px auto;
}
@media screen and (max-width: 800px) {
  .pri {
    padding: 20px 0 40px 0;
  }
}
.pri ol {
  list-style-type: decimal;
  margin-left: 1.5rem;
}
.pri ol li {
  color: #000;
  margin-top: 1rem;
}
.post01 {
  padding: 30px;
}
.post02 {
  width: 900px;
  height: 355px;
  padding: 25px 30px;
  margin: 1rem auto 0 auto;
  background-color: #f8b62b;
  border-radius: 12px;
  border: 7px solid #093388;
}
@media screen and (max-width: 800px) {
  .post02 {
    width: 100%;
    height: auto;
  }
}
.post02 h2 {
  color: #093388;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
}
.post02 hr {
  margin-top: 24px;
  border-top: 2px solid #fcdb95;
}
.post02 ul {
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}
.post02 ul li {
  margin-top: 12px;
}
.post02 ul li:before {
  color: #093388;
  font-size: 2.5rem;
  position: relative;
  top: 3px;
}
.post02c {
  margin-left: 30px;
}

@media screen and (max-width: 800px) {
  .post02 h2, .post02 ul, .post02 ul li:before {
    font-size: 1.5rem;
  }
  .post02 ul li {
    text-indent: -1rem;
    padding-left: 1rem;
  }
}
.contact {
  width: 70%;
  margin: auto;
}
@media screen and (max-width: 800px) {
  .contact {
    width: 100%;
  }
}
.contact input, .contact textarea {
  font-size: 100%;
  padding: 4px;
  width: 100%;
  border: 1px solid #ccc;
}
.contact input::placeholder, .contact textarea::placeholder {
  color: #fcd995;
}
.contact select {
  font-size: 100%;
  width: 170px;
  height: 30px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  background-color: #eee;
}
.contact div {
  padding: 4px 8px;
}
.contact .flex > div:nth-child(1) {
  width: 30%;
  text-align: right;
}
.contact .flex > div:nth-child(2) {
  width: 70%;
}
.contact .req {
  position: relative;
  bottom: 5px;
}
.contact .req:before {
  content: "*";
  color: #f00;
  font-size: 200%;
  position: relative;
  left: -6px;
  bottom: -13px;
}
@media screen and (max-width: 800px) {
  .contact .flex {
    display: block;
  }
  .contact .flex > div:nth-child(1), .contact .flex > div:nth-child(2) {
    width: 100%;
    text-align: left;
  }
  .contact .req {
    bottom: 0;
  }
}
.send {
  justify-content: center;
}
.send input, .send a:link, .send a:visited {
  color: #013088;
  width: 120px;
  height: 40px;
  margin: 15px;
  font-weight: bold;
  border: 1px solid #fff;
  background-color: #fcd995;
}
.send a:link, .send a:visited {
  display: flex;
  padding: 4px;
}
.send input:hover, .send a:hover {
  color: #fff;
  background-color: #013088;
}
.contact .send {
  text-align: center;
}
@media screen and (max-width: 800px) {
  .contact .send.flex {
    display: flex;
  }
}
.contact .size {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.contact .size div {
  padding: 0 2px;
}
.contact .size div > input {
  width: 16px;
  position: relative;
  top: -4px;
}
.contact .size label {
  position: relative;
  top: -4px;
  margin-right: 8px;
}

.other-size { 
  display: none;
  width: 100%;
}
.contact div div.other-size input {
  width: 100%;
}
/** チェックONなら表示 */
input.size9:checked ~ .other-size{
  display: block;
  width: 100%;
}