/*
Theme Name: hbd Theme
Theme URI: 
Author: the WordPress team
Author URI: 
Description: 
Version: 1.0
Tags: 
*/


/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

img{ vertical-align: bottom;}
ul{ list-style: none;}
ul li{ list-style-type: none;}
figure { margin: 0;}


/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0;}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend { border: 0;}
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline;}
button,
input { line-height: normal;}
button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0;}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top;}
input[type="search"]:focus { outline: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*	Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
  	  touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; top: 0; left: 0; display: block;}
.slick-track:before,
.slick-track:after { display: table; content: '';}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide { float: right;}
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img { pointer-events: none;}
.slick-initialized .slick-slide { display: block; outline: none;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto;}
.slick-arrow.slick-hidden { display: none;}

.slick-arrow{ width: 50px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%);
 background: #000; border: none; border-radius: 50%; z-index: 100;
 text-indent: -9999em; outline: none;
}
.slick-prev { left: 0px;}
.slick-next { right: 0px;}
.slick-arrow:before{ position: absolute; content: ''; display: block; width: 0px; height: 0px; top: 50%; transform: translateY(-50%);}
.slick-prev:before { left: 30%; border: solid 9px transparent; border-right: solid 16px #fff; border-left: 0;}
.slick-next:before { right: 30%; border: solid 9px transparent; border-left: solid 16px #fff; border-right: 0;}

/** Dots */
.slick-dotted.slick-slider{ margin-bottom: 30px;}
.slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; text-align: center;}
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer;}
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer;
 color: transparent; border: 0; outline: none; background: transparent; 
}
.slick-dots li button:hover,
.slick-dots li button:focus{ outline: none;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before { opacity: 1;}
.slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0;
	width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black;
}
.slick-dots li.slick-active button:before { opacity: .75; color: black;}

@media (max-width: 481px) {
}



html{
  height: -webkit-fill-available;
}
body{
  min-height: 100vh;
  min-height: -webkit-fill-available;
}


/*		font-style
-------------------------------------------------- */
body { width: 100%;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.fixed { position: fixed;}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min { font-family: "Noto Serif JP","Hiragino Mincho ProN","ヒラギノ明朝 Pro", "游明朝", "Yu Mincho", "YuMincho", serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}

@media (max-width: 641px) {
}
@media (max-width: 481px) {
}



#hd { position: absolute; left: 0; top: 0; width: 100%; z-index: 9;}
#hd .inner-hd { position: relative; width: 90%; max-width: 1420px; margin: 0 auto; padding: 40px 0px 0;}
#hd .hd-logo { position: relative; z-index: 2; display: block; width: 25%; max-width: 270px;}
#hd .hd-logo h1 a { display: block; width: 100%;}
#hd .hd-logo h1 a img { width: 100%;}
#hd .hd-nav { position: absolute; left: 0; top: 48px; width: 100%; z-index: 1;}
#hd .hd-nav ul { padding-left: 300px; font-size: 0; }
#hd .hd-nav ul li { display: inline-block; padding: 0 20px; font-size: clamp(13px,1.6vw,18px); font-weight: 600;}
#hd .hd-nav ul li a { position: relative; padding-bottom: 8px; color: #000; text-decoration: none;}
#hd .hd-nav ul li a:after { content: ''; display: block; width: 0px; height: 2px; background: #7bbbb0;
 position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
 transition: 0.4s ease;
}
#hd .hd-nav ul li.now a:after { width: 100%;}
#hd .hd-nav ul li a:hover:after { width: 100%;}
@media (max-width: 1201px) {
	#hd .inner-hd { padding: 30px 0px 0;}
	#hd .hd-nav { top: 4.2vw;}
	#hd .hd-nav ul { padding-left: 30%;}
	#hd .hd-nav ul li { padding: 0 1.2vw;}
}
@media (max-width: 641px) {
	#hd { display: none;}
}
@media (max-width: 481px) {
}


