body { width:100%; _max-width:1000px; margin:0 auto; color:#3c3c3c; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

li { list-style: none; }
a { color:#3c3c3c; }
a:hover { color:#30C497 !important; text-decoration: none; }
a:visited { color:#3c3c3c; }

.pc_only {}
.smp_only { display:none; }

.faq1 .text:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
    overflow:hidden;
    zoom:1;
}


header { background:#ffffff; width:100%; margin:0 auto; border-bottom:solid 1px #E2E7EB; position: fixed; z-index:10000; }
header .header_box { max-width:1000px; width:100%; margin:0 auto; }
header .logo { text-align: left; padding:20px 0 20px 20px ; }
header .menu-wrapper { float:right; }
header ul { display: flex; flex-wrap: wrap; _float:right; padding:20px 20px 20px 0; }
header ul li { margin:0 0 0 30px; font-size:0.8rem; font-weight:700; }
header ul li a { text-decoration: none; }

.wrapper { width:100%; margin:0 auto; border-top:solid 1px #E2E7EB; }
.content { _width:100%; max-width:1000px; margin:0 auto; padding:0 20px; }

.main { background:url("images/main_bg.png")no-repeat center center; display: block; padding:50px 0 50px; margin:90px auto 50px; text-align:center; }
.main img { margin:10px 20px; }
.main .btn { margin:0 auto; width:90%; max-width:800px; }
.main .btn ul { display: flex; margin:0; padding:0; }
.main .btn li { background:#ffffff; margin:10px 10px !important; border-radius:5px; width:30%; height:220px;  text-align:center; }
.main .btn li a { display: block; max-width:150px; width:90%; height:100%; position: relative; overflow:hidden; text-indent: -9999px; margin:0 auto; }

.main .btn .btn1 a { background:url("images/main_btn1.png")no-repeat center center; background-size:contain; }
.main .btn .btn1 a:hover { background:url("images/main_btn1_on.png")no-repeat center center; background-size:contain; }
.main .btn .btn2 a { background:url("images/main_btn2.png")no-repeat center center; background-size:contain; }
.main .btn .btn2 a:hover { background:url("images/main_btn2_on.png")no-repeat center center; background-size:contain; }
.main .btn .btn3 a { background:url("images/main_btn3.png")no-repeat center center; background-size:contain; }
.main .btn .btn3 a:hover { background:url("images/main_btn3_on.png")no-repeat center center; background-size:contain; }

.caution { background:#FFF2F2; border-radius:5px; margin:0 auto 50px; padding:20px; }
.caution ul { margin:0;}
.caution li { color:#D00000; position:relative; font-size:0.8rem; font-weight: 700; text-align: left; margin: 0 0 8px; }
.caution li:before { background:url("images/icon_.png")no-repeat center center; width:19px; height:19px; content:""; position:absolute; left:-25px; top:2px; }

.faq1 { margin:0 0 50px; clear:both; }
.faq1 .title { font-size:0.8rem; font-weight: 700; border:solid 2px #3c3c3c; border-radius:20px; display:inline; padding:2px 5px; clear:both; }
.faq1 .text { margin:10px 0 20px; padding:0; display:block; clear:both; }
.faq1 .text li { float: left; }
.faq1 .text li:after { content: "／" }
.faq1 .text li:last-child:after { content: "" }

.line_break {}

.faq2 { margin:0 0 50px;  }
.faq2 ul { margin:0; padding:0; display: flex; flex-wrap: wrap; }
.faq2 li { padding:0 8px 8px; width:22%; aspect-ratio: 5 / 3; }
.faq2 li a {display: block; max-width:230px; _width:100%; height:100%; position: relative; overflow:hidden; text-indent: -9999px; border:solid 2px #cccccc; border-radius:5px; padding:10px 0; }
.faq2 .btn1_01 a { background:url("images/btn_1_01.png")no-repeat center center; background-size:cover; }
.faq2 .btn1_01 a:hover { background:url("images/btn_1_01_on.png")no-repeat center center; background-size:cover; }
.faq2 .btn1_02 a { background:url("images/btn_1_02.png")no-repeat center center; background-size:cover; }
.faq2 .btn1_02 a:hover { background:url("images/btn_1_02_on.png")no-repeat center center; background-size:cover; }
.faq2 .btn1_03 a { background:url("images/btn_1_03.png")no-repeat center center; background-size:cover; }
.faq2 .btn1_03 a:hover { background:url("images/btn_1_03_on.png")no-repeat center center; background-size:cover; }
.faq2 .btn1_04 a { background:url("images/btn_1_04.png")no-repeat center center; background-size:cover; }
.faq2 .btn1_04 a:hover { background:url("images/btn_1_04_on.png")no-repeat center center; background-size:cover; }

.faq2 .btn2_01 a { background:url("images/btn_2_01.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_01 a:hover { background:url("images/btn_2_01_on.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_02 a { background:url("images/btn_2_02.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_02 a:hover { background:url("images/btn_2_02_on.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_03 a { background:url("images/btn_2_03.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_03 a:hover { background:url("images/btn_2_03_on.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_04 a { background:url("images/btn_2_04.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_04 a:hover { background:url("images/btn_2_04_on.png")no-repeat center center; background-size:cover; }

.faq2 .btn2_05 a { background:url("images/btn_2_05.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_05 a:hover { background:url("images/btn_2_05_on.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_06 a { background:url("images/btn_2_06.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_06 a:hover { background:url("images/btn_2_06_on.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_07 a { background:url("images/btn_2_07.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_07 a:hover { background:url("images/btn_2_07_on.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_08 a { background:url("images/btn_2_08.png")no-repeat center center; background-size:cover; }
.faq2 .btn2_08 a:hover { background:url("images/btn_2_08_on.png")no-repeat center center; background-size:cover; }



.faq2 a .on { display:none; }
.faq2 a:hover .on { display:block; }
.faq2 a:hover .off { display:none; }

@media(max-width: 970px){

.menu-wrapper {
  position: relative;
}

.menu-icon {
  width: 30px;
  height: 30px;
  position: fixed; /* ← fixedにして常に左上固定 */
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 3;
  display: inline-block;
}

.menu-icon span {
  display: block;
  height: 4px;
  margin: 6px 0;
  background: #333;
  border-radius: 2px;
  transition: 0.4s;
}

/* ハンバーガーがXに変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* オーバーレイ背景 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  z-index: 1;
}
#menu-toggle:checked ~ .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体（左から出す） */
.menu {
  position: fixed;
  top: 0;
  right: -250px; /* ← 初期位置を左へ */
  width: 250px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.2);
  transition: left 0.4s ease;
  z-index: 2;
}
#menu-toggle:checked ~ .menu {
  right: 0; /* ← 開いたときは左0へ */
}
.menu ul {
  list-style: none;
  padding: 60px 20px;
}
.menu li {
  margin: 20px 0;
}
.menu a {
  text-decoration: none;
  color: #333;
  font-size: 1.0rem;
  transition: color 0.3s;
}
.menu a:hover {
  color: #007bff;
}
}

@media(max-width: 768px){
header img { width:80%; max-width:200px; }
    
.main { padding:25px 0 25px; margin:70px auto 30px; }

.line_break { clear:all; }

.pc_only { display:none; }
.smp_only { display:block; }

h2 { font-size: 1.2rem; }

.main .btn li { height:150px; }

.faq2 li { padding:0 5px 5px; width:21%; }
}

@media(max-width: 450px){
.main { padding:20px 0 20px; }
.main .btn li { height:100px; }
    
.faq1 .text li { float: none; }
.faq1 .text li:after { content: "" }
.faq1 .text li:last-child:after { content: "" }
}