@charset "UTF-8";

/*
Theme Name: 和ふれんちラヴィ
Theme URI: http://hoc-web.com/la-vie_test/
Description: 和ふれんちラヴィ公式サイトの、新着情報・メニュー・お問い合わせなど
Version: 1.1
Author: OWNDMEDIA.LAB
*/

/* ************************************************************************************************

   共通

   ************************************************************************************************ */

html,body {
  width: 100%;
  font-size: 62.5%; /*ベースを10pxに設定*/
  letter-spacing: 0.1em;
  line-height: 2.5;
  font-family: dnp-shuei-gothic-kin-std,YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #191210;
  background: #fff;
}

h1 {font-size: 1rem;}
h2 {font-size: 3.2rem;}
h3 {font-size: 2.8rem;}
h4 {font-size: 2.3rem;}
p {font-size: 1.4rem;}
a{font-size: 1.4rem; text-decoration: none; transition: .3s;}
a:hover {color: #31315D; transition: .3s;}
li, th, td {font-size: 1.4rem; font-weight: normal;}
.en {
  font-family: servus-slab, serif;
  font-weight: 400;
  letter-spacing: .1em;
}
.red {color: #E50012;}

img {max-width: 100%; height: auto;}
.img_pc {display: block;}
.img_sp {display: none;}


/* マウスドラッグした時の文字色 */
::selection{background: #31315D; color: #fff;}


/* 改行 */
.br_sp{display: none;} /*スマホだけ改行 */
.br_pc{display: block;} /*PCだけ改行 */


/* ページ全体の余白など */
#page {
  overflow: hidden;
  width: 100%;
}

.wrap{
  width: 1180px;
  padding: 0 3rem;
  margin: 0 auto;
}

.wrap2{
  width: 1300px;
  padding: 0 3rem;
  margin: 0 auto;
}


/* スクロールバー */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #fff;
  border-left: 1px solid #31315D;
}

::-webkit-scrollbar-thumb {
	background: #31315D;
	box-shadow: inset 0 0 0 1px #fff;
}


/*flex, clearfix*/
.flex{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: flex-start;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


/***** ヘッダー *****/
header {
  position: relative;
  height: 7.5vh;
  position: fixed;
  top: 0;
  transition: .5s;
  width: 100%;
  z-index: 10;
}

.gnav {
  top: 0;
  width: 100%;
  height: 7.5vh;
  position: fixed;
  transition: .5s;
  background: #fff;
}

.gnav.hide{
  top: -7.5vh;
}

.header__logo img {
  width: 9%;
  max-width: 140px;
  height: auto;
  position: absolute;
  top: 0;
  right: 7%;
  z-index: 10;
}

.header__logo a{
  transition: .5s;
}

.header__logo a:hover{
  opacity: .6;
  transition: .5s;
}

.gnav__list {
  padding-left: 12rem;
}

.gnav__item {
  display: inline-block;
  margin-right: 6rem
}

.gnav__item a {
  font-weight: 500;
  transition: .5s;
  line-height: 7.5vh;
  font-size: 1.5rem;
}

.gnav__item a:hover {
  color: #E50012;
}

.sns__icon {
  margin-right: 1.5rem;
}

.sns__icon img {
  vertical-align: middle;
}

.sns__icon img {
  transition: .5s;
  width: 28px;
}

.sns__icon img:hover {
  transition: .3s;
  opacity: .6;
}


/***** 下層ページヘッダー *****/
#header-sub {
  align-items: center;
  justify-content: space-between;
  padding-top: 7.5vh;
  width: 100%;
}

.header-sub__ttl {
  width: 30%;
  text-align: center;
}

.header-sub__ttl h2{
  color: #31315D;
  margin-bottom: 2rem;
  line-height: 1;
}

.header-sub__ttl p{
  color: #31315D;
  font-size: 1.3rem;
}

.header-sub__bg {
  background-image: url(../img/common/header_bg.jpg);
  background-attachment: fixed;
  background-size: contain;
  width: 70%;
  height: 280px;
}


/***** フッター *****/
footer{
  padding: 15rem 0 0;
}

.footer__container {
  margin-bottom: 10rem;
  justify-content: space-between;
  align-items: center;
}

.footer__info {
  margin-right: 3rem;
}

.footer__logo {
  transition: .5s;
}

.footer__logo:hover {
  opacity: .5;
}

.footer__tbl {
  margin: 6rem 0 ;
}

.footer__tbl th, .footer__tbl td {
  padding: .7rem 0;
}

.footer__tbl th {
  padding-right: 3rem;
  color: #31315D;
}

.footer__sns {
  margin-bottom: 3rem;
  align-items: center;
}

.footer__btn--sns {
  margin-right: 2rem;
  transition: .3s;
}

.footer__btn--sns:hover {
  transition: .3s;
  opacity: .6;
}

.footer__btn--rsv {
    margin-left: 3rem;
}

.footer__bg {
  width: 100%;
  height: 27vh;
  text-align: center;
  background-image: url(../img/common/footer_bg.jpg);
  background-size: auto;
  background-position: bottom;
  background-attachment: fixed;
}

.footer__map iframe {
    filter: grayscale(.5);
}

.footer__bg__box {
  height: 22vh;
}

small{
  font-size: 1.2rem;
  color: #fff;
  display: block;
  font-weight: bold;
}

/*コロナ注意書き*/
.corona {
  display: inline-block;
  color: #E50012;
  text-decoration: underline;
}

.corona:hover {
  color: #31315D;
}


/* ************************************************************************************************

   アニメーション

   ************************************************************************************************ */

/***** ボタン *****/
.btn01 {
  display: inline-block;
  width: 180px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  outline: none;
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 1px solid #31315D;
  color: #31315D;
  line-height: 48px;
  overflow: hidden;
  font-size: 1.4rem;
}
.btn01::before,
.btn01::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.btn01,
.btn01::before,
.btn01::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.btn01:hover {
  color: #fff;
  border: 1px solid #E50012;
}
.btn01::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.btn01:hover::after {
  background: #E50012;
  -webkit-transform: scale(1);
  transform: scale(1);
}


/***** ローディングアニメーション *****/
#loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

#loader .loader-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

#loader .loader-slide:before {
  content: "";
  background-color: #31315D;
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 20px;
}

