@charset "UTF-8";


::selection {
  background: #f2eeee;
}

::-moz-selection {
  background: #f2eeee;
}

* {
  margin: 0;
  padding: 0;
}

/*-------------------------
共通
-------------------------*/

html{
font-size: 16px;
}

body{
font-family: YakuHanJP,'Lato','游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif;
color: #333;
letter-spacing: 0.175em;
font-feature-settings: "palt";
}

h1, h2, h3, h4, h5, h6 {
font-family: YakuHanJP,'Lato','游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif;
font-weight: 600;
letter-spacing: 0.175em;
font-feature-settings: "palt";
color: #330000;
}

p{
 font-family: YakuHanJP,'Lato','游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif;
 letter-spacing: 0.175em;
 line-height: 2;
 font-feature-settings: "palt";
 font-weight: 300;
 font-size: .875rem;
}

a,a:focus, a:hover{
 color: #333;
}

.btn{
font-weight: 600;
font-size: .875rem;
line-height: 2.8rem;
height: 3rem;
background: #330000;
color: #fff;
display: block;
border-radius: 1.5rem;
text-align:center;
padding: 0 2em;
width:20em;
margin: 2rem auto 0 auto;
transition: all .25s;
border: 1px solid #330000;
}

.btn:hover,
.btn:active{
  background: #fff;
  color: #330000;
  cursor: pointer;
}

.btn:hover .arrow_right::before{
  border-color: #330000;
}

.row{
max-width: 75rem;
overflow: hidden;
}

.ofi{
 object-fit: cover;
 object-position:50% 50%;
}

.arrow{
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
}
.arrow::before,
.arrow::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  transition: all .25s;
}

.arrow_down::before{
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.arrow_down::after{
  left: .95rem;
  width: .6rem;
  height: .6rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.arrow_right{
padding: 0;
}

.arrow_right::before{
  left: .1rem;
  top:-.2rem;
  width: .5rem;
  height: .5rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


.anchor {
  display: block;
  padding-top: 6rem;
  margin-top: -6rem;
}

#wholeWrapper{
 position: relative;
 max-width: 1920px;
 margin: 0 auto;
 padding-top: 5rem;
}

.home #wholeWrapper{
 padding-top: 0;
}
/*-------------------------
ヘッダー
-------------------------*/

header{
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 padding: .75rem 0 0 0;
 z-index: 2700;
 height: 6rem;
 transition: background .5s;
 background: #fff;
}

header .row{
  overflow: visible;
}

header h2{
 margin-bottom: -1.5rem;
}

header h2 img{
 width: 6rem;
 height: 6rem;
}

header h1{
 font-size: .875rem;
 line-height: 1.8;
 margin: 0;
 color: #33000
}

.home header{
text-shadow: 0px 0px 5px rgba(0,0,0,.5);
background: transparent;
}

.home header h1{
color: #fff;
}

header.transform{
text-shadow: none;
background: #fff;
}

header.transform h1{
color: #330000;
}

/*-------------------------
グロナビ
-------------------------*/

#gNav .menu{
  margin: 0;
}

#gNav ul li{
  padding: 0 0 0 1em;
}

#gNav ul li a{
  font-weight: bold;
  font-size: .875rem;
  padding: 0;
  color: #fff;
  line-height: 2em;
  letter-spacing: .05;
  color: #330000;
}
#gNav ul li:last-of-type a{
  border: 1px solid #330000;
  height: 2.2em;
  text-align: center;
  padding: 0 1em;
  border-radius: 1.1em;
  letter-spacing: 0.05em;
}

#gNav ul li .fa-instagram{
  font-size: 1.6em;
  vertical-align: -14%;
}

.home #gNav ul li a{
  color: #fff;
}

.home #gNav ul li:last-of-type a{
  border-color: #fff;
}

.transform #gNav ul li a{
  color: #330000;
}

.transform #gNav ul li:last-of-type a{
  border-color: #330000;
}

/*-------------------------
 スマホナビ
 -------------------------*/

.spNavBtn * {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    font: inherit;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: left;
    text-decoration: none;
    list-style: none;
}

.spNavBtn {
    display: block;
    padding: 0;
    margin: 1rem 0 0 2rem;
    width: 3.5rem;
    height: 20px;
    position: relative;
    background: none;
    border: none;
    text-align: center;
    letter-spacing: 0.1em;
    cursor: pointer;
    outline: none;
}

.spNavBtn .spNavBar {
    display: block;
    width: 2.5rem;
    height: 2px;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    transform: translateY(-50%);
    position: absolute;
    left: .5rem;
}

.spNavBtn .spNavBar1 {
    top: 0;
}

