@charset "utf-8";

/*==========================================
 custom properties
===========================================*/

:root {
  --main-color: #005594; /* rgb(0,85,148) */
  --text-color: #231815; /* rgb(35,24,21) */
  --line-color: #e1e1e1; /* rgb(225,225,225) */
  --bg1-color: #696358; /* rgb(105,99,88) */
  --bg2-color: #371511; /* rgb(55,21,17) */
  --bg3-color: #B0A27C; /* rgb(176,162,124) */
  --bg4-color: #BDC3C4; /* rgb(189,195,196) */
  
  --bg-request-color: #BFAB89;
  --bg-reserve-color: #E64136;
  --bg-online-color: #000;
  
}

/*==========================================
 common
===========================================*/

.preload * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

*, *::before, *::after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing: border-box;
}

a {
	color:#000;
	text-decoration:none;
}

a:hover {
	color:#333;
	text-decoration:underline;
}

a[href^="tel:"] {
  cursor: default;
}

.pc {
	display: none;
}

.sp {
	display: block;
}

.hidden {
	display: none;
}

@media print, screen and (min-width: 601px) {

  .pc {
    display: block;
  }

  .sp {
    display: none;
  }

}

@media print, screen and (min-width: 1201px) {

}

/*==========================================
 全体
===========================================*/

html {
	font-size: 62.5%;
}

body {
	position: relative;
  font-family: 'Noto Serif JP', serif;
	font-size: 1.4rem;
	line-height: 1.2;
  font-weight: 400;
	color: var(--text-color);
	background: #FFF;
}

#wrap {
	width: 100%;
  overflow: hidden;
	/* background: #FFF; */
  padding-bottom: 60px;
  /* background: var(--bg1-color); */
}

/* head */

#head_wrap {
	width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  background: var(--bg1-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 9999;
}

#head_wrap.UpMove{
  animation: UpAnime 1s forwards;
}

#head_wrap.DownMove{
  animation: DownAnime 1s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 0;
  transform: translateY(-210px);
  }
}

@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-210px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

#head {
  width: 100%;
  position: relative;
}

/* contents */
#contents {
	width: 100%;
  padding: 100px 10px 80px;
  position: relative;
	z-index: 1;
}

.home #contents {
  padding: 100px 0 0;
}

/* foot */
#foot1_wrap {
	width: 100%;
  background: var(--bg1-color);
}

#foot1 {
	width: 100%;
/*  padding: 0 10px; */
}

#foot2_wrap {
	width: 100%;
  background: var(--bg3-color);
}

#foot2 {
	width: 100%;
}

#foot9_wrap {
	width: 100%;
  background: var(--bg2-color);
}

#foot9 {
	width: 100%;
  padding: 0 10px;
}

@media print, screen and (min-width: 601px) {

  #wrap {
    padding-bottom: 0;
  }

  /* head */
  #head_wrap {
    height: 200px;
    justify-content: space-between;
  }

  #head {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
  }

  /* contents */
  #contents {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 200px 10px 80px;
  }
  
  .home #contents {
    width: 100%;
    max-width: none;
    padding: 200px 0 0;
  }

  /* foot */
  #foot1_wrap {
  }

  #foot1 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  #foot2_wrap {
  }

  #foot2 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  #foot9 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

}

@media print, screen and (min-width: 1201px) {


}

/* iconNav */
#iconNav {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 9999;
}

/*==========================================
 ヘッダーのスタイル
===========================================*/

#head .logo {
  width: 100px;
  margin: 0 auto;
}

#head .logo img {
  width: 100%;
	height: auto;
}

@media print, screen and (min-width: 601px) {

  #head .logo{
    width: 140px;
    margin: 0 0 0 20px;
  }

  #head .pcNav {
    position: absolute;
    top: 20px;
    right: 10px;;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}

@media print, screen and (min-width: 769px) {

  #head .logo{
    margin: 0 auto;
  }

}


/*==========================================
 アイコンナビ
===========================================*/

