@charset "utf-8";

/* =========================================================
   Xserver Mail Form CSS (Standalone)
   - includes gladto header/menu styles
   - keeps form layout styles
   - responsive under 800px
   ========================================================= */

/* ----------------------------------------------------------
   Reset / base
------------------------------------------------------------- */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code,
form, fieldset, legend, table, th, td, caption, a, article, aside, nav, section, figure, figcaption,
footer, header, main, audio, canvas, video, menu, details{
  margin:0; padding:0; background:transparent; font-size:100%; vertical-align:baseline;
}
fieldset, legend, img{ border:0; }
article, aside, nav, section, figure, figcaption, footer, header, main, menu, details{ display:block; }
[hidden]{ display:none; }

html{
  overflow-y: scroll;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}

/* gladto-like base */
:root{
  --beige:#e8dcc8;

  --menu-text:#fff;
  --menu-veil: rgba(0,0,0,.18);

  --drawer-bg: rgba(18,18,18,.86);
  --drawer-border: rgba(255,255,255,.12);
  --drawer-item-bg: rgba(255,255,255,.08);
  --drawer-item-border: rgba(255,255,255,.12);
}

body{
  background: var(--beige);
  color:#111;
  font: 14px/1.6 "source-han-sans-japanese", system-ui, -apple-system, "Segoe UI",
        Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
  letter-spacing:.01em;
  word-wrap:break-word;
}

/* elements */
h1, h2, h3, h4, h5, h6{ font-weight: normal; line-height:1.2; color:#222; }
p{ margin:0 0 1em; }
ul, ol{ list-style:none; }
img{ vertical-align: middle; max-width:100%; height:auto; }
table{ border-collapse: collapse; border-spacing:0; }
th, td{ font-weight: normal; text-align:left; }
th{ font-weight:bold; }

a{ color:#04c; }
a:link, a:visited{ text-decoration: underline; }
a:hover, a:active{ text-decoration: none; }

/* ----------------------------------------------------------
   gladto header / menu (works with your inserted header HTML)
------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;

  display:flex;
  align-items:center;
  justify-content:center; /* desktop center */

  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.18);

  background-image: url("https://gladto.info/img/menu_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--menu-veil);
  pointer-events:none;
}
.site-header > *{ position:relative; }

.site-header a{ text-decoration:none; color: var(--menu-text); }
.site-header img{ display:block; }

/* logo: hidden on desktop, show on mobile */
.header-logo, .site-header .logo{
  display:none;
  align-items:center;
}
.header-logo img, .site-header .logo img{
  height:18px;
  width:auto;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,.30));
}

/* desktop nav */
.nav-desktop{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(10px, 1.8vw, 22px);
  max-width: 980px;
  margin: 0 auto;
}

/* link style (menu font only) */
.nav-link{
  position:relative;
  display:inline-block;
  padding: 8px 2px;
  font-size:14px;
  white-space:nowrap;

  font-family: "sicnews", sans-serif;
  font-weight: 400;
  font-style: normal;

  color: var(--menu-text);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:4px;
  height:2px;
  background: rgba(255,255,255,.92);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform 260ms ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after{ transform: scaleX(1); }

.nav-shop{ font-weight:700; }
.ext{ font-size:12px; margin-left:2px; opacity:.9; }

/* hamburger button */
.nav-toggle{
  display:none;
  margin-left:auto;
  border:0;
  background:transparent;
  color:#fff;
  font-size:24px;
  line-height:1;
  padding:6px 10px;
  cursor:pointer;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* drawer */
.nav-mobile{
  position: fixed;
  top: 0;
  right: 0;

  width: min(560px, 92vw);
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  background: var(--drawer-bg) !important;
  border-left: 1px solid var(--drawer-border);
  padding: 56px 14px 14px;

  z-index: 80;
}
.nav-mobile:not([hidden]){
  animation: drawerIn 260ms ease forwards;
}
@keyframes drawerIn{
  from{ transform: translateX(104%); opacity:0; }
  to  { transform: translateX(0); opacity:1; }
}

.drawer-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;

  width:44px;
  height:44px;

  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#fff;

  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.drawer-close:hover{ background: rgba(255,255,255,.14); }

.m-link{
  display:block;
  padding: 10px 14px;
  margin: 6px 0;
  font-size:14px;
  border-radius:12px;

  font-family: "sicnews", sans-serif;
  font-weight: 400;
  font-style: normal;

  background: var(--drawer-item-bg);
  border: 1px solid var(--drawer-item-border);
  color:#fff;
  text-decoration:none;
}
.m-link:hover{ background: rgba(255,255,255,.14); }
.m-shop{ font-weight:700; }

/* breakpoint: switch to mobile header at 800px */
@media (max-width: 800px){
  .site-header{ justify-content: space-between; }
  .header-logo, .site-header .logo{ display:inline-flex; }
  .nav-desktop{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* ----------------------------------------------------------
   Form styles (keep Xserver look)
------------------------------------------------------------- */
input, textarea, select{
  margin:0;
  font-family:inherit;
  font-size:inherit;
}
input, button{
  line-height: normal;
  vertical-align: middle;
}

input[type=text],
input[type=password],
textarea{
  width: 380px;
  padding:5px;
  background:#fff;
  border:1px solid #ddd;
  box-shadow: inset 3px 3px 0 0 rgba(0,0,0,0.03);
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus{ border:1px solid #209dd9; }

textarea{
  width: 410px;
  overflow:auto;
  vertical-align:top;
}
select{
  padding:2px;
  background:#fff;
}
input[type=submit]{
  padding: 6px 10px;
  cursor:pointer;
}

/* wrapper / content box */
#wrapper{
  width: 720px;
  margin: 24px auto 0;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2);
  background:#fff;
  border-left: 1px solid #b3b3b3;
  border-right: 1px solid #b3b3b3;
  border-bottom: 1px solid #b3b3b3;
}
#main{ padding: 25px; }

.section{ margin-bottom: 40px; }
.section:last-child{ margin-bottom:0; }

.section__ttl{
  padding:10px;
  margin-bottom:20px;
  font-weight:bold;
  color:#fff;
  background:#ab7c48;
  font-size:18px;
}
.section__body{ padding: 0 30px; }

.red_txt{ color:#ff3333; }

#txt_explain{ color:#000; }

.table{
  width:100%;
  margin-bottom:15px;
  border-top:1px solid #ccc;
  border-left:1px solid #ccc;
}
.table th{
  padding:15px;
  background:#eceae6;
  color:#000;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  font-weight:bold;
  font-size:13px;
}
.table td{
  padding:15px;
  background:#fff;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  color:#222;
  font-size:13px;
}

/* buttons */
.button_box{
  clear: both;
  padding: 8px;
  text-align:center;
}

/* ----------------------------------------------------------
   Responsive form (no horizontal scroll)
------------------------------------------------------------- */
@media (max-width: 800px){
  #wrapper{
    width: calc(100% - 24px) !important;
    max-width: 720px;
    margin: 16px auto 0;
  }
  #main{ padding: 18px; }
  .section__body{ padding: 0; }

  input[type=text],
  input[type=password],
  textarea{
    width: 100% !important;
    box-sizing: border-box;
  }
  textarea{ min-height: 140px; }
}