.spNavBtn .spNavBar2 {
    top: 50%;
}

.spNavBtn .spNavBar3 {
    top: 100%;
}


.spNavBtn.active .spNavBar {
    width: 2.5rem;
    left: .55rem;
    background-color: #330000;
}

.spNavBtn.active .spNavBar1 {
    transform: rotate(.6rad) translateY(-50%);
    top: 0px;
}

.spNavBtn.active .spNavBar2 {
    opacity: 0;
}

.spNavBtn.active .spNavBar3 {
    transform: rotate(-.6rad) translateY(-50%);
    top: calc(100% - 0px);
}

.spNavBtn.active .spNavMenu {
    display: none;
}

/*+++ Default Button Color +++*/
.spNavBtn {
    color: #330000;
}

.spNavBtn .spNavBar {
    background-color: #330000;
}

.home .spNavBtn .spNavBar {
    background-color: #fff;
}

.home .spNavBtn .spNavBar {
    background-color: #fff;
}

.home  .spNavBtn.active .spNavBar,
.transform .spNavBtn .spNavBar {
    background-color: #330000;
}

/* === Hambuerger Button's Style End === */
.spNavBtn {
    /*+++ Hamburger Button Position +++*/
    position: fixed;
    top: 1rem;
    right: .5rem;
}

.spNav a {
    color: inherit;
    text-decoration: none;
}

.spNav a:visited {
    color: inherit;
}

.spNav .spNavBg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    display: none;
    top: 0;
    left: 0;
}

.spNav .spNavWrapper {
    width: 14rem;
    height: 100%;
    transition: all 0.2s;
    transform: translate(100%);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2000;
    background-color: #fff000;
}

.spNav .spNavWrapper.open {
    transform: translate(0);
}

/*+++ Default Navigation CSS +++*/

.spNavWrapper {
    display: flex;
    align-items: center;
    padding: 1.5rem;
}

.spNav .menu li {
    margin: 1em 0;
}

.spNav .menu a {
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: #330000;
    padding-left: .5em;
}

.spNav .menu li:last-of-type a{
  text-align: center;
  width: 11rem;
  display: block;
  border: 1px solid #333000;
  padding:0 .5em;
  line-height: 2.25em;
  height: 2.5em;
  border-radius:1.25em;
}

.spNav .menu .fa-instagram{
  font-size: 1.5em;
}


/*-------------------------
メインビジュアル
-------------------------*/

#kv {
   height: 100vh;
   position: relative;
   background: #330000;
}

.kvBgItem {
   position: absolute !important;
   top: 0 !important;
   bottom: 0 !important;
   right: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   z-index: 0 !important;
}


.kvBgItem img {
   position: absolute !important;
   top: 0 !important;
   bottom: 0 !important;
   right: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   z-index: 0 !important;
}

#kvTxt{
 z-index: 1001;
 text-shadow: 0px 0px 10px rgba(0,0,0,1);
}

#kvTxt h2{
  text-align: center;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.8em;
}

#kvTxt h2 img{
width: 12rem;
margin-top: 1em;
}

.kvBgItem::after{
  content: "";
  z-index: 1000;
  display: block;
  background: url(../img/dot.png) repeat;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.5;
}

#kv .arrow{
 margin: 3em 0 0 0;
}

#kv .arrow:hover::before{
  background: rgba(255,255,255,.5);
}

#kv .arrow:hover::after{
}
/*-------------------------
.imgBelt01
-------------------------*/
.imgBelt01 img{
height: 16rem !important;
border-radius: .3rem;
}

.imgBelt01 .slick-slider {
  margin:0 -.4rem;
}
.imgBelt01 .slick-slide {
  text-align:center;
  margin-right:.4rem;
  margin-left:.4rem;
}

/*-------------------------
.imgBelt02
-------------------------*/

.imgBelt02 img{
width: 100%;
height: 20rem !important;
}

.imgBeltWrapper:last-of-type{
background: linear-gradient(180deg,#fff 0%,#fff 70%,#f2eeee 70%,#f2eeee 100%);
}

/*-------------------------
section
-------------------------*/

section{
padding: 7rem 0;
}

h3.titEn{
font-size: 1.6rem;
margin-bottom: .75em;
text-align: center;
line-height: 1.8;
}

h3.titEn span{
font-size: 1rem!important;
display: block;
letter-spacing: 0.15em;
}

.secTit{
}

.secTxtInner{
max-width: 31.25rem;
}

.medium-order-1 .secTxtInner{
float: right;
}

.secTxt p{
text-align: justify;
}

.secImg{
padding-right: 3rem !important;
}

.medium-order-2.secImg{
padding-right: 0 !important;
padding-left: 3rem !important;
}

.secImg img{
border-radius: .5rem;
}

.secBl{
margin-top: 4rem;
}

/*-------------------------
.sec01
-------------------------*/

#sec01{
position: relative;
}