#iconNav ul {
  display: flex;
  justify-content: center;
}

#iconNav ul li {
  width: 25%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
#iconNav ul li.btnOutline {
  background: var(--bg1-color);
}
  
#iconNav ul li.btnMap {
  background: var(--bg4-color);
}
 
#iconNav ul li.btnRequest {
  background: var(--bg-request-color);
}

#iconNav ul li.btnReserve {
  background: var(--bg-reserve-color);
}

#iconNav ul li.btnOnline {
  background: var(--bg-online-color);
}

#iconNav ul li.btnTel {
  background: #f2f5f8;
}

#iconNav ul li a {
  display: block;
	font-size: 1.1rem;
  line-height: 1.2;
  color: #FFF;
  letter-spacing: 0;
	text-decoration: none;
	text-align: center;
  position: relative;
}

#iconNav ul li a i {
  display: block;
	font-size: 2.0em;
  margin-bottom: 4px;
}

#iconNav ul li:not(.btnOnline) a i {
  margin-bottom: 4px;
}

/*==========================================
 グローバルナビ
===========================================*/

#gNav {
  position: fixed;
  right: -320px;
  top: 0;
  width: 300px;
  height: 100vh;
  padding-top: 60px;
  background: var(--bg1-color);
  transition: all .6s;
  z-index: 200;
  overflow-y: auto;
  text-align: center;
}

.hamburger {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 300;
}

.hamburger_border {
  position: absolute;
  left: 10px;
  width: 28px;
  height: 4px;
  background-color: #fff;
  transition: all .6s;
}

.hamburger_border_top {
  top: 12px;
}

.hamburger_border_center {
  top: 22px;
}

.hamburger_border_bottom {
  top: 32px;
}

.black_bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #333;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}

.nav-open #gNav {
  right: 0;
}

.nav-open .black_bg {
  opacity: .8;
  visibility: visible;
}

.nav-open .hamburger_border {
  /* background-color: #333; */
}

.nav-open .hamburger_border_top {
  transform: rotate(45deg);
  top: 20px;
}

.nav-open .hamburger_border_center {
  width: 0;
  left: 50%;
}

.nav-open .hamburger_border_bottom {
  transform: rotate(-45deg);
  top: 20px;
}

.gNavList {
}

.gNavList li {
	border-bottom: 1px solid var(--line-color);
}

.gNavList li:first-of-type {
	border-top: 1px solid var(--line-color);
}

.gNavList li a {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-decoration: none;
  color: var(--bg4-color);
  padding: 15px 10px;
  transition: all .5s;
  position: relative;
}

.gNavList li a:hover,
.home .gNavList li.linkHome a,
.location .gNavList li.linkLocation a,
.design .gNavList li.linkDesign a,
.access .gNavList li.linkAccess a,
.areaguide .gNavList li.linkAreaguide a,
.plan .gNavList li.linkPlan a,
.equipment .gNavList li.linkEquipment a,
.outline .gNavList li.linkOutline a,
.map .gNavList li.linkMap a {
  color: #fff;
}

@media print, screen and (min-width: 601px) {

  #gNav {
    position: static;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    padding-top: 0;
    background-color: inherit;
    overflow-y: hidden;
    border-top: none;
    border-bottom: none;
  }

  .gNavList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
  }
  
  .gNavList li {
    width: calc(100% / 7);
    height: auto;
    line-height: 1.3;
    padding: 0;
    border-right: 1px solid var(--bg4-color);
    border-bottom: none;
  }
  
  .gNavList li:first-of-type {
	  border-top: none;
    border-left: 1px solid var(--bg4-color);
  }

  .gNavList li a {
    font-size: 1.3rem;
    letter-spacing: 0;
    color: var(--bg4-color);
    border-bottom: none;
    padding: 12px 0;
  }
  
  .gNavList li a:hover,
  .home .gNavList li.linkHome a,
  .location .gNavList li.linkLocation a,
  .design .gNavList li.linkDesign a,
  .access .gNavList li.linkAccess a,
  .areaguide .gNavList li.linkAreaguide a,
  .plan .gNavList li.linkPlan a,
  .equipment .gNavList li.linkEquipment a,
  .outline .gNavList li.linkOutline a,
  .map .gNavList li.linkMap a {
    color: #fff;
  }

  .gNavList li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #E64136;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
  }

  .gNavList li a:hover::before,
  .home .gNavList li.linkHome a::before,
  .location .gNavList li.linkLocation a::before,
  .design .gNavList li.linkDesign a::before,
  .access .gNavList li.linkAccess a::before,
  .areaguide .gNavList li.linkAreaguide a::before,
  .plan .gNavList li.linkPlan a::before,
  .equipment .gNavList li.linkEquipment a::before {
    transform: scale(1, 1);
  }
	
}

