/*------------------------------------------

トップページ
*/

/*
トップページ用ヘッダ
*/
#header { width:100%; height:50vw; max-width:1300px; max-height:658px;
  margin: 0 auto; position: relative; }
#header a { text-decoration:none; }
#header .header_inner { max-width: 1024px; width: 100%; margin:0 auto; position: relative;
  padding-top:min(20px,1vw);
  display:flex; flex-wrap:wrap; justify-content:center;
}
#header .header_inner .header_inner1 { max-width:90vw; width:45%; position:relative; margin-bottom:1vw; }
#header img.logo1 { max-width:74vw; width:100%; display:block; margin-top:min(20px,2.5vw); }
#header .logo2 { position: absolute; top:min(130px,20vw); left:1%; max-width:30%; }
#header .logo2 img { width: 100%; }
#header .logo3 { text-align:right; }
#header .logo3 img { display:inline-block; max-width:100%; }
#header .catch {
    color: #00683e; color:#fff; font-size:min(1.3rem,3.4vw); text-shadow:0 0 5px #000;
    z-index: 50;
    max-width:300px; box-sizing:content-box;
    margin-top:7px; padding-left:min(40%,26vw);
    }
#header .catch .catch1 { text-align: justify; line-height: 1.4; }
#header .catch .catch2 { padding: 0; text-align: right; }

#header .head_img1 { z-index: 10; width:45%; max-width:90vw; text-align:right; padding-left:20px; }
#header .head_img1 img { width:100%; }

#header .bg_box img { width: 100%; margin:0px auto 0 auto; position: absolute; }
#header .bg_box .caption { font-size:1.4rem; font-weight:600; }
#header .bg_box .caption { position:absolute; bottom:12%; right:1%; font-size:1.2rem; color:#fff; text-shadow:0 0 4px #000; }

@media only screen and (max-width:700px) {
  #header { height:calc(36vw + 280px); }
  #header .header_inner .header_inner1 { width:min(400px,90vw); }
  #header .bg_box img { margin-top:min(90px,10vw); }
  #header .bg_box .caption { bottom:initial; right:initial; left:2%; top:min(300px,52vw); /*color:#888; text-shadow:none;*/ }
  #header .logo2 { left:-2vw; }
  #header .head_img1 { width:min(250px,70vw); }
}

#mainvisual { background:url(/images/mainvbg2.svg) center bottom no-repeat; background-size:cover; padding:0 0 70px; }

#index { position:relative; margin-top:-190px;
  font-family:"Zen Maru Gothic", sans-serif; font-weight:500; text-align:center; }

#index_feature { display:flex; justify-content:center; align-items:flex-end; text-align:center; }
#index_feature .badge { width:min(200px,30vw); display:block; text-decoration:none; text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,1px 1px 0 #fff; }
#index_feature .badge img { display:block; margin:auto;  max-width:100%; transform:translateY(5px); transition:transform .2s; }
#index_feature .badge:hover img { transform:translateY(4px);}
#index_feature .badge span { display:block; font-size:min(1.2rem,3vw); font-weight:800; color:#135f36; line-height:1; }
#index_feature .badge h5 { color:#135f36; line-height:1; font-weight:800; font-size:min(1.7rem,4vw); margin-top:2px; }
#index_feature .badge h5 span { font-size:min(1.7rem,4vw); display:inline-block; }

.index_table { display:flex; width:min(92vw,1100px); margin:0 auto; margin-top:min(40px,1vw); justify-content:space-between; 
  border-radius:5px; overflow:hidden; }