#menu { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100svh; z-index: -1; visibility: none; transition: 0.3s linear; opacity: 0;}
#menu.open { z-index: 11; visibility: visible; opacity: 1;}
#menu .inner { position: relative; width: 100%; height: 100%; background: #7bbbb0;}
#menu .menu-ctn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-55%); width: 88%; max-width: 1200px; padding-top: 100px;}
#menu .menu-ctn .logo { width: 50%; position: absolute; left: 0; top: 0;}
#menu .menu-ctn .logo h2 { color: #fff; line-height: 1;}
#menu .menu-ctn .logo h2 a { display: inline-block; width: 310px; vertical-align: baseline;}
#menu .menu-ctn .logo h2 a img { width: 100%;}
#menu .menu-ctn .logo h2 span { display: inline-block; font-size: 13px; vertical-align: baseline;}
#menu .menu-ctn ul { display: inline-block; margin-right: 90px; vertical-align: top;}
#menu .menu-ctn ul.aside { margin-right: 0;}
#menu .menu-ctn ul li { position: relative; padding: 8px 0; font-size: 20px; font-weight: 700; line-height: 1;}
#menu .menu-ctn ul li a { position: relative; display: inline-block; padding: 4px 4px 8px; color: #fff; text-decoration: none; z-index: 2;}
#menu .menu-ctn ul li a:after { content: ''; display: block; width: 0px; height: 2px; background: #fff;
 position: absolute; left: 50%; bottom: 0%; transform: translate(-50%,0%); transition: 0.3s ease;
}
#menu .menu-ctn ul li a:hover:after { width: 20px; }
@media (max-width: 1001px) {
	#menu .menu-ctn ul { margin-right: 6vw;}
}
@media (max-width: 801px) {
	#menu .menu-ctn ul { margin-right: 3.5vw;}
}
@media (max-width: 641px) {
	#menu .menu-ctn { position: relative; left: auto; top: auto; transform: translate(0%,0%); margin: 0 auto; padding-top: 80px;}
	#menu .menu-ctn .logo { position: relative; left: auto; top: auto;}
	#menu .menu-ctn ul { display: block; width: 100%; margin: 0; padding: 20px 0;}
	#menu .menu-ctn ul.aside { margin-bottom: 30px;}
}
@media (max-width: 481px) {
	#menu .menu-ctn ul { padding: 12px 0;}
	#menu .menu-ctn ul.aside { margin-bottom: 20px;}
	#menu .menu-ctn ul li { font-size: 14px;}
	#menu .menu-ctn .logo { width: 30%;}
}



@keyframes menu1{
	 0% { transform: translate(0px,-50%) rotate(0deg);}
	50% { transform: translate(6px,-50%) rotate(0deg);}
	80% { transform: translate(6px,-50%) rotate(0deg);}
	100%{ transform: translate(6px,-50%) rotate(20deg);}
}
@keyframes menu2{
	 0% { transform: translate(0px,-50%) rotate(0deg);}
	50% { transform: translate(-6px,-50%) rotate(0deg);}
	80% { transform: translate(-6px,-50%) rotate(0deg);}
	100%{ transform: translate(-6px,-50%) rotate(-20deg);}
}
@keyframes menu1sp{
	 0% { transform: translate(-50%,0px) rotate(0deg);}
	50% { transform: translate(-50%,4px) rotate(0deg);}
	80% { transform: translate(-50%,4px) rotate(0deg);}
	100%{ transform: translate(-50%,4px) rotate(20deg);}
}
@keyframes menu2sp{
	 0% { transform: translate(-50%,0px) rotate(0deg);}
	50% { transform: translate(-50%,-4px) rotate(0deg);}
	80% { transform: translate(-50%,-4px) rotate(0deg);}
	100%{ transform: translate(-50%,-4px) rotate(-20deg);}
}
.menu-trig { width: 50px; height: 50px; position: fixed; right: 20px; top: 50%; transform: translate(0,-50%); z-index: 100;}
.menu-trig div { position: relative; width: 100%; height: 100%;}
.menu-trig div span { display: block; width: 2px; height: 100%; background: #fff;
 position: absolute; top: 50%;
}
.menu-trig div span:nth-child(1) { left: 18px; transform: translate(0,-50%);}
.menu-trig div span:nth-child(2) { left: 30px; transform: translate(0,-50%);}
.menu-trig.active div span:nth-child(1) { animation: 0.3s ease menu1 forwards;}
.menu-trig.active div span:nth-child(2) { animation: 0.3s ease menu2 forwards;}
@media (max-width: 801px) {
	.menu-trig { right: 12px;}
}
@media (max-width: 641px) {
	.menu-trig { left: 50%; top: 6px; width: 55px; height: 40px; transform: translate(-50%,0%);}
	.menu-trig div {}
	.menu-trig div span { width: 100%; height: 1px;}
	.menu-trig div span:nth-child(1) { left: 50%; top: 16px; transform: translate(-50%,0px);}
	.menu-trig div span:nth-child(2) { left: 50%; top: 24px; transform: translate(-50%,0px);}
	.menu-trig.active div span:nth-child(1) { animation: 0.3s ease menu1sp forwards;}
	.menu-trig.active div span:nth-child(2) { animation: 0.3s ease menu2sp forwards;}
}
@media (max-width: 481px) {
}




