@charset "UTF-8";

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 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, dl, dt, dd, ol, ul, li, 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, section, summary, time, mark, audio, video { padding: 0; margin: 0; font: inherit; word-wrap: break-word; border: 0; vertical-align: baseline; outline: none; }
body { padding: 0; margin: 0; color: #fff; font-size: 3.6vw; font-weight: 400; font-family: var(--gothic); font-optical-sizing: auto; -webkit-text-size-adjust: 100%; font-style: normal; line-height: 1; }
article, aside, canvas, details, figcaption, figure, header, footer, hgroup, main, menu, nav, section, summary { display: block; }
blockquote, q { quotes: none; }
strong, b { font-weight: bold; }
ul, ol, li { list-style: none; }
table { border-spacing: 0; border-collapse: collapse; }
img, video, object { height: auto; border: none; display: block; }
ins { background: none; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
hr { height: 1px; padding: 0; margin: 1em 0; border: 0; border-top: 1px solid #ccc; display: block; }
*:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
a { color: #fff; text-decoration: none; display: block; -moz-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); }
a:hover { opacity: 0.6; }
.clearfix:after { content: ''; display: block; clear: both; }
.pc { display: none; }
.sp { display: block; }

.wrapper { width: 100%; background: #122545; overflow: hidden; z-index: 1; position: relative; }
.google-map { width: 100%; position: relative; }
.google-map iframe, .google-map object, .google-map embed { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.fade { opacity: 0; -moz-transition: all 1.5s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 1.5s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 1.5s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 1.5s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.fade-left { -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.fade-right { -moz-transform: translateX(10px); -ms-transform: translateX(10px); -webkit-transform: translateX(10px); transform: translateX(10px); }
.fade-bottom { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); }
.fade-blur { -webkit-filter: blur(15px); filter: blur(15px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); -moz-transition: all 1.8s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 1.8s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 1.8s cubic-bezier(0.76, 0, 0.24, 1); transition: all 1.8s cubic-bezier(0.76, 0, 0.24, 1); -moz-transition: all 1.5s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 1.5s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 1.5s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 1.5s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.fade-blur.active { -webkit-filter: blur(0); filter: blur(0); -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); }
.fade-active { opacity: 1; -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); -webkit-filter: blur(0); filter: blur(0); }

.scrolldown{position:absolute;top: 0vw;left:50%;perspective:1000px;transform:translateZ(0);}
.scrolldown span{text-align: center;margin: 0 auto;display: block;position: absolute;left: -4vw;font-family: "Marcellus";font-weight: 400;top: -24vw;}
.scrolldown:before{content: "★";position:absolute;bottom: 0;left: -6px;font-size: 3vw;/* width:10px; *//* height:10px; *//* border-radius:50%; *//* background:#fff; */z-index:2;animation:circlecombo 1.6s ease-in-out infinite;will-change:transform,opacity;backface-visibility:hidden;}
@keyframes circlecombo{0%{transform:translateY(-60px);opacity:0;}
30%{opacity:1;}
80%{opacity:0.9;}
100%{transform:translateY(5px);opacity:0;}}
.scrolldown:after{content:"";position:absolute;bottom:0;left:0;width:1px;height: 70px;background:#ffffffa1;z-index:1;}



/* font
----------------------------------------------- */
:root {
--mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;
--gothic: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
--blue:#122545;
}


/* common sp
----------------------------------------------- */
.midashi01 { padding: 0 6vw; margin: 0 auto 6vw; font-size: 7.24vw; font-family: "Marcellus"; font-weight: 400; text-align: center; letter-spacing: 0.4vw; background: url(../images/dot01.png) no-repeat center left, url(../images/dot01.png) no-repeat center right; background-size: 2.5vw; display: table; }

.midashi02 { margin: 0 auto 6vw; text-align: center; }
.midashi02 .en { margin-bottom: 2.5vw; font-size: 10.53vw; font-family: "Marcellus"; font-weight: 400; letter-spacing: 0.4vw; display: block; }
.midashi02 .jp { font-size: 3.6vw; display: block; }

.more01 { width: 70vw; padding: 4vw 0; margin: 0 auto; font-size: 4.61vw; font-weight: bold; text-align: center; background: #418288; -moz-border-radius: 20vw; -webkit-border-radius: 20vw; border-radius: 20vw; position: relative; }
.more01:after { content: '\f105'; font-family: 'icon'; font-weight: normal; position: absolute; top: 50%; right: 4vw; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

/* header sp
----------------------------------------------- */
.header { width: 100%; z-index: 10; position: relative; }
.header-logo {width: 52vw;position: absolute;top: 4vw;left: 2vw;}
.header-logo img { width: 100%; }
.header-navi-button { width: 14vw; height: 14vw; border: 1px solid #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; z-index: 10; position: fixed; top: 2.5vw; right: 2.5vw; -moz-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); }
.header-navi-button.active { mix-blend-mode: difference; }
.header-navi-button .line { height: 1px; left: 0; background: #fff; position: absolute; -moz-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1); transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1); }
.header-navi-button .line-top { width: 4vw; top: calc(50% - 1.5vw); left: calc(50% - 1.5vw); -moz-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); }
.header-navi-button .line-middle { width: 7vw; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); }
.header-navi-button .line-bottom { width: 4vw; top: calc(50% + 1.5vw); left: calc(50% + 1.5vw); -moz-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); }

.header-navi { width: 100%; height: 100%; background: url(../images/header-navi-bg.jpg) no-repeat center bottom; background-size: cover; visibility: hidden; opacity: 0; z-index: 10; position: fixed; top: 0; left: 0; -moz-transition: cubic-bezier(0.76, 0, 0.24, 1) 0.5s; -o-transition: cubic-bezier(0.76, 0, 0.24, 1) 0.5s; -webkit-transition: cubic-bezier(0.76, 0, 0.24, 1) 0.5s; transition: cubic-bezier(0.76, 0, 0.24, 1) 0.5s; }
.header-navi-inner { width: 100%; height: 100%; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.header-navi-inner::-webkit-scrollbar { display: none; }
.header-navi-scroll { width: 100%; height: 100%; overflow-y: auto; position: relative; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.header-navi-scroll::-webkit-scrollbar { display: none; }
.header-navi-content { width: 90vw; padding: 30vw 0 100px; margin: 0 auto; }

.header-navi-logo {width: 52vw;position: absolute;top: 4vw;left: 2vw;}
.header-navi-logo img { width: 100%; }

.header-navi-items { width: 100%; padding-bottom: 1px; margin: 0 auto 6vw; border-bottom: 1px solid #7ea5bc; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
.header-navi-items li { width: 48%; margin-bottom: 8vw; position: relative; }
.header-navi-items a { color: #fff; }
.header-navi-items .en { margin-bottom: 1.5vw; font-size: 6.58vw; font-family: "Marcellus"; font-weight: 400; letter-spacing: 0.4vw; display: block; }
.header-navi-items .jp { font-size: 3.42vw; opacity: 0.6; display: block; }

.header-navi-sub-items { width: 100%; margin: 0 auto 6vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.header-navi-sub-items li { color: #fff; font-size: 3.6vw; }
.header-navi-sub-items li:first-child:before { display: none; }
.header-navi-sub-items li:before { content: '|'; margin: 0 2vw 0 3vw; display: inline-block; }
.header-navi-sub-items a { color: #fff; display: inline-block; }

.header-navi-social-items { width: 100%; margin: 0 auto;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.header-navi-social-items li { margin-right: 4vw; font-size: 7.57vw; }
.header-navi-social-items li.hpb_link {font-size: 7vw; }
.header-navi-social-items a { color: #f8f0af; }


.animation { opacity: 0; visibility: hidden; -moz-transform: translateY(5px); -ms-transform: translateY(5px); -webkit-transform: translateY(5px); transform: translateY(5px); -moz-transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1); transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
.header-navi-open { width: 100%; height: 100%; position: fixed; }
.header-navi-open .line { width: 7vw; }
.header-navi-open .line-top { top: 50%; left: 50%; -moz-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); }
.header-navi-open .line-middle { opacity: 0; visibility: hidden; }
.header-navi-open .line-bottom { top: 50%; left: 50%; -moz-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); }
.header-navi-open .header-navi { opacity: 1; visibility: visible; }
.header-navi-open .animation { opacity: 1; visibility: visible; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
.header-navi-open .animation01 { -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.header-navi-open .animation02 { -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.header-navi-open .animation03 { -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.header-navi-open .animation04 { -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.header-navi-open .animation05 { -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
.header-navi-open .animation06 { -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.header-navi-open .animation07 { -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }

.pc-header-navi{display: none;}

/* hero sp
----------------------------------------------- */
.hero { width: 100%; position: relative; }
.top-hero {height: 210vw;margin-bottom: -50vw;background: url(../images/top-hero-bg.png) no-repeat top center;background-size: cover;}

.top-hero-title { width: 100%; text-align: center; position: absolute; top: 32vw; left: 0; }
.top-hero-title .en { margin-bottom: 3.5vw; color: #fff; font-size: 3.95vw; font-family: "Marcellus"; font-weight: 400; letter-spacing: 0.4vw; opacity: 0.5; display: block; }
.top-hero-title .jp { color: #f8f0af; font-size: 3.95vw; font-family: var(--mincho); display: block; }

.top-hero-logo { width: 90vw; position: absolute; top: 46vw; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.top-hero-logo img { width: 100%; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.top-hero-text { width: 100%; text-align: center; position: absolute; bottom: -10vw; left: 0; }
.top-hero-subtitle {margin-bottom: 4vw;color: #f8f0af;font-size: 6.05vw;font-family: var(--mincho);margin-top: 3vw;}
.top-hero-comment p { font-size: 3.6vw; line-height: 1.8; }

.second-hero {height: 62vw;}
.second-hero-title {width: 100%;text-align: center;z-index: 1;position: absolute;top: 50%;left: 0;-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);transform: translateY(-50%);margin-top: 4vw;}
.second-hero-title .en {margin-bottom: 4vw;font-size: 9.6vw;font-family: "Marcellus";letter-spacing: .06em;display: block;}
.second-hero-title .jp {font-size: 3.8vw;font-weight: 600;opacity: 0.8;display: block;}

/* bread sp
----------------------------------------------- */
.breadcrumb { padding: 5vw 0; z-index: 1; position: relative; }
.breadcrumb-items {width: 88%;margin: 0 auto;font-size: 0;}
.breadcrumb-items li { font-size: 3.5vw; position: relative; display: inline-block; }
.breadcrumb-items li:last-child:after { display: none; }
.breadcrumb-items li:after { content: "\f105"; margin: 0 2.5vw 0 1.5vw; font-weight: normal; font-family: 'icon'; display: inline-block; }
.breadcrumb-items a { display: inline-block; }
.breadcrumb-items li.current a{font-weight: bold;}


/* footer sp
----------------------------------------------- */
.footer { position: relative; }
.footer-contact {width: 100%;padding: 14vw 0 11vw;text-align: center;background: url(../images/footer-contact-bg.jpg) no-repeat top center;background-size: cover;}
.footer-contact-title { margin-bottom: 65vw; text-align: center; }
.footer-contact-title .en { padding: 0 5vw; margin: 0 auto 5vw; color: #f8f0af; font-size: 4.61vw; font-family: "Marcellus"; font-weight: 400; letter-spacing: 0.4vw; background: url(../images/dot02.png) no-repeat center left, url(../images/dot02.png) no-repeat center right; background-size: 3vw; display: table; }
.footer-contact-title .jp { width: 75vw; margin: auto; }

.footer-contact-trigger { height: 1px; position: relative; }
.fixed-contact { width: 90vw; -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3)); opacity: 0; visibility: hidden; z-index: 8; position: fixed; bottom: 4vw; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); -moz-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1); transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1); }
.fixed-contact.active { opacity: 1; visibility: visible; }
.fixed-contact.stopped { position: absolute; }
.fixed-contact img { width: 100%; }

.footer-content { padding-top: 16vw; }

.footer-logo { width: 70vw; margin: 0 auto 8vw; position: relative; }
.footer-logo img { width: 100%; }
.footer-address {margin-bottom: 3vw;font-size: 3.6vw;text-align: center;line-height: 1.6;}
.footer-tel{font-family: "Jost", sans-serif;letter-spacing: 0.04em;text-align: center;font-size: 7.4vw;margin-bottom: 3vw;color: #e9e2aa;}
.footer-tel i{padding-right: 2vw; font-size: 80%;}

.footer-navi { width: 90vw; padding: 8vw 2vw 4vw; margin: 0 auto 8vw; border-top: 1px solid #606d82; border-bottom: 1px solid #606d82; }
.footer-navi-items {width: 100%;margin: 0 auto;display: grid;grid-auto-flow: column;grid-template-rows: repeat(5, auto);-webkit-justify-content: space-between;justify-content: space-between;}
.footer-navi-items li { margin-bottom: 4vw; font-size: 3.6vw; line-height: 1.2; position: relative; }
.footer-navi-items a { padding-left: 2.5vw; }
.footer-navi-items a:before { content: '\f105'; font-family: 'icon'; opacity: 0.5; position: absolute; top: 0; left: 0; }

.footer-social { margin-bottom: 8vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.footer-social-title { padding-top: 0.5vw; margin-right: 2vw; color: #f8f0af; font-size: 3.6vw; font-family: "Marcellus"; font-weight: 400; letter-spacing: 0.4vw; }
.footer-social-items {display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.footer-social-items li { margin: 0 2vw; font-size: 7.57vw; }
.footer-social-items li.hpb_link{font-size: 7vw;}
.footer-social-items a { color: #f8f0af; }

.top-footer-tel-comment{text-align: center;font-size: 3.6vw; line-height: 1.6;margin-bottom: 6vw}
.top-footer-tel-comment a{display:inline;}

.copyright {width: 100%;padding: 4vw 0 3.5vw;font-size: 3.2vw;text-align: center;letter-spacing: 0.2vw;background: #2d3c54;display: block;position: relative}
.copyright:before{content: '';width: 3.4vw;height: 3.4vw;display: inline-block;background: url(../images/icon-copy.png) center / 100% no-repeat;margin-right: 1vw;position: relative;top: 0.4vw;}
.copyright span{font-size: 110%;}


/* second sp
----------------------------------------------- */
.second-container{background: url(../images/second-container-bg.png) top center no-repeat,#122545;background-size: contain;}
.second {min-height: 100vw;margin: 0 auto;position: relative;font-size: 3.5vw; line-height: 1.8;font-feature-settings: "palt";letter-spacing: .06em;text-align: justify;text-justify: auto; z-index: 1; }
.second p { margin-bottom: 4vw; }
.second-text {padding: 6vw 0 12vw;width: 88%;margin: 0 auto;}


/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {
body { font-size: 15px; }
.sp { display: none; }
.pc { display: block; }

.scrolldown{top: 30px;}
.scrolldown span{left: -20px;top: -142px;font-size: 19px;}
.scrolldown:before{font-size: 20px;left: -10px;bottom: -10px;}
@keyframes circlecombo{0%{transform:translateY(-110px);opacity:0;}
30%{opacity:1;}
80%{opacity:0.9;}
100%{transform:translateY(5px);opacity:0;}}
.scrolldown:after{height: 110px;}


/* common pc
----------------------------------------------- */
body{background:#2e3c55;}
.wrapper{background:#2e3c55;max-width:2000px;position:relative;top:0;left:50%;-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-webkit-transform:translate(-50%,0%);transform:translate(-50%,0%);}
.container{background:#122545;}
.midashi01 {padding: 0 40px;margin-bottom: 40px;font-size: 55px;letter-spacing: 3px;background-size: 18px;}
.midashi02 {margin-bottom: 50px;}
.midashi02 .en {margin-bottom: 17px;font-size: 56px;letter-spacing: 2px;}
.midashi02 .jp {font-size: 16px;}
.more01 {width: 310px;padding: 20px 0;font-size: 20px;}
.more01:after {right: 20px;}

/* header pc
----------------------------------------------- */
.header-content {display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;align-items:flex-start;gap:40px;width: 90%;margin: 0 auto;}
.header-logo {width: 224px;left: 40px;top: 22px;}
.header-navi-button {display: none;width: 110px; height: 110px; top: 10px; right: calc(50% - 370px); }
.header-navi-button .line-top { width: 30px; top: calc(50% - 12px); left: calc(50% - 12px); }
.header-navi-button .line-middle { width: 60px; }
.header-navi-button .line-bottom { width: 30px; top: calc(50% + 12px); left: calc(50% + 12px); }
.header-navi { width: 760px; left: calc(50% - 380px); }
.header-navi-content { width: 100%; padding: 220px 40px 100px; }
.header-navi-logo {width: 320px;top: 30px;left: 20px;}
.header-navi-items { margin-bottom: 40px; }
.header-navi-items li { margin-bottom: 60px; }
.header-navi-items .en { margin-bottom: 10px; font-size: 50px; letter-spacing: 4px; }
.header-navi-items .jp { font-size: 26px; }
.header-navi-sub-items { margin-bottom: 40px; }
.header-navi-sub-items li { font-size: 28px; }
.header-navi-social-items li { margin-right: 25px; font-size: 60px; }
.header-navi-social-items li.hpb_link {font-size: 60px;}
.header-navi-open .line-top { width: 50px; top: 50%; left: 50%; }
.header-navi-open .line-bottom { width: 50px; top: 50%; left: 50%; }

.pc-header-navi{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap: 20px;top: 42px;right: 42px;position: absolute;width: 60vw;}
.pc-header-navi a{font-size: 15px;width: -webkit-calc((100% - 40px) / 3);width: calc((100% - 40px) / 3);text-align: center;}


/* hero pc
----------------------------------------------- */
.top-hero {height: 1460px;margin-bottom: -1px;background: url(../images/top-hero-bg-pc.jpg) top center / 2000px no-repeat;position: relative;}
.top-hero-title {top: 175px;}
.top-hero-title .en {margin-bottom: 24px;font-size: 18px;letter-spacing: 1px;}
.top-hero-title .jp {font-size: 25px;}
.top-hero-logo {width: 560px;top: 278px;}
.top-hero-text {bottom: 40px;}
.top-hero-subtitle {margin-bottom: 23px;font-size: 36px;margin-top: 68px;}
.top-hero-comment p {font-size: 18px;line-height: 2.2;}

.second-hero {height: 420px;}
.second-hero-title {margin-top: 30px;}
.second-hero-title .en {margin-bottom: 30px;font-size: 70px;}
.second-hero-title .jp { font-size: 15px; }

/* bread sp
----------------------------------------------- */
.breadcrumb {padding: 30px 0;}
.breadcrumb-items{max-width: 960px;}
.breadcrumb-items li {font-size: 16px;}
.breadcrumb-items li:after{margin: 0 16px 0 10px;}

/* footer pc
----------------------------------------------- */
.footer-contact {padding: 75px 0 25px;background: url(../images/footer-contact-bg-pc.jpg) center top / cover no-repeat;max-width: 960px;margin: 0 auto;}
.footer-contact-title {margin-bottom: 342px;}
.footer-contact-title .en {padding: 0 30px;margin-bottom: 0px;font-size: 24px;letter-spacing: 4px;background-size: 18px;}
.footer-contact-title .jp {width: 550px;}
.fixed-contact {width: 420px;bottom: 30px;}
.footer-content {padding-top: 100px;}
.footer-logo {width: 290px;margin-bottom: 50px;}

.footer-info-wrapper{display: -webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;max-width: 960px;margin: 0 auto 45px;}

.footer-address {margin-bottom: 27px;font-size: 15px;text-align: left;}
.footer-tel{font-size: 26px;margin-bottom: 20px;text-align: left;}
.footer-tel i{padding-right: 10px;}

.footer-navi {width: 490px;padding: 25px 0 0;margin: 0;border-top: none;border-bottom: none;}
.footer-navi-items {grid-template-rows: repeat(4, auto);}
.footer-navi-items li {margin-bottom: 20px;font-size: 15px;}
.footer-navi-items a {padding-left: 15px;}

.footer-bottom{border-top:1px solid #606d82;}
.footer-bottom-inner{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;max-width:960px;margin:0 auto;}

.footer-social{margin-bottom:0;-webkit-justify-content:flex-start;justify-content:flex-start;}
.footer-social-title {margin-right: 6px;font-size: 16px;letter-spacing: 2px;padding-top: 2px;}
.footer-social-items li {margin: 7px;font-size: 34px;}
.footer-social-items li.hpb_link{font-size: 30px;}
.top-footer-tel-comment{font-size: 14px;margin-bottom: 0;text-align: left;}

.copyright {padding: 30px 0 26px;font-size: 15px;letter-spacing: 2px;background: none;text-align: right;width: max-content;}
.copyright:before{width: 15px;height: 15px;margin-right: 10px;top: 2px;}


/* second pc
----------------------------------------------- */
.second-container{background: url(../images/second-container-bg.png) top center no-repeat,#122545;background-size: contain;}
.second {min-height: 600px;font-size: 16px;}
.second p { margin-bottom: 30px; }
.second-text {padding: 50px 0 100px;margin: 0 auto;max-width: 960px;}

}

@media screen and (min-width: 1100px) {
    .pc-header-navi{width:70vw;}
    .pc-header-navi a{width:-webkit-calc((100% - 60px) / 4);width:calc((100% - 60px) / 4);}
}


@media screen and (min-width: 1400px) {
    .pc-header-navi{width:auto;}
    .pc-header-navi a{width:auto;}
}

/* =============================================
retina用
================================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
.midashi01 { background-image: url(../images/dot01@2x.png) , url(../images/dot01@2x.png) ; }
.header-navi { background-image: url(../images/header-navi-bg@2x.jpg) ; }
.top-hero {background-image: url(../images/top-hero-bg-pc@2x.jpg);}
.footer-contact {background-image: url(../images/footer-contact-bg-pc@2x.jpg);}
.footer-contact-title .en { background-image: url(../images/dot02@2x.png) , url(../images/dot02@2x.png) ; }
}