@media print, screen and (min-width: 769px) {

  .gNavList li a {
    font-size: 1.4rem;
  }
	
}

@media print, screen and (min-width: 1201px) {

  .gNavList li a {
    font-size: 1.5rem;
    letter-spacing: .2em;
    padding: 12px 4px;
  }
	
}

/*==========================================
 ページトップへボタンのスタイル
===========================================*/

#iconPageTop {
  position: fixed;
  bottom: 80px;
  right: 10px;
	z-index: 10;
}

#iconPageTop a {
	width: 55px;
	height: 55px;
	line-height: 55px;
	background: rgba(105,99,88,0.8);
	color: #FFF;
	display: block;
	text-align: center;
	transition: 0.3s;
	border-radius: 4px;
}

#iconPageTop a i {
  font-size: 1.8rem;
}

#iconPageTop a:hover {
	opacity: 0.8;
}

@media print, screen and (min-width: 601px) {
	
  #page-top {
      bottom: 100px;
  }

}

/*==========================================
 フッターメニューのスタイル
===========================================*/

#fNav {
  width: 100%;
  text-align: center;
  border-top: 2px solid var(--line-color);
  border-bottom: 2px solid var(--line-color);
}

.fNavList {
}

.fNavList li {
}

.fNavList li a {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-decoration: none;
  color: var(--bg4-color);
  padding: 15px 10px;
  transition: all .5s;
  position: relative;
	border-bottom: 1px solid var(--line-color);
}

.fNavList li a:hover,
.home .fNavList li.linkHome a,
.location .fNavList li.linkLocation a,
.design .fNavList li.linkDesign a,
.access .fNavList li.linkAccess a,
.areaguide .fNavList li.linkAreaguide a,
.plan .fNavList li.linkPlan a,
.equipment .fNavList li.linkEquipment a,
.outline .fNavList li.linkOutline a,
.map .fNavList li.linkMap a {
  color: #fff;
}

@media print, screen and (min-width: 601px) {

  #fNav {
    position: static;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    padding-top: 0;
    background-color: inherit;
    overflow-y: hidden;
    border-top: none;
    border-bottom: none;
  }

  .fNavList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
  }
  
  .fNavList li {
    width: calc(100% / 7);
    height: auto;
    line-height: 1.3;
    padding: 0;
    border-right: 1px solid var(--bg4-color);
  }
  
  .fNavList li:first-of-type {
    border-left: 1px solid var(--bg4-color);
  }

  .fNavList li a {
    font-size: 1.3rem;
    letter-spacing: 0;
    color: var(--bg4-color);
    border-bottom: none;
    padding: 12px 0;
  }

  .fNavList li a:hover,
  .home .fNavList li.linkHome a,
  .location .fNavList li.linkLocation a,
  .design .fNavList li.linkDesign a,
  .access .fNavList li.linkAccess a,
  .areaguide .fNavList li.linkAreaguide a,
  .plan .fNavList li.linkPlan a,
  .equipment .fNavList li.linkEquipment a,
  .outline .fNavList li.linkOutline a,
  .map .fNavList li.linkMap a {
    color: #fff;
  }

  .fNavList li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #E64136;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
    }

  .fNavList li a:hover::before,
  .home .fNavList li.linkHome a::before,
  .location .fNavList li.linkLocation a::before,
  .design .fNavList li.linkDesign a::before,
  .access .fNavList li.linkAccess a::before,
  .areaguide .fNavList li.linkAreaguide a::before,
  .plan .fNavList li.linkPlan a::before,
  .equipment .fNavList li.linkEquipment a::before {
    transform: scale(1, 1);
  }
	
}