@keyframes vline{
	0% { right: 80px; width: 0px;}
  45%{ right: 0px; width: 80px}
  50%{ right: 0px; width: 80px;}
  90%{ right: 0px; width: 0px;}
 100%{ right: 0px; width: 0px;}
}
#side { position: fixed; right: 0; top: 0; z-index: 12; width: 100px; height: 100vh; height: 100svh; background: #7bbbb0;}
#side .inner { position: relative; width: 100%; height: 100%;}
#side .logo { display: none;}
#side .sound { width: 60px; position: absolute; top: 50px; right: 50%; transform: translate(52%,0) rotate(90deg);}
#side .sound button { display: block; border: none; background: none; color: #fff; font-size: 12px; letter-spacing: 0.05rem; vertical-align: middle;}
#side .scroll { width: 130px; position: absolute; bottom: 100px; right: 50%; transform: translate(52%,0) rotate(90deg);}
#side .scroll span { display: block; color: #fff; font-size: 12px; letter-spacing: 0.05rem;}
#side .scroll:after { content: ''; display: block; width: 80px; height: 1px; background: #fff;
 position: absolute; right: 0px; top: 50%;
 animation: 4.0s vline ease-in-out infinite;
}
@media (max-width: 801px) {
	#side { width: 80px;}
}
@media (max-width: 641px) {
	#side { width: 100%; height: 54px;}
	#side .logo { display: block; width: 16%; max-width: 80px; position: absolute; left: 25px; top: 50%; transform: translateY(-50%);}
	#side .logo a { display: block;}
	#side .logo a img { width: 100%;}
	#side .sound { position: absolute; bottom: auto; top: 12px; left: auto; right: 5%; transform: translate(0%,0) rotate(0deg);}
	#side .sound button { padding: 6px 0; font-size: 10px;}
	#side .scroll { display: none;}
}


#ft { background: rgba(255,255,255,1);}
#ft .inner-ft { width: 100%; padding: 50px 0 40px; padding-right: 128px;}
#ft .ft-nav { width: 88%; max-width: 1300px; margin: 0 auto -30px;}
#ft .ft-nav .flex { display: flex; }
#ft .ft-nav .bloc { width: 200px;}
#ft .ft-nav .aside{ width: 30%;}
#ft .ft-nav .bloc ul li { padding: 6px 0; line-height: 1.2; letter-spacing: 0.05rem;}
#ft .ft-nav .bloc ul li a { color: #000; letter-spacing: 0.05rem; text-decoration: none;}
#ft .ft-nav .aside ul li { padding: 6px 0; line-height: 1.2;}
#ft .ft-nav .aside ul li a { color: #000; letter-spacing: 0.05rem; text-decoration: none;}
#ft .ft-nav .bloc ul li a:hover { color: #7bbbb0;}
#ft .ft-nav .aside ul li a:hover { color: #7bbbb0;}
#ft .copyright { width: 90%; margin: 0 auto;}
#ft .copyright p { color: #7bbbb0; text-align: right;}
@media (max-width: 801px) {
	#ft .inner-ft { padding-right: 80px;}
	#ft .ft-nav { margin-bottom: 20px;}
	#ft .copyright { width: 82.5%; margin: 0 auto;}
	#ft .copyright p { font-size: 12px; text-align: left;}
}
@media (max-width: 641px) {
	#ft .inner-ft { padding-right: 0px;}
	#ft .ft-ctn { padding: 30px;}
	#ft .ft-nav .flex { display: block; }
	#ft .ft-nav .bloc { width: 100%; padding: 12px 0;}
	#ft .ft-nav .aside{ width: 100%; padding: 12px 0;}
}
@media (max-width: 481px) {
	#ft .ft-ctn { padding: 24px;}
	#ft .ft-nav { width: 82.5%;}
	#ft .ft-nav .bloc { padding: 8px 0;}
	#ft .ft-nav .aside{ padding: 8px 0;}
	#ft .ft-nav .bloc ul li { padding: 4px 0; font-size: 13px;}
	#ft .ft-nav .aside ul li { padding: 4px 0; font-size: 13px;}
	
	#ft .copyright p { font-size: 11px;}
}


#bg { position: fixed; left: 0; top: 0; z-index: -1; width: 100%;}
#bg .inner { width: 100%; height: 100vh; height: 100dvh;}
#bg .movie { position: relative; width: 100%; height: 100%; background: #e3e3e3;}
#bg .movie video { position: absolute; left: 50%; top: 0%; transform: translate(-50%,0%); width: auto; height: 100%;}
@media (max-width: 481px) {
	#bg .movie video { top: 50%; transform: translate(-50%,-50%); width: 1200px; height: auto;}
}