@charset "utf-8";
/* ===================================================================
  style info : ヘッダーやフッターなどサイト内共通
=================================================================== */

/*----------------------------------------------------
	共通
----------------------------------------------------*/
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
  color: #151515;
  font-size: 1.8rem;
  line-height: 1.6;
  letter-spacing: 0.15em;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  padding-left: 5vw;
  padding-right: 5vw;
  padding-bottom: 5vw;
}

/*----------------------------------------------------
    フォント
----------------------------------------------------*/
.en_fnt {
  font-family: 'Josefin Sans', sans-serif;
}

/*----------------------------------------------------
    リンク
----------------------------------------------------*/
a:link,
a:visited,
a:hover,
a:active {
  color: #151515;
  text-decoration: none;
}

/*----------------------------------------------------
    toggle-panel
----------------------------------------------------*/
#panel-btn {
  display: none;
}

/*----------------------------------------------------
    .sp_tel
----------------------------------------------------*/
.sp_tel {
  pointer-events: none;
}

/*----------------------------------------------------
    .sp_element
----------------------------------------------------*/
.sp_element {
  display: block;
}

/* -----------------------------------------------------------
    .btn
----------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75vw;
  position: relative;
  z-index: 0;
}

/* -----------------------------------------------------------
    背景色
----------------------------------------------------------- */
.bg_clr01 {
  background-color: #151515;
}

.bg_clr01:hover {
  background-color: #f8f8f8;
}

/* -----------------------------------------------------------
    フォント色
----------------------------------------------------------- */
.clr01 {
  color: #ffffff !important;
}

.clr01:hover {
  color: #151515 !important;
}

/* -----------------------------------------------------------
    フォント太さ
----------------------------------------------------------- */
.fs_b01 {
  font-weight: 100;
}

.fs_b02 {
  font-weight: 300;
}

.fs_b03 {
  font-weight: 400;
}

.fs_b04 {
  font-weight: 500;
}

.fs_b05 {
  font-weight: 700;
}

.fs_b06 {
  font-weight: 900;
}

/* -----------------------------------------------------------
    高さ
----------------------------------------------------------- */
.hit_01 {
  height: 45px;
}

.hit_02 {
  height: 50px;
}

.hit_03 {
  height: 60px;
}

.hit_04 {
  height: 70px;
}

.hit_05 {
  height: 80px;
}

.hit_06 {
  height: 90px;
}

.hit_07 {
  height: 100px;
}

/* -----------------------------------------------------------
    幅
----------------------------------------------------------- */
.wid_01 {
  width: 160px;
}

.wid_02 {
  width: 180px;
}

.wid_03 {
  width: 200px;
}

.wid_04 {
  width: 220px;
}

.wid_05 {
  width: 240px;
}

.wid_06 {
  width: 260px;
}

.wid_07 {
  width: 280px;
}

.wid_08 {
  width: 300px;
}

/* -----------------------------------------------------------
    hd
----------------------------------------------------------- */
.hd_01 {
  font-size: 9.0rem;
  font-weight: 700;
  line-height: 1.2;
}

.hd_02 {
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.2;
}

.hd_03 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
}

/* -----------------------------------------------------------
    .list
----------------------------------------------------------- */
.list {
  line-height: 1.4;
}

.list li {
  display: flex;
  margin-top: 0.5em;
}

.list li:first-of-type {
  margin-top: 0
}

.list li:before {
  content: "・";
  margin-right: 0.5em;
  margin-left: -0.15em;
}

/* -----------------------------------------------------------
    .zoom
----------------------------------------------------------- */
.zoom {
  overflow: hidden;
}

.zoom:hover img,
a:hover .zoom img {
  transform: scale(1.15);
}

/* -----------------------------------------------------------
    .bg_zoom
----------------------------------------------------------- */
.bg_zoom {
  position: relative;
  overflow: hidden;
}

.bg_zoom:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .5s ease;
  z-index: -2;
}

.bg_zoom:hover:after {
  transform: scale(1.15);
}

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
header {
  background-color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 220px;
  padding: 0 5vw;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

header.is-fixed {
  min-height: 110px;
}

header > .site_id {
  line-height: 0;
  width: 230px;
}

header > .site_id a {
  display: block;
}

header.is-fixed > .site_id {
  transform: scale(0.8);
  transform-origin: center left;
}

/* -----------------------------------------------------------
    #g_nav
----------------------------------------------------------- */
#g_nav > .site_id {
  display: none;
}

#g_nav .main_nav {
  display: flex;
  align-items: center;
}

#g_nav .main_nav li:not(:first-of-type) {
  margin-left: 3em;
}

#g_nav .main_nav li a:hover {
  opacity: 0.5;
}

#g_nav .sub_nav {
  display: none;
}

#g_nav .sub_nav li a:hover {
  opacity: 0.5;
}

/* -----------------------------------------------------------
    .main
----------------------------------------------------------- */
.main {
  display: flex;
  align-items: flex-end;
  padding-top: 220px;
}

#lower .main {
  height: 400px;
}

#lower .main .ttl span {
  display: block;
}

#lower .main .ttl {
  font-size: 6.0rem;
  font-weight: 700;
  line-height: 1.2;
}

/* -----------------------------------------------------------
    .container
----------------------------------------------------------- */
#lower .container {
  display: flex;
  margin-top: 10vw;
}

#lower .container .head {
  flex: 0 1 30vw;
}

/* -----------------------------------------------------------
    .contents
----------------------------------------------------------- */
#lower .contents {
  flex: 1 1;
}

/* -----------------------------------------------------------
    .wrap
----------------------------------------------------------- */
#top .wrap {
  margin-top: 3vw;
}

#lower .wrap {
  margin-top: 5vw;
}

/* -----------------------------------------------------------
    footer
----------------------------------------------------------- */
footer {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-top: 12.5vw;
}

footer nav {
  font-size: 1.4rem;
}

footer nav ul li a:hover {
  opacity: 0.5;
}

footer .copyright small {
  font-size: 1.6rem;
}

/* -----------------------------------------------------------
    img:hover
----------------------------------------------------------- */
a img:hover {
  transition: all .5s ease;
}