@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Anton|Oswald:200,300,400,500,600,700|Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
main { display: block; }

html { padding: 0px; margin: 0px; background: #eee; border: 0px solid black; font-size: 62.5%; }

body { width: 100%; height: 100%; font-weight: normal; font-size: 1rem; line-height: 1; position: relative; color: #29324f; padding: 0; margin: 0; background: white; -webkit-text-size-adjust: 100%; min-width: 1080px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

/*-- ▼ iPad対策 --*/
@media screen and (max-width: 768px) { body { min-width: 100%; } }

/*-- ▲ iPad対策 --*/
*, *::before, *::after { box-sizing: border-box; }

article, section, aside, header, footer { padding: 0; margin: 0; }

table { border-collapse: collapse; }

.none { display: none; }

.clearfix::after, .row::after { content: ''; display: block; clear: both; }

img { max-width: 100%; height: auto; display: block; padding: 0; margin: 0 auto; vertical-align: bottom; }

a { color: #73AFC2; text-decoration: none; }

a:hover { color: #BDAF96; text-decoration: none; transition: all 0.8s ease; }

.pc { display: block; }

.sp { display: none; }

@media screen and (max-width: 768px) { .pc { display: none; }
  .sp { display: block; } }

/* -----------------------------------------
▼ 00 GOTO TOP
-------------------------------------------- */
#fixedTop { right: 10px; bottom: 10px; width: 50px; height: 50px; line-height: 50px; color: #fff; font-size: 20px; text-align: center; display: none; background: linear-gradient(1deg, #6dabbf, #b9dfeb); position: fixed; z-index: 1; border-radius: 25px; -webkit-transform: translateZ(0); }

#fixedTop:hover { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0.7; }

/* -----------------------------------------
▼ 02 GLOBAL-COLUMN
-------------------------------------------- */
.container { width: 1080px; margin: 0 auto; padding: 0; clear: both; border: 0px solid #ff6800; }

.container-fluid { width: 100%; margin: 0; padding: 0; clear: both; }

.row { clear: both; padding: 0; margin: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

.col-01, .col-02, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08, .col-09, .col-10, .col-11, .col-12 { padding: 0 15px; display: block; border: 0px solid red; }

.col-01 { width: 8.33333%; }

.col-02 { width: 16.66667%; }

.col-03 { width: 25%; }

.col-04 { width: 33.33333%; }

.col-05 { width: 41.66667%; }

.col-06 { width: 50%; }

.col-07 { width: 58.33333%; }

.col-08 { width: 66.66667%; }

.col-09 { width: 75%; }

.col-10 { width: 83.33333%; }

.col-11 { width: 91.66667%; }

.col-12 { width: 100%; }

@media screen and (max-width: 768px) { .container { width: 100%; padding: 0; border: 0px solid yellowgreen; }
  .container-fluid { width: 100%; padding: 0; border: 0px solid orange; }
  .col-01, .col-02, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08, .col-09, .col-10, .col-11, .col-12 { padding: 10px; }
  .col-01 { width: 100%; }
  .col-02 { width: 100%; }
  .col-03 { width: 100%; }
  .col-04 { width: 100%; }
  .col-05 { width: 100%; }
  .col-06 { width: 100%; }
  .col-07 { width: 100%; }
  .col-08 { width: 100%; }
  .col-09 { width: 100%; }
  .col-10 { width: 100%; }
  .col-11 { width: 100%; }
  .col-12 { width: 100%; } }

/* -----------------------------------------
▼ 00 TYPOGRAPH
-------------------------------------------- */
.mincho { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

.anton { font-family: 'Anton', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, "游ゴシック", YuGothic, sans-serif; }

.oswald { font-family: 'Oswald', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, "游ゴシック", YuGothic, sans-serif; }

strong { font-weight: bold; }

.txt-xs { font-size: 0.5em; }

.txt-sm { font-size: 0.8em; }

.txt-lg { font-size: 1.6em; }

.txt-xl { font-size: 2em; }

.caution { font-size: 0.8em; color: #990000; }

h1, h2, h3, h4, h5, h6, p, li { font-size: 1.2rem; line-height: 1; color: black; padding: 0; margin: 0; color: olive; letter-spacing: 0; }

/* ---------------------------------------------------  FORM BUTTON & INPUT RESET ----------------------------------------------------*/
/* input, input[type="text"],  input[type="email"],  input[type="url"], {  padding: 0;  border: none;  border-radius: 0;  outline: none;  background: none;  } select {  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  border: none;  outline: none;  background: transparent;  } textarea {  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  resize: none;  padding: 0;  border: 0; outline: none;  background: transparent;  } */
/*
input[type="radio"] { display: none; } 
input[type="radio"]:checked + label { background: transparent; } 
input[type="checkbox"] { display: none; } 
input[type="checkbox"]:checked + label { background: transparent; }
*/
/* button,  input[type="submit"],  input[type="reset"],  input[type="button"],  input[type="send"] {  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  padding: 0;  border: none;  outline: none;  background: transparent;  } */
/* ---------------------------------------------------  DL DT DD ----------------------------------------------------*/
/* dl	{ padding:0 0 30px 0; margin:30px auto; width:100%; text-align: center; border-bottom:0px dashed #eee; color:#29324F; } dl dt, dl dd	{ font-size:1.4rem; line-height: 1.3; padding:0 0 20px 0; margin:0; } */
/* ---------------------------------------------------  BLOCKQUOTE ----------------------------------------------------*/
/* blockquote	{ background:#fbfbfb; border:0px solid #f7f7f7; padding:30px; margin:30px auto; width:100%; } */
/* ---------------------------------------------------  TABLE ----------------------------------------------------*/
table { border: 0px solid black; width: 100%; padding: 0; margin: 0 auto; background: transparent; width: 100%; }

table th, table td { font-size: 1.4rem; line-height: 1.4; border: 1px solid #ddd; text-align: left; vertical-align: top; padding: 1em; color: #444; }

table th p, table td p { font-size: 1.4rem; line-height: 1.3; color: #444; margin: 0.5em 0 0 0; }

table th { background: transparent; width: 30%; }

table td { background: transparent; width: 70%; }

table tr:first-child th { border-top: 10px solid #ddd; }

table tr:first-child td { border-top: 10px solid #eee; }

@media screen and (max-width: 480px) { table th, table td { display: block; border: none; }
  table th p, table td p { font-size: 1.4rem; line-height: 1.3; color: #444; margin: 0.5em 0 0 0; }
  table th { width: 100%; background: #eee; text-align: center; border-top: 10px solid #ddd; }
  table td { width: 100%; border-bottom: 20px solid white; }
  table tr:first-child th { border-top: 10px solid #ddd; }
  table tr:first-child td { border-top: none; } }

/* ---------------------------------------------------  HEADER ----------------------------------------------------*/
header * { box-sizing: border-box; }

header { width: 100%; height: 70px; padding: 0; margin: 0; background: yellow; }

header h1 img { width: auto; height: 50px; display: block; padding: 0; margin: 0; }

header h1 span { display: none; }

.drawer--navbarTopGutter { padding-top: 70px; background: #D4C5AD; }

.drawer-navbar { /* 	z-index: 102;*/ z-index: 1000; top: 0; width: 100%; background: white; }

.drawer-navbar--fixed { position: fixed; }

.drawer-container { width: 100%; padding: 0; margin: 0 auto; background: white; }

.drawer-navbar-header { position: relative; /* 	z-index: 102; */ z-index: 10001; box-sizing: border-box; width: 100%; height: 70px; padding: 0; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); }

.drawer-navbar .drawer-brand { height: 70px; width: 66.66666%; display: block; padding: 0; margin: 0 auto; overflow: hidden; border: 0px solid red; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

.drawer-navbar .drawer-brand:hover { opacity: 0.5; transition: 0.8s; }

.drawer--right .drawer-nav { right: -320px; -webkit-transition: right 1.2s cubic-bezier(0.19, 1, 0.22, 1); transition: right 1.2s cubic-bezier(0.19, 1, 0.22, 1); }

.drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger { right: 0; }

.drawer-nav { position: fixed; /* 	z-index: 101; */ z-index: 0; top: 70px; overflow: hidden; width: 320px; height: 100%; color: #222; background: linear-gradient(#D4C5AD 0%, #BDAF96 100%); border-left: 10px solid #59493F; padding: 20px 0 0 0; }

.drawer-menu { margin: 0; padding: 0; list-style: none; }

.drawer-menu-item { font-size: 1.4rem; line-height: 1.2; display: block; padding: 1em; margin: 0; text-decoration: none; color: #59493F; border-top: 1px dashed #59493F; letter-spacing: 0.3em; font-weight: bold; }

.drawer-menu-item:hover { text-decoration: none; color: white; background-color: #59493F; transition: 0.8s; }

header ul.contact-area { border: 0px solid black; width: 100%; padding: 13px; margin: 0; position: static; }

header ul.contact-area li a { display: block; width: 100%; color: #59493F; font-size: 2.1rem; background: transparent; text-align: left; padding: 15px; margin: 10px 0; border: 1px solid #59493F; font-family: 'Poppins', sans-serif; letter-spacing: 0; font-weight: 400; }

header ul.contact-area li a:hover { background: #59493F; color: white; }

@media (min-width: 769px) { header { box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); }
  header h1 { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0; margin: 0; }
  header h1 img { height: 54px; }
  header h1 span { display: block; font-size: 1.4rem; line-height: 1; color: #59493f; letter-spacing: 0.1em; padding: 0 0 0 1em; margin: 0; }
  .drawer-navbar .drawer-hamburger { display: none; }
  .drawer-navbar .drawer-brand { width: 100%; -webkit-justify-content: flex-start; justify-content: flex-start; }
  .drawer-container { width: 1080px; height: 70px; padding: 0 15px; position: relative; -webkit-justify-content: center; justify-content: center; -webkit-align-items: flex-end; align-items: flex-end; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .drawer-navbar .drawer-navbar-header { width: 50%; background: transparent; box-shadow: none; }
  .drawer-nav { position: static; width: 50%; padding: 0; margin: 0; background: transparent; border: none; }
  header ul.contact-area { width: 100%; height: 40px; padding: 0; margin: 0; background: transparent; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: flex-end; align-items: flex-end; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid #59493F; }
  header ul.contact-area li { width: auto; }
  header ul.contact-area li a { display: block; width: 100%; color: #59493F; font-size: 3.0rem; line-height: 1; background: transparent; text-align: left; padding: 0 0 0 1em; margin: 0; border: 0px solid #59493F; }
  header ul.contact-area li a:hover { opacity: 0.4; background: transparent; color: #59493F; }
  .drawer-menu { -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0 px; margin: 0; }
  .drawer-menu-item { font-size: 1.4rem; line-height: 30px; padding: 0; margin: 0; color: #59493f; border: none; letter-spacing: 0; font-weight: normal; }
  .drawer-menu-item:before { content: '｜'; padding: 0 1em; margin: 0; }
  ul.drawer-menu li:first-child a.drawer-menu-item:before { display: none; }
  .drawer-menu-item:hover { opacity: 0.4; background: transparent; color: #59493F; } }

/* ---------------------------------------------------  BASE ----------------------------------------------------*/
.drawer-open { overflow: hidden !important; }

/* ---------------------------------------------------  HAMBERGER ----------------------------------------------------*/
.drawer-hamburger { position: fixed; /* 	z-index: 1000; */ z-index: 1; top: 12px; display: block; box-sizing: border-box; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); border: 0; outline: 0; background-color: transparent; height: 50px; width: 50px; padding: 0 15px 0 0; margin: 0; }

.drawer-hamburger:hover { cursor: pointer; background-color: transparent; }

.drawer-hamburger-icon { position: relative; display: block; margin-top: 0; }

.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { width: 100%; height: 3px; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); background-color: #222; }

.drawer-hamburger-icon:before, .drawer-hamburger-icon:after { position: absolute; top: -10px; left: 0; content: ' '; }

.drawer-hamburger-icon:after { top: 10px; }

.drawer-open .drawer-hamburger-icon { background-color: transparent; }

.drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after { top: 0; }

.drawer-open .drawer-hamburger-icon:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.drawer-open .drawer-hamburger-icon:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* ---------------------------------------------------  OVERLAY ----------------------------------------------------*/
.drawer-overlay { position: fixed; /* 	z-index: 1; */ z-index: 1; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }

.drawer-open .drawer-overlay { display: block; }

/* ---------------------------------------------------  RIGHT ----------------------------------------------------*/
/* -----------------------------------------
▼ 00 FOOTER
-------------------------------------------- */
footer { background: white; padding: 0; }

footer .footer-nav { display: block; padding: 0; margin: 0; width: 100%; height: auto; }

footer .footer-nav ul { -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 15px 0 0 0; margin: 0; width: 100%; height: 30px; }

footer .footer-nav ul li a { font-size: 1.4rem; line-height: 1; font-weight: normal; color: #222; text-align: left; letter-spacing: 0.2em; padding: 0; margin: 0 0 0 0; }

footer .footer-nav ul li a:hover { color: #BDAF96; }

footer .footer-nav ul li a:before { content: '｜'; padding: 0 1em; margin: 0; }

footer .footer-nav ul li:first-child a:before { display: none; }

footer .footer-content { -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0; margin: 0; width: 100%; height: 270px; }

footer .footer-content h2 img { width: 180px; height: auto; display: block; padding: 0; margin: 0 auto; }

footer .footer-copyright { background: linear-gradient(#D4C5AD 0%, #BDAF96 100%); padding: 0; margin: 0; width: 100%; height: 30px; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans JP', "メイリオ", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Yu Gothic", sans-serif; }

footer .footer-copyright ul { -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0; margin: 0; width: 100%; height: 30px; }

footer .footer-copyright ul li { font-size: 0.9rem; line-height: 30px; font-weight: normal; color: #222; text-align: left; letter-spacing: 0.02em; padding: 0; margin: 0 1em 0 0; }

@media screen and (max-width: 768px) { footer .footer-nav ul { padding: 15px; height: auto; }
  footer .footer-nav ul li { width: 33.3333%; }
  footer .footer-nav ul li a { line-height: 2; }
  footer .footer-nav ul li:first-child a:before { display: inline-block; }
  footer .footer-content { height: 210px; }
  footer .footer-content h2 img { width: 150px; }
  footer .footer-copyright { height: auto; }
  footer .footer-copyright ul { padding: 15px; margin: 0; height: auto; }
  footer .footer-copyright ul li { line-height: 1.8; } }

@media screen and (max-width: 480px) { footer .footer-nav ul li { width: 50%; } }

/* ---- BUTTON 1 ---- */
.btn-more a { font-size: 1.4rem; line-height: 1; padding: 1rem; color: #FFD500 !important; text-decoration: none !important; border: 0px solid black; display: block; width: 100%; letter-spacing: 0.5em; text-align: center; margin: 4rem auto; background: linear-gradient(to right, black 50%, white 50%); background-position: 0 0; background-size: 200% auto; transition: 0.4s; word-wrap: break-word; }

.btn-more a:hover { background-position: -100%; color: black !important; }

/* ---- BUTTON 2 ---- */
.button-more button:hover { cursor: pointer; }

.button-more button { background: linear-gradient(#605957 0%, #2C2522 100%); color: white; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size: 14px; font-weight: normal; line-height: 1; letter-spacing: 0.05em; padding: 0; margin: 30px auto; outline: none; position: relative; overflow: hidden; width: 240px; height: 50px; border-radius: 4px; display: block; }

/*button:before (attr data-hover)*/
.button-more button:hover:before { opacity: 1; transform: translate(0, 0); }

.button-more button:before { content: attr(data-hover); position: absolute; top: 0; left: 0; width: 100%; height: 50px; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; font-size: 14px; opacity: 0; transform: translate(-100%, 0); transition: all 0.3s ease-in-out; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans JP', "メイリオ", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Yu Gothic", sans-serif; }

/*button div (button text before hover)*/
.button-more button:hover div { opacity: 0; transform: translate(100%, 0); }

.button-more button div { font-weight: normal; font-size: 14px; transition: all 0.3s ease-in-out; }

/* ---- BUTTON 3 ---- */
@keyframes { 0% { transform: skewY(-45deg) translateX(0); }
  100% { transform: skewY(-45deg) translateX(12.5em); } }

.button { background: linear-gradient(#605957 0%, #2C2522 100%); color: white; width: 240px; height: 50px; text-align: center; text-decoration: none; font-size: 14px; line-height: 50px; display: block; border-radius: 4px; transition: all 1s ease-in-out; position: relative; overflow: hidden; padding: 0; margin: 30px auto; }

.button:before { content: ""; background-color: rgba(255, 255, 255, 0.3); height: 100%; width: 50px; display: block; position: absolute; top: 0; left: -80px; transform: skewX(-45deg) translateX(0); transition: none; }

.button:hover { background: linear-gradient(#A0C233 0%, #90ae2a 100%); color: white; }

.button:hover:before { transform: skewX(-45deg) translateX(360px); transition: all 0.7s ease-in-out; }