@charset "UTF-8";

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; }
body { color: #111; font-family: "Zen Kaku Gothic New", YuGothic, YuGothicM, メイリオ, Meiryo, 'ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; font-size: 1.6rem; line-height: 1.6; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: top; -ms-interpolation-mode: bicubic; }
a { outline: none; }
a:link { color: #; text-decoration: none; }
a:visited { color: #; text-decoration: none; }
a:hover { color: #; text-decoration: underline; transition: all 0.3s ease; }
a:hover img { opacity: 0.8; transition: all 0.3s ease; }
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
.clearfix::after { content: ''; display: block; clear: both; }

.en {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500; 
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.inner { margin: 0 auto; width: 100%; max-width: 1240px; }

@media screen and (max-width: 1280px) {
	.inner { width: 100%; padding: 0 20px;}
}
@media screen and (max-width: 767px) {

}


/* --------------------------------------------------
	globalHeader 
-------------------------------------------------- */
#globalHeader { padding: 0 30px; width: calc(100% - 40px); height: 70px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 10px; box-shadow: 4px 4px 4px rgba(37, 70, 120, 0.2); position: fixed; top: 17px; left: 50%; transform: translateX(-50%); z-index: 101; }
#globalHeader .h-logo { display: flex; align-items: center; position: relative; z-index: 100; }
#globalHeader .h-logo a { color: #000; font-size: 2.0rem; font-weight: 700; text-decoration: none; transition: all .3s; }
#globalHeader .h-logo a:hover { opacity: 0.8; }

#globalNavi ul { display: flex; align-items: center; gap: 30px; list-style: none; }
#globalNavi ul a { color: #000; font-weight: 500; text-decoration: none; transition: all .3s; }
#globalNavi ul a:hover { color: #DA6A38; }
#globalNavi ul a span { display: none; }
#globalNavi .contact a { padding: 10px 18px; display: flex; align-items: center; gap: 10px; background: #DA6A38; color: #fff; border-radius: 10vw; }
#globalNavi .contact a:hover { background: #c76233; color: #fff; }


@media screen and (max-width: 1000px) {
	#globalHeader { padding: 0 12px; height: 60px; }
	#globalHeader .h-logo a { font-size: 1.8rem; }

	#globalNavi { transform: scale(1,0); transform-origin: top center; opacity: 0; pointer-events: none; transition: all .3s; display: block; padding: 90px 20px 24px; width: 100%; background: #fff; border-radius: 10px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); position: fixed; top: 0; left: 0; z-index: 99; }
  #globalNavi.open { transform: scale(1,1); opacity: 1; pointer-events: visible;}
  #globalNavi ul { flex-direction: column; align-items: flex-start; row-gap: 24px; }
  #globalNavi ul a { font-size: 1.8rem; font-weight: 700; }
  #globalNavi ul a span { display: block; color: #DA6A38; font-family: "Roboto", sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1; }
  #globalNavi .contact { margin-top: 30px; width: 100%; }
  #globalNavi .contact a { width: 100%; height: 60px; justify-content: center; }

}




/* --------------------------------------------------
	globalFooter
-------------------------------------------------- */
#globalFooter { padding-top: 60px; width: 100%; background: #254678; color: #fff; }
#globalFooter .inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
#globalFooter .info a { color: #fff; font-size: 2.0rem; font-weight: 500; text-decoration: none; transition: all .3s; }
#globalFooter .info a:hover { opacity: 0.8; }
#globalFooter .info .add { margin-top: 20px; letter-spacing: 0.02em; }
#globalFooter .menu { padding: 10px 0; display: flex; align-items: center; gap: 30px; list-style: none; }
#globalFooter .menu a { color: #fff; text-decoration: none; }
#globalFooter .menu a:hover { text-decoration: underline; }
#globalFooter .copy { margin-top: 70px; padding: 20px 0; width: 100%; flex-shrink: 0; text-align: center; font-size: 1.4rem; }
#globalFooter .maker {border-top: solid 1px #fff; }

@media screen and (max-width: 767px) {
  #globalFooter { padding-top: 40px; }
  #globalFooter .inner { flex-direction: column; }
  #globalFooter .info .add { display: none; }
  #globalFooter .menu { margin-top: 30px; padding: 0; gap: 0; flex-wrap: wrap; width: 100%; }
  #globalFooter .menu li { width: 50%; margin-bottom: 20px; }
  #globalFooter .copy { margin-top: 50px; font-size: 1.2rem; }
}


/* --------------------------------------------------
	オーバーレイ + スマートフォンメニュー
-------------------------------------------------- */

a#btn-menu { display: none; }
div#overlay {}

@media screen and (max-width: 1000px) {
a#btn-menu { width: 50px; height: 50px; background: #DA6A38; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; gap: 6px; align-items: center; z-index: 1000; }
a#btn-menu span { margin: 0 auto; width: 28px; height: 2px; background: #fff; border-radius: 10vw; display: block; transition: all 0.3s; }
a#btn-menu p { width: 100%; position: absolute; bottom: 4px; }

a#btn-menu.active span { width: 18px; height: 3px; }
a#btn-menu.active span:nth-of-type(1) { transform: translateY(9px) rotate(-45deg); }
a#btn-menu.active span:nth-of-type(2) { opacity: 0; }
a#btn-menu.active span:nth-of-type(3) { transform: translateY(-9px) rotate(45deg); }

body.open-menu { height: 100%; overflow: hidden; }
body.open-menu div#overlay { width: 100%; height: 100vh; background: rgba(255,255,255,0.7); position: fixed; top: 0; left: 0; z-index: 100; }
}

/* --------------------------------------------------
	contact
-------------------------------------------------- */
#footer-contact { padding: 120px 0; background: url(../img/top/contact-bg.jpg) no-repeat center/cover; }
#footer-contact .flex { display: flex; justify-content: space-between; align-items: flex-end; }
#footer-contact h2 { margin: 0 0 40px; padding: 0; color: #fff; display: block; font-size: 2.0rem; font-weight: 500; line-height: 1.0; letter-spacing: 0.04em; }
#footer-contact h2 span { margin-bottom: 12px; display: block; font-family: "Roboto", sans-serif; font-size: 7.4rem; font-weight: 500; letter-spacing: 0.01em; }
#footer-contact p { color: #fff; max-width: 500px; line-height: 1.8; }
#footer-contact .btn { display: flex; width: 380px; height: 70px; align-items: center; justify-content: center; gap: 10px; background: #DA6A38; border-radius: 10vw; color: #fff; font-size: 2.0rem; font-weight: 500; }
#footer-contact .btn:hover { background: #c76233; color: #fff; text-decoration: none; }
#footer-contact .btn img { width: 25px; }


@media screen and (max-width: 767px) {
  #footer-contact { padding: 60px 0; }
  #footer-contact .flex { flex-direction: column; align-items: center; }
  #footer-contact h2 { margin-bottom: 24px; font-size: 1.6rem; }
  #footer-contact h2 span { font-size: 5.0rem; margin-bottom: 8px; }
  #footer-contact p { max-width: none; }
  #footer-contact .btn { margin-top: 24px; width: 300px; height: 60px; font-size: 1.8rem; }
}