#loader .loader-slide:after {
  content: "";
  background-color: #E50012;
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 10px;
  border-top: 2px solid #E50012;
}

#loader .loader-slide img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 40px;
  margin: auto;
}
#loader .loader-slide.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 1s;
}
@keyframes slideOut {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}


/***** ページトップに戻るボタン *****/
#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
}

#page_top a{
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
  color: #31315D;
  background:#fff;
  border: 4px double #31315D;
  border-radius: 50%;
  text-align: center;
  opacity: .8;
}

#page_top a:hover{
  color: #E50012;
  transition: .5s;
}

#page_top .material-icons {
  position: absolute;
  font-size: 3rem;
  width: 30px;
  height: 30px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}


/***** スクロールアニメーション *****/
.scroll.fadeIn {
	opacity: 0;
	transition: all 3000ms;
}

.scroll.fadeIn2 {
	opacity: 0;
	transition: all 1500ms;
}

.scroll.fadeInUp {
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 2000ms;
}

.scroll.fadeInLeft {
	opacity: 0;
	transform: translateX(-50px);
	transition: all 2000ms;
}

.scroll.fadeInRight {
	opacity: 0;
	transform: translateX(50px);
	transition: all 2000ms;
}

.scroll.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}

.scroll.delay {
	-moz-transition-delay: 200ms;
	-webkit-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
}

.scroll.delay2 {
	-moz-transition-delay: 400ms;
	-webkit-transition-delay: 400ms;
	-o-transition-delay: 400ms;
	-ms-transition-delay: 400ms;
}

/*クロスブラウザ調整*/
@-moz-document url-prefix() {
  .index__bg.scroll.fadeIn, .index__bg.scroll.scrollin {
    transform: unset !important;
  }
}

@supports (-ms-ime-align: auto) {
  .index__bg.scroll.fadeIn, .index__bg.scroll.scrollin {
    transform: unset !important;
  }
}


/***** グローバルメニュー *****/
.menu{
  height: 20px;
  position: fixed;
  left: 3rem;
  top: 3rem;
  width: 30px;
  z-index: 99;
  cursor: pointer;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  display: none;
}
.menu__line{
  background: #191210;
  display: block;
  height: 2px;
  position: absolute;
  transition:transform .3s;
  width: 100%;
}
.menu__line--center{
  top: 9px;
  background-color: #191210;
}
.menu__line--bottom{
  bottom: 0;
}
.menu__line--top.active{
  top: 8px;
  transform: rotate(45deg);
  background-color: #191210;
}
.menu__line--center.active{
  transform:scaleX(0);
}
.menu__line--bottom.active{
  bottom: 10px;
  transform: rotate(135deg);
  background-color: #191210;
}