@media print, screen and (min-width: 769px) {

  .fNavList li a {
    font-size: 1.4rem;
  }
	
}

@media print, screen and (min-width: 1201px) {

  .fNavList li a {
    font-size: 1.5rem;
    letter-spacing: .2em;
    padding: 12px 4px;
  }
	
}

/*==========================================
 コンテンツヘッダーのスタイル
===========================================*/

#contentsHead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 140px;
  margin-bottom: 40px;
}

#contentsHead::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f2f5f8;
  content: '';
  animation: fadein_contentsHead 1s .5s forwards;
  opacity: 0;
}

#contentsHead #contentsTitle {
  display: block;
	text-align: center;
}

#contentsHead #contentsTitle .pageTitle {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .5em;
  font-feature-settings: "palt" 1;
  opacity: 0;
  animation: fadein_contentsTitle2 0.8s 1.1s forwards;
  transition-delay: 0.5s;
}

#contentsHead #contentsTitle .pageTitle .en {
  display: block;
	font-size: 3.0rem;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  letter-spacing: .2em;
  font-feature-settings: "palt" 1;
  opacity: 0;
  animation: fadein_contentsTitle1 0.8s .7s forwards;
  margin-bottom: .2em;
}

@keyframes fadein_contentsHead {
  0% {
    opacity: 0;
    transform: translate(0, 100%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes fadein_contentsTitle1 {
  0% {
    opacity: 0;
    transform: translate(0, 30px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes fadein_contentsTitle2 {
  0% {
    opacity: 0;
    transform: translate(0, 40px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media print, screen and (min-width: 601px) {

  #contentsHead {
    height: 200px;
  }

  #contentsHead #contentsTitle .pageTitle {
    font-size: 2.0rem;
  }

  #contentsHead #contentsTitle .pageTitle .en {
    font-size: 4.0rem;
  }

}

@media print, screen and (min-width: 1201px) {

}

/*==========================================
 sectionHead
===========================================*/

.sectionHead {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2em;
}

.sectionHead .sectionTitleWrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 2em;
}

.sectionHead .sectionTitleWrap::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: #fff;
  border-top: 3px solid var(--bg2-color);
  border-bottom: 1px solid var(--bg2-color);
  opacity: 0;
}

.sectionHead .sectionTitle {
  width: 100%;
  font-family: "Cinzel", serif;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: .1em;
  font-feature-settings: "palt" 1;
  color: var(--main-color);
  transform: translateY(100%);
  opacity: 0;
  padding-bottom: 0.5em;
}

.sectionHead.scrollin .sectionTitle {
  animation: anim_sectionTitle 1s 0s forwards ease-in-out;
}

.sectionHead.scrollin .sectionTitleWrap::after {
  animation: anim_sectionText 1s 1.0s ease-out forwards;
}

.sectionHead .sectionSubTitle {
	font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .1em;
  margin-bottom: 1em;
  opacity: 0;
}

.sectionHead.scrollin .sectionSubTitle {
  animation: anim_sectionSubTitle .5s 1.5s ease-out forwards;
}

.sectionHead .sectionText {
	font-size: 1.3rem;
  line-height: 1.8;
  text-align: justify;
  opacity: 0;
}

.sectionHead.scrollin .sectionText {
  animation: anim_sectionText .5s 2.5s ease-out forwards;
}

@keyframes anim_sectionTitle {
  0% {
      opacity: 0;
      transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes anim_sectionSubTitle {
  0% {
      opacity: 0;
      transform: translate(0, 30px);
  }
  100% {
      opacity: 1;
      transform: translate(0, 0);
  }
}

@keyframes anim_sectionText {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@media print, screen and (min-width: 601px) {

  .sectionHead {
  }

  .sectionHead .sectionTitle {
    font-size: 3.4rem;
  }

  .sectionHead .sectionSubTitle {
    font-size: 2.2rem;
  }

  .sectionHead .sectionText {
    font-size: 1.8rem;
    text-align: center;
  }

}

/*==========================================
 sectionBlock
===========================================*/

.sectionBlock {
	padding: 40px 0;
}

@media print, screen and (min-width: 601px) {

  .sectionBlock {
    padding: 80px 0;
  }

}

/*==========================================
 subNav
===========================================*/

@media print, screen and (min-width: 601px) {

  .subNav {
    margin-right: 20px;
  }

  .subNav li {
    margin-bottom: 10px;
  }

  .subNav li:last-of-type {
    margin-bottom: 0;
  }

  .subNav li a {
    /*display: block; */
    color: #ccc;
    text-decoration: none;
    transition: all 0.5s;
    position: relative;
    font-size: 1.3rem;
  }

  .subNav li a i {
    margin-right: 0.4em;
    font-size: 1.4em;
  }

  .subNav li a:hover,
  .map .subNav li.btnMap a,
  .outline .subNav li.btnOutline a {
    color: #fff;
  }
  
}

@media print, screen and (min-width: 1201px) {
  
  .subNav li a {
  }

}

/*==========================================
 contactNav
===========================================*/

#foot1 .contactNav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}
  
.contactNav li {
  text-align: center;
  background: #fff;
  margin-bottom: 10px;
}
  
.contactNav li:last-of-type {
  margin-bottom: 0;
}
  
.contactNav li a {
  display: flex;
  justify-content: center;
  align-items: center;
	width: 110px;
  height: 60px;
	font-size: 1.5rem;
  line-height: 1.0;
  color: #FFF;
	text-decoration: none;
	transition: all 0.5s;
  position: relative;
  overflow: hidden;
}
  
#foot1 .contactNav li a {
	width: 300px;
  letter-spacing: .4em;
}
  
.contactNav li.btnRequest a {
  background: var(--bg-request-color);
}

.contactNav li.btnReserve a {
  background: var(--bg-reserve-color);
}

.contactNav li.btnOnline a {
  background: var(--bg-online-color);
}

.contactNav li a:hover {
  opacity: 0.7;
}
  
.contactNav li a::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  animation: shine 1.0s infinite;
}
  
.contactNav li:nth-child(1) a::before,
.contactNav li:nth-child(3) a::before {
  background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%);
  }
  
.contactNav li:nth-child(2) a::before {
  background-image: linear-gradient(130deg, rgba(240, 240, 240, 0) 25%, rgba(240, 240, 240, 0.5) 50%, rgba(240, 240, 240, 0) 75%);
  }

@keyframes shine {
  100% {
    left: 100%;
  }
}
  
  
@media print, screen and (min-width: 601px) {

  #head .contactNav {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #foot1 .contactNav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
  }

  .contactNav li {
    margin-right: 4px;
    margin-bottom: 0;
  }

  .contactNav li:last-of-type {
    margin-right: 0;
  }

  #foot1 .contactNav li a {
    width: 200px;
    font-size: 1.8rem;
    height: 60px;
  }

}
  
@media print, screen and (min-width: 769px) {
  
  #head .contactNav {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
}

/*==========================================
 residenceBlock
===========================================*/

.residenceBlock {
  padding: 40px 20px;
}

.residenceBlock .banner {
  width: 100%;
  padding: 10px 0;
}

.residenceBlock .banner a {
  display: block;
  transition: all .3s;
}

.residenceBlock .banner a:hover {
  opacity: .8;
}

.residenceBlock .banner img {
  width: 100%;
  height: auto;
}

@media print, screen and (min-width: 601px) {
  
  .residenceBlock {
    padding: 40px 0;
  }

  .residenceBlock .banner {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
  }

}

/*==========================================
 contactBlock
===========================================*/

.contactBlock {
  padding: 40px 0;
}

.contactBlock .contactBox {
  text-align: center;
  margin-bottom: 40px;
  color: #fff;
}

.contactBlock .contactBox .name {
	font-size: 1.2rem;
  line-height: 1.5;
}

.contactBlock .contactBox .dial {
  width: 80%;
  max-width: 320px;
  margin: 0.4em auto;
}

.contactBlock .contactBox .dial img {
  width: 100%;
  height: auto;
}

.contactBlock .contactBox .note {
	font-size: 1.2rem;
  line-height: 1.5;
}

.contactBlock .servan {
  width: 80%;
  max-width: 220px;
  margin: 0 auto;
}

.contactBlock .servan img {
  width: 100%;
  height: auto;
}

@media print, screen and (min-width: 601px) {

  .contactBlock {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  
  .contactBlock .contactBox {
    width: 340px;
    text-align: left;
    margin-bottom: 0;
    margin-right: 40px;
  }
  
  .contactBlock .contactBox .name {
    font-size: 1.2rem;
  }

  .contactBlock .contactBox .dial {
    width: 100%;
    max-width: none;
    margin: 0.6em auto;
  }

  .contactBlock .contactBox .note {
    font-size: 1.2rem;
  }

  .contactBlock .servan {
    width: 200px;
    max-width: none;
    margin: 0;
  }

}

/*==========================================
 noteBox
===========================================*/

.noteBox {
  width: 100%;
	padding: 0 10px;
  text-align: left;
}

.noteBox .noteText {
	font-size: 1.2rem;
	line-height: 1.5;
  text-align: justify;
}

@media print, screen and (min-width: 601px) {

  .noteBox {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }

  .noteBox .noteText {
    font-size: 1.4rem;
  }

}

/*==========================================
 共通部品
===========================================*/

.col_w100,
.col_w75,
.col_w66,
.col_w50,
.col_w33,
.col_w25 {
	width: 100%;
}

@media print, screen and (min-width: 601px) {
  
  .col_w100 {
    width: 100%;
  }

  .col_w75 {
    width: 75%;
  }

  .col_w66 {
    width: 66.666%;
  }

  .col_w50 {
    width: 50%;
  }

  .col_w33 {
    width: 33.333%;
  }

  .col_w25 {
    width: 25%;
  }
  
}


/*==========================================
 animation
===========================================*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}

.fadeIn{
  animation-name: fadeInAnime;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}

.fadeDown{
  animation-name:fadeDownAnime;
  animation-duration: 1.0s;
  animation-fill-mode:forwards;
  animation-timing-function: ease-out;
  opacity:0;
}

.fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration: 1.0s;
  animation-fill-mode:forwards;
  animation-timing-function: ease-out;
  opacity:0;
}

.fadeRight{
  animation-name:fadeRightAnime;
  animation-duration: 1.0s;
  animation-fill-mode:forwards;
  animation-timing-function: ease-out;
  opacity:0;
}


.delay02 {
  animation-delay: 0.2s;
}

.delay04 {
  animation-delay: 0.4s;
}

.delay06 {
  animation-delay: 0.6s;
}

.delay08 {
  animation-delay: 0.8s;
}

.delay10 {
  animation-delay: 1.0s;
}

.delay20 {
  animation-delay: 2.0s;
}

.delay30 {
  animation-delay: 3.0s;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-50px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(50px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}


@media print{

  body {
    width: 980px;
  }

  header {
    position: relative;
  }

  main {
    padding-top: 0;
  }

  #page-top a {
    display: none;
  }

  .fadein {
    opacity: 1 !important;
  }

  .sectionHead .sectionIcon,
  .sectionHead .sectionTitleEn,
  .sectionHead .sectionTitleJp {
    opacity: 1;
  }
  
}