.index_table .thead { width:24px; display:flex; justify-content:center; 
  padding:2em 5px 0; background:#aaa; 
  font-size:1.45rem; color:#fff; line-height:2.5; }
.index_table .tbody { width:calc(100% - 27px); }
.index_table .tbody .tr { display:flex; }
.index_table .tbody .tr:first-child { margin-bottom:3px; }

.index_table .tbody .tr .th { width:160px; background-color:#135f36; padding:10px 0;
  display:flex; align-items:center; justify-content:center; flex-direction:column; }
.index_table .tbody .tr .th em { display:block; color:#fff; margin:15px 0; }
.index_table .tbody .tr .th a.link { display:inline-block; color:#fff; font-size:1.1rem; padding:0; font-weight:600; }

.index_table .tbody .tr .td { width:calc(100% - 160px); background-color:#fff; overflow:auto; 
  display:flex; flex-wrap:wrap;  }
  .index_table .tbody .tr .td::-webkit-scrollbar { background:#fff; height:8px; }
  .index_table .tbody .tr .td::-webkit-scrollbar-thumb { background-color:#ddd; border-radius:5px; border:2px solid #fff; }
  .index_table .tbody .tr .td::-webkit-scrollbar-thumb:hover {  background-color:#ddd;}
.index_table .tbody .tr .td .option { min-width:50%; }
.index_table .tbody .tr .td .option > h5 { font-size:1.2rem; color:#444; width:92%;
  margin:10px 4% 0; background:#f6f3e8; padding:3px; line-height:1.2; border-radius:15px; }
.index_table .tbody .tr .td ul { display:flex; align-items:flex-start; justify-content:space-evenly; margin:5px; }
.index_table .tbody .tr .td ul li a { display:block; margin:5px 4px; width:90px; 
  text-decoration:none; color:#333; font-size:min(1.15rem,3vw); font-weight:800; text-align:center; line-height:1.1; }
.index_table .tbody .tr .td ul li a img { display:block; margin:0 auto; max-width:13vw; }
.index_table .tbody .tr .td ul li a span span { display:inline-block; }

.index_table .tbody .tr .td_variation { justify-content:space-evenly; }
.index_table .tbody .tr .td ul.thumbs1 { width:100%; }
.index_table .tbody .tr .td ul.thumbs1 li { width:14%; }
.index_table .tbody .tr .td ul.thumbs1 li a { width:100%; margin-left:auto; margin-right:auto; }

.index_table .tbody .tr .td > .links  { padding:10px 0; text-align:left; width:97%; }
.index_table .tbody .tr .td > .links a  { filter:brightness(0.4) hue-rotate(-90deg); font-size:1.15rem; display:inline-block; padding:2px 5px; margin:0 3px; font-weight:600; }


#index .btnarea { margin-top:20px;}

/*@media only screen and (max-width:767px) {*/
@media only screen and (max-width:967px) {
  #index { margin-top:calc(50px - 18vw); }
  #index_feature { align-items:flex-start; }
  #index_feature .badge:last-child img { margin-top:6px; }
  .index_table { flex-direction:column; }
  .index_table .thead { width:initial; border-radius:5px 5px 0 0; padding:0 0 0 1em; letter-spacing:.5em; line-height:2; justify-content:left; }
  .index_table .tbody { width:initial; }  
  .index_table .tbody .tr { flex-direction:column; }
  .index_table .tbody .tr .th { width:initial; padding:10px; flex-direction:row; justify-content:space-between; }
  .index_table .tbody .tr .th em { margin:0; }
  .index_table .tbody .tr .th a { margin:10px; }
  .index_table .tbody .tr .th a.link { margin:0; padding:0; }
  .index_table .tbody .tr .td { width:initial; }
  .index_table .tbody .tr .td ul { flex-wrap:wrap; justify-content:center; }
  .index_table .tbody .tr .td ul li a { width:70px; max-width:18vw; }
  .option-colors .index_table .tbody .tr .td ul li a { max-width:15vw; }
  .index_table .tbody .tr .td ul li a br { display:none; }
}

/* ------------------------------------

  上部固定メニュー
------------------------------------ */
/* #header_menu */
#header_menu { z-index:999; position:fixed; top:-110px; left:0; width:100%; background:#fff; box-shadow:0 3px 3px rgba(0,0,0,.2); 
  transition:.2s; }
  .header_menu_inner { width:min(1050px,99vw); height:min(90px,17vw);
    margin:0 auto; padding-top:5px; position: relative;
    display:flex; align-items:flex-end; 
    font-family:"Zen Maru Gothic", sans-serif; font-weight:500; text-align:center; }
  body.mvout #header_menu { top:0; }

#header_menu .logo { width:min(80px,9vw); min-width:60px; height:100%; padding:0 5px; text-align:center;  
    display:flex; align-items:flex-start; height:min(85px,16vw);
}
#header_menu .logo img { width:100%; height:auto; display:block; margin:0 auto; }

#header_menu .feature { display:flex; justify-content:center; align-items:flex-end; text-align:center; width:min(290px,29vw); min-width:165px; }
#header_menu .feature .badge { width:33%; display:block; text-decoration:none; padding:0 0 1.2em; }
#header_menu .feature .badge img { display:block; margin:auto; width:70%; min-width:45px; transition:transform .2s; }
#header_menu .feature .badge:hover img { transform:translateY(-1px);}
#header_menu .feature .badge h5 { position:absolute; bottom:3px; left:-50px; right:-50px; margin:0; 
  /*width:min(10em,8vw);*/ min-width:5em;
  line-height:1; font-weight:800; font-size:min(1.12rem,3vw); margin:0 auto; }
#header_menu .feature .badge h5 br { display:none; }

#header_menu .tr { width:min(110px,15vw); min-width:6em; margin-left:2px; cursor:pointer; }
#header_menu .tr .th { display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:12px 0; border-radius:6px 6px 0 0; min-width:5.5em;
  color:#135f36; font-weight:600; font-size:min(1.3rem,2vw); white-space: nowrap;
  transition:all .2s;  background:#e8e8e8;  }
  #header_menu .tr:hover .th { background:#f4f4f4; padding:14px 0; }

#header_menu .tr .td { display:none; transition:all .2s; opacity:0; text-align: center;
  position:absolute; left:0; top:100%; width:100%; max-width:1000px; background:#f4f4f4;
  box-shadow:0 3px 3px rgba(0,0,0,.2); }
  #header_menu .tr:hover .td { opacity:1; display:flex; flex-wrap:wrap; justify-content:center; }
  #header_menu .tr:hover .td > div { margin:10px; }
#header_menu .tr .td h5 { font-size:1.2rem; background:#fff; border-radius:10px; max-width:500px; margin:10px auto 0; }
#header_menu .tr .td ul { display:flex; flex-wrap:wrap; justify-content:center; margin:5px auto; }
#header_menu .tr .td ul li { display:block; }
#header_menu .tr .td ul li a { display:block; margin:5px 0; width:90px; 
  text-decoration:none; color:#333; font-size:min(1.15rem,3vw); font-weight:800; text-align:center; line-height:1.1; }
#header_menu .tr .td ul li a img { display:block; margin:0 auto 3px; width:60px; }

#header_menu .menu_sub .menu_sub_list { display:flex; }
#header_menu .menu_sub .menu_sub_h { display:none; }
#header_menu a.item { display:flex; align-items:center;
  padding:5px 10px; margin-left:2px; border-radius:0 5px 0 0; min-height:35px;
  color:#333; font-size:1.1rem; font-weight:600; line-height:1.2;
  transition:.2s;  background-color:#f8f8f8; }
#header_menu a.item:hover { background-color:#e6e6e6; }

#header_menu .contact { position:absolute; top:10px; right:90px; }
#header_menu .contact .btn_link { margin:min(3px,0.05vw); font-size:min(1.3rem,2vw); min-width:min(110px,9vw); }

@media only screen and (max-width:960px) {
  #header_menu .tr .th { padding:5px 0; }
  #header_menu .menu_sub { cursor: pointer; }
  #header_menu .menu_sub .menu_sub_h { display:block; padding:min(10px,1vw); }
  #header_menu .menu_sub .menu_sub_list { display:none; 
    position:absolute; left:0; top:100%; width:100%; background:#f4f4f4; }
    #header_menu .menu_sub:hover .menu_sub_list { display:flex; flex-wrap:wrap; justify-content:center; }
  #header_menu .menu_sub .menu_sub_list a.item { display:block; padding:5px; border-radius:5px; margin:5px 2px; background:#fff; }

  #header_menu .feature .badge { padding-bottom:2em; }
  #header_menu .feature .badge h5 br { display:initial; }

}

@media only screen and (max-width:500px) {
  #header_menu { padding:2px 0 3px; }
  #header_menu .logo { padding:0 0 5px 5px; }
  #header_menu .feature { display:none; }
  #header_menu .tr { display:none; }
  #header_menu .tr .td { display:block; }
  #header_menu .contact {  top:5vw; right:85px; /*max-width:calc(100vw - 235px);*/ }
  #header_menu .contact .btn_link { min-width:8em; font-size:10px; padding:5px 5px 5px 7px; }
  #header_menu .menu_sub .menu_sub_h { display:none; }
}


/* ------------------------------------

  トップページコンテンツ
------------------------------------ */

/* ネームプレート横2つ  */
.name_plate { display:flex; justify-content:space-between; }
.name_plate .col { margin-bottom:40px; display:inline-block; }
.name_plate .col .frm { border:3px solid #056437; border-radius: 5px; display:block; text-align:center; }
.name_plate .col .frm h5 { text-align: center; border: none; margin: 0; padding: 0.5em 0; color:#fff; background-color: #056437; font-size: 1.6rem; font-weight: 800;  }
@media only screen and (min-width:768px) {
  .name_plate .col:first-child { width:50%; }
  .name_plate .col:last-child { width:45%;; }
  .name_plate .col .frm img { width: auto; height:min(230px,20vw); max-width:100%; }
}
@media only screen and (max-width:767px) {
  .name_plate { flex-wrap:wrap; }
  .name_plate .col { margin-bottom:20px; width:100%; }
  .name_plate .col:first-child { margin-right: 0px; }
  .name_plate .col .frm img { max-width: 100%; max-height: inherit; }
}