.gnav__sp {
  background: #fff;
  width: 200px;
  height: 100vh;
  display: none;
  z-index: 98;
  left: 0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

.gnav__sp .gnav__list {
  padding-left: 5rem;
  padding-top: 10rem;
}

.gnav__sp .gnav__item {
  margin-right: 0;
  width: 100%;
}

.gnav__sp .sns__icon {
  margin-right: 1rem;
}

.gnav__sp .sns__icon {
  width: auto;
}


/* ************************************************************************************************

   微調整

   ************************************************************************************************ */
@media screen and (max-width: 1300px){
  .wrap2 {width: 100%; padding: 0 5rem;}
  .sns__icon {margin-right: 1.5rem;}
}

@media screen and (max-width: 1250px){
  .gnav__list {padding-left: 5rem;}
  .gnav__item {margin-right: 5rem;}
  .sns__icon {margin-right: 1.5rem;}
}

@media screen and (max-width: 1180px){
  .wrap {width: 100%; padding: 0 7rem;}
  .gnav__item {margin-right: 4rem;}
  .sns__icon {margin-right: 1.5rem;}
  .footer__map iframe {width: 500px; height: 500px;}
  .footer__tbl {margin: 5rem 0;}
}

@media screen and (max-width: 1050px){
  .footer__tbl th {width: 30%;}
}

/* ************************************************************************************************

   1025px

   ************************************************************************************************ */
@media screen and (max-width: 1025px){
  h2 {font-size: 3rem;}
  .footer__tbl th {width: 30%;}
  .footer__bg {height: 22vh;}
  .footer__bg__box {height: 16vh;}
  .header-sub__bg {background-attachment: scroll; background-size: cover;}
  #loader .loader-slide img {width: 250px;}
}


/* ************************************************************************************************

   960px

   ************************************************************************************************ */
@media screen and (max-width: 959px){
  .gnav {display: none;}
  .menu {display: block;}
  .header__logo img {width: 15%;}
  .gnav__sp .sns__icon {margin-top: 4rem;}

  footer {padding: 10rem 0 0;}
  .footer__container {display: block;}
  .footer__info {margin-right: 0; margin-bottom: 7rem; text-align: center;}
  .footer__tbl {margin: 5rem auto 3rem;}
  .footer__tbl th {width: 30%;}
  .footer__tbl td {text-align: left;}
  .footer__sns {display: block;}
  .footer__btn--sns {margin-right: 1rem; margin-left: 1rem;}
  .footer__btn--rsv {display: block; margin: 5rem auto 0;}
  .footer__map iframe {width: 100%; height: 40vh;}
  .footer__bg {height: 15vh;}
  .footer__bg__box {height: 11vh;}
  .header-sub__bg {width: 60%;}
  .header-sub__ttl {width: 40%;}
}


/* ************************************************************************************************

   560px

   ************************************************************************************************ */
@media screen and (max-width: 559px){
  h1 {font-size: 1rem;}
  h2 {font-size: 2.8rem;}
  h3 {font-size: 2.4rem;}
  h4 {font-size: 1.9rem;}

  .wrap2 {padding: 0 3rem;}

  .btn01 {width: 160px; height: 48px; font-size: 1.3rem;}

  #loader .loader-slide img {width: 220px;}

  .img_pc {display: none;}
  .img_sp {display: block;}

  .br_sp{display: block;}
  .br_pc{display: none;}

  .header__logo img {width: 20%; right: 4%;}
  .menu {left: 2rem; top: 2rem;}
  .gnav__sp {width: 150px;}
  .gnav__sp .gnav__list {padding-left: 3rem; padding-top: 8rem;}

  #header-sub {flex-direction: column-reverse; padding-top: 8.5vh;}
  .header-sub__bg {
    width: 100%;
    height: 125px;
    background-image: url(../img/common/header_bg_sp.jpg);
  }
  .header-sub__ttl {
    width: 100%;
    text-align: right;
    padding: 5rem 4rem 0 0;
  }
  .header-sub__ttl h2 {margin-bottom: 1.5rem;}

  #page_top, #page_top a {width: 50px; height: 50px;}

  footer {padding: 7rem 0 0;}
  footer .wrap {padding: 0 3rem;}
  .footer__container {margin-bottom: 7rem;}
  .footer__info {margin-bottom: 5rem;}
  .footer__logo img {width: 70%;}
  .footer__tbl {margin: 4rem auto 2rem; width: 80%;}
  .footer__tbl th, .footer__tbl td {display: block; padding: 0;}
  .footer__tbl th {padding-right: 2rem; width: 100%; padding-right: 0;}
  .footer__tbl td {padding-bottom: 2rem;}
  .footer__bg {
    height: 25vh;
    background-image: url(../img/common/footer_bg_sp.jpg);
    background-size: contain;
  }
  .footer__bg__box {height: 15vh;}
  small {line-height: 2; text-shadow: 0 0 10px #000;}
  .footer__map iframe {height: 50vh;}

}


/* ************************************************************************************************

   320px

   ************************************************************************************************ */
@media screen and (max-width: 320px){
  h1 {font-size: 1rem;}
  h2 {font-size: 2.7rem;}
  h3 {font-size: 2.3rem;}
  h4 {font-size: 1.8rem;}
  p {font-size: 1.3rem;}
  a{font-size: 1.3rem;}
  li, th, td {font-size: 1.3rem;}
}