#sec01 h2{
font-size: 1.25rem;
line-height: 1.8;
margin: 0;
}
#sec01 .titEn{
text-align: left;
}

#sec01 p{
font-size: 1rem;
color: #330000;
margin: 0;
font-weight: bold;
line-height: 2.5;
}

#sec01 .katsumata{
position: absolute;
left: .5rem;
bottom: 0;
width: 15rem;
height: 10rem;
}

/*-------------------------
.sec02
-------------------------*/

#sec02{
}

#sec02 .secTxt h4{
border-bottom: 1px solid #330000;
font-size: .875rem;
display: inline-block;
padding-bottom: .5em;
}

#sec02 .secTxt h2{
font-size: 1.6rem;
margin: .4em 0;
}

#sec02 .secTxt h3{
font-size: 1rem;
line-height: 2;
}

#sec02 .secImg img{
border-radius: 0 .5rem .5rem 0;
}

#sec02 .medium-order-2.secImg img{
border-radius: .5rem 0 0 .5rem;
}

/*-------------------------
.sec03
-------------------------*/

#sec03 .secTxt h2{
font-size: 1.6rem;
line-height: 1.8em;
}

#sec03 .secTxt h3{
font-size: 1rem;
margin: 0 0 1em 0;
}

#sec03 .secTxt h4{
font-size: .9rem;
margin: 0 0 .75em 0;
}

#sec03 .secTxt p+ h3{
margin-top: 1.5rem;
}

#sec03 table tr{
background: transparent !important;
}

#sec03 table tbody{
border: none;
}

#sec03 table th,
#sec03 table td{
text-align: left;
font-size: .875rem;
padding: 0.25em 0;;
}

/*-------------------------
#secCont
-------------------------*/

#secCont{
 background: #f2eeee;
 padding: 5rem 0 4rem 0;
}

#secCont p{
 text-align: center;
}

#secCont p.tel{
  font-size: 1.25em;
  font-weight: bold;
  color: #330000;
}

#secCont p.tel a{
  font-size: 1.5em;
  color: #330000;
}


/*-------------------------
footer
-------------------------*/
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

footer p{
  line-height: 1;
  font-size: .9rem;
}

.footCopy {
 font-size: .8rem;
 position: fixed;
 top: auto;
 bottom: 5.5em;
 height: 1.5em;
 margin: auto;
 right: 0;
 -webkit-transform-origin: 100% 50%;
 -moz-transform-origin: 100% 50%;
 -ms-transform-origin: 100% 50%;
 -o-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
 -webkit-transform: rotate(90deg) translate(50%, 50%);
 -moz-transform: rotate(90deg) translate(50%, 50%);
 -ms-transform: rotate(90deg) translate(50%, 50%);
 -o-transform: rotate(90deg) translate(50%, 50%);
 transform: rotate(90deg) translate(50%, 50%);
}

/*-------------------------
loading
-------------------------*/
#loadWrapper {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   z-index: 3000;
   background: #fff000;
   display: flex;
   align-items: center;
   justify-content: center;
}

#loadIcon {
   display: block;
}

#loadIcon img {
   width: 6rem;
   height: 6rem;
   animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
5%  { transform: scale(1.1, .8); }
10% { transform: scale(.8, 1.1) translateY(-5px); }
15% { transform: scale(1, 1); }
}

/*-------------------------
mailformpro
-------------------------*/

dt.mfp{
  color: #330000;
  font-size: .875rem;
  letter-spacing: .1em;
}

dd.mfp{
  font-size: .875rem;
  margin-bottom: .5rem;
  letter-spacing: .1em;
}

label {
  color: #333;
  letter-spacing: .1em;
}

.mfp .row{
  margin-right: -.25rem;
  margin-left: -.25rem;
}

.mfp .columns{
  padding-right: .25rem;
  padding-left: .25rem;
}

.mfp textarea{
  width: 100% !important;
}

.must{
  color: #ed1c24;
}

.mfp_err{
  color: #ed1c24;
  font-size: .75rem;
  margin: 0 0 1em 0;
  letter-spacing: .1em;
}

.mfp_buttons [type=button],
.mfp_buttons [type=submit] {
  margin-top: 2rem;
}

#mfp_hidden {
	overflow: hidden;
	width: 1px;
	height: 1px;
	padding: 0px;
	margin: 0px;
}
#mfp_hidden input {
	margin: 10px;
}

#mfp_confirm_table tbody{
  border: none;
  border-top: 1px solid #ccc;
}

#mfp_confirm_table tr{
  background: transparent !important;
  border-bottom: 1px solid #ccc;
}

#mfp_confirm_table th,
#mfp_confirm_table td{
  text-align: left !important;
  font-size: .875rem !important;
  padding: 1em 0;
}

#mfp_phase_confirm_inner{
  margin-top: 4rem;
}

#mfp_phase_confirm_inner h4{
  font-size: 1rem;
  margin-bottom: 2rem;
}

.mfp_not_checked a{
  text-decoration: underline;
}

.mfp_buttons{
  display: flex;
  justify-content:center;
  margin-top: 3rem;
  flex-direction: row-reverse;
}

.mfp_buttons .btn{
  margin: 0;
}

.mfp_element_button{
  font-weight: 600;
  font-size: .875rem;
  line-height: 2.8rem;
  height: 3rem;
  background: #330000;
  color: #fff;
  display: block;
  border-radius: 1.5rem;
  text-align:center;
  padding: 0 2em;
  width:100%;
  margin: 0;
  transition: all .25s;
  border: 1px solid #330000;
}

.mfp_element_button:hover{
  cursor: pointer;
}

.mfp_element_button:hover{
  background: #fff;
  color: #333000;
}

#mfp_button_cancel{
  background: #eee;
  color:#330000;
  border: none;
}

#mfp_error,#mfp_warning{
  color: #ed1c24;
  font-size: .75rem;
  margin: 0 0 1em 0;
  letter-spacing: .1em;
}

#thkCont p{
  text-align: center;
}

#privacyCont h3{
  font-size: 1rem;
  margin: 1.5em 0 .5em 0;
}

/*-------------------------
メディアクエリ
-------------------------*/
@media screen and (max-width: 1200px) {
  h1 span{
    display: none;
  }
}
@media screen and (max-width: 63.9375em) {
html{
  font-size: 15px;
}
h1{
  display: none;
}
header{
  background: transparent !important;
  height: 3rem;
}
#sec01{
  padding-left: 1rem;
  padding-right: 1rem;
}
#sec01 p{
text-align: justify;
}
.secTxt{
  padding-left: 1.9375rem !important;
  padding-right: 1.9375rem !important;
}
.secTxtInner{
  max-width: 100%;
}
.secImg,
.medium-order-2.secImg{
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.anchor{
  padding-top: 3rem;
  margin-top: -3rem;
}
}

@media screen and (max-width: 39.9375em) {
body, h1, h2, h3, h4, h5, h6, p{
 letter-spacing: 0.15em;
}
html{
  font-size: 14px;
}
#kvTxt h2{
  font-size: 1.2rem;
}
.imgBelt01 img,
.imgBelt02 img{
  height: 12rem !important;
}
.secImg{
  padding-right: 1.9375rem !important;
  margin-bottom: 2rem;
}
.medium-order-2.secImg{
  padding-right: 0 !important;
  padding-left: 1.9375rem !important;
}
section{
  padding: 4.25rem 0 2.5rem 0;
}
.secBl {
  margin-top: 3rem;
}
h3.titEn{
  font-size: 1.4rem;
  margin-bottom: 0;
}
h3.titEn span{
  font-size: .9rem!important;
}
#sec01{
  padding-bottom: 11rem;
}
#sec01 h3.titEn{
  margin-bottom: .5em;
}
#sec01 h2 {
  font-size: 1.2rem;
  margin-bottom: 1em;
}
#sec01 p{
  font-size: .95rem;
  line-height: 2.15em;
}
#sec01 .katsumata {
  right: 0;
  left: 0;
  margin: auto;
}
#sec02 .secTxt h2 {
  font-size: 1.3rem;
  border-bottom: 1em;
}
#sec03 .secImg{
  padding-right: 1.9375rem !important;
  padding-left: 1.9375rem !important;
}
#sec03 .secTxt h2 {
  font-size: 1.3rem;
}
#secCont{
  padding:3rem 1.9375rem 4rem 1.9375rem;
}
#secCont p{
  text-align: justify;
  margin: .5em 0 0 0;
}
#secCont p.tel,
#secCont p.contBtn{
  text-align: center;
}
#secCont p.tel{
  margin-top: 0;
}
#secCont p.tel a{
  font-size: 1.25em;
  letter-spacing: .075em;
}
#mfpWrapper,
#thkCont,
#privacyCont{
  padding-left: 1.9375rem;
  padding-right: 1.9375rem;
  margin-top: 3rem;
}
}