@charset "UTF-8";
/*----------------------------------
  Base
------------------------------------*/
html {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: auto;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  font-family: "Noto Serif JP", serif;
  line-height: 1.75;
}

[lang="en"] {
  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 500;
  float: right;
  margin-top: 15px;
  letter-spacing: 0.03em;
  line-height: 1.5em;
}


@media (min-width: 375px) {
  [lang="en"]  {
    font-size: 10px;
  }
}

@media (min-width: 900px) {
  [lang="en"]  {
    font-size: 14px;
  }
}


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

a:hover {
  color: #555;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

iframe {
  width: 100%;
}


/*----------------------------------
  Loading animation
------------------------------------*/

#mainSite {
	top: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
}

.anime {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 110vh;
	z-index: 900;
	width: 100%;
	background-color: #fff;
	position: relative;
	-webkit-transition: all 3s ease;
          transition: all 3s ease;
}

.anime.loaded{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.loading-anime picture {
	display: block;
	top: 30vh;
	position: relative;
	margin: 0 auto;
	text-align: center;
  animation-name: morphing;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}


@keyframes morphing {
  0% {
      opacity: 0;
  }
  20% {
      opacity: 1;
  }
  80% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

@media (min-width: 768px) {

  .loading-anime picture {
	  top: 37vh;
  }

}

/*----------------------------------
  Header
------------------------------------*/
.header-container {
  position: fixed;
  display: flex;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  margin: 0 auto;
  z-index: 400;
}

.header-bg {
  position: fixed;
  display: flex;
  margin: 0 auto;
  top: 0;
  width: 100%;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 0 5px rgb(0 0 0 / 30%);
  opacity: 0.85;
  z-index: 100;
}

.header-item_mb,
.header-item_pc {
  display: flex;
  margin: 0 auto;
  text-align: center;
  z-index: 300;
}

.header-item_pc {
  display: none;
}

.header-logo_mb {
  width: 135px;
  margin-top: 15px;
}

.header-logo_vertical,
.header-logo_txt {
  display: none;
}

.header-ico_mb {
  position: absolute;
  margin: 21px 10px 0 auto;
  right: 0;
}

.header-ico_mb ul {
  display: flex;
  margin: 0 auto;
  width: 75px;
  justify-content: space-between;
}

@media (min-width: 375px) {
  .header-logo_mb {
    width: 155px;
  }
}

@media (min-width: 1024px) {

  .header-logo_vertical {
    display: block;
    position: absolute;
    top: 60px;
    margin-left: 50px;
    width: 91px;
    height: calc( 100vh - 120px);
  }

  .header-logo_mark {
    display: block;
  }

  .header-logo_txt {
    display: block;
    position: absolute;
    bottom: 0;
  }

  .header-logo_txt ul {
    text-align: left;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: #333;
    line-height: 2em;
    letter-spacing: 0.25em;
  }

  .header-logo_txt ul li:nth-child(3) {
    padding-bottom: 10px;
    border-bottom: solid 2px #333;
  }

  .header-item_mb {
    display: none;
  }

  .header-item_pc {
    display: flex;
    margin-right: 0;
    padding-top: 5px;
  }

  .header-ico_pc {
    margin: 10px 15px 0 0;
    width: fit-content;
  }
  
  .header-ico_pc ul {
    display: flex;
    width: 290px;
  }

  .header-ico_pc img {
    height: 30px;
    margin-left: 15px;
  }
  
}

/*----------------------------------
  Navigation
------------------------------------*/

.navi-pc-position {
  display: none;
}

.navi-mb_container {
  position: fixed;
  padding: 0 25px;
  margin: 0 auto;
  bottom: 10px;
  width: 100%;
  z-index: 500;
}

.navi-mb{
  max-width: 930px;
  width: 100%;
  height: 50px;
  background-color: #5bbade;
  border-radius: 25px;
}

.navi-mb ul {
  display: flex;
  margin: 0 auto;
  width: 75%;
  justify-content: space-between;
}

.navi-mb li {
  margin-bottom: 30px;
}

.navi-mb a:hover img {
  color: rgb(88, 211, 98);
}

.navi-mb_place {
  margin-top: 10px;
  max-width: 50px;
  text-align: center;
}

.navi-mb_place a {
  display: block;
  margin: 0 auto;
}

.navi-mb_place a img {
  height: 18px;
}

.navi-mb_txt {
  text-align: center;
  font-size: 10px;
  color: #fff;
  max-width: 50px;
  margin-top: -7px;
}

.navi-mb_contact a:hover .navi-mb_txt {
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  max-width: 50px;
}


@media (min-width: 375px) {
  .navi-mb_container {
    padding: 0 35px;
  }
}

@media (min-width: 1024px) {

  .header-logo {
    width: 135px;
    float: left;
    margin: 15px 0 0 80px;
  }

  .navi-pc-position {
    display: flex;
    max-width: 1500px;
    margin-left: auto;
    margin-right: 0;
  }  

  .navi-mb{
    display: none;
  }
  
  .navi-pc{
    position: relative;
    display: flex;
    margin: 0 auto;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 100;
  }

  .navi-pc-position ul {
    position: relative;
    display: flex;
    top: 0px;
    right: 15px;
  }
  
  .navi-pc li {
    padding-left: 20px;
    letter-spacing: 0.2em;
  }

  .navi-pc_place {
    margin-top: 10px;
    text-align: center;
  }
  
  .navi-pc_place a {
    display: block;
    margin: 0 auto;
  }
  
  .navi-pc_txt {
    text-align: center;
    font-size: 14px;
    border-bottom: solid 1px #333333;
  }
  
  .navi-pc_border{
    border-bottom: 1px solid #dddddd ;
    padding: 0 15px;
    position: relative;
    display: inline-block;
    color: #333333;
    text-decoration: none;
  }

  .navi-pc_border::after,
  .navi-pc_border::before {
    background-color: #339933;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
  }
  
  .navi-pc_border::before {
    width: 0px;
    height: 1px;
    left: -1px;
    bottom: -1px;
  }

  .navi-pc_border:hover::before {
  width: 100%;
  width: calc(100% + 1px);
  }

  .navi-pc_border:hover span::before {
  height: 100%;
  height: calc(100% + 1px);
  }
  
  .navi-pc_place img {
    height: 35px;
    margin-left: 15px;
  }
    
}



/*----------------------------------
  Footer
------------------------------------*/
.footer {
  position: relative;
  display: flex;
  background: #874F30;
  color: #ffffff;
  width: 100%;
  height: 265px;
  margin: 110px auto 0 auto;
  padding-top: 15px;
  text-align: center;
}

.footer * {
  margin: 0 auto;
}

.footer-box{
  width: 100%;
}

.footer-catch{
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.footer ul {
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  max-width: 500px;
  width: fit-content;
}

.footer li {
  margin: 0 30px;
}

/*ロゴ*/
.footer .logo {
  text-align: center;
}

.footer .logo img {
  margin-top: 20px;
  height: 100px;
}

/*コピーライト*/
.footer-copyright {
  margin-top: 15px;
  padding: 10px 5px;
  text-align: center;
  font-size: 1.2vw;
  letter-spacing: 0.2em;
}


/*ページトップ*/

.pagetop-box {
  position: absolute;
  display: flex;
  top: 0;
  right: 10px;
  margin-top: 20px;
  width: 20px;
  height: 200px;
  flex-direction: column;
  align-items: center;
  z-index: 150;
}

.pagetop-box a {
  display: flex;
  color: #fff;
  height: 150px;
  flex-direction: column;
  align-items: center;
}

.pagetop-box_circle1 {
  border: solid 1px #fff;
  border-radius: 50%;
  background-color: #fff;
  width: 5px;
  height: 5px;
}

.pagetop-box_line {
	width: 1px;
	height: 60px;
	background-color: #fff;
	transition: all 1.4s;
}

.pagetop-box_line::after {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
  height: 60px;
	background-color: #111;
	-webkit-animation: lineMove 3.0s ease infinite;
	animation: pagetopMove 3.0s ease infinite;
}

@keyframes pagetopMove {
	0% {
		top: 65px;
		height: 0;
	}
	20% {
		top: 0;
		height: 65px;
	}
	40% {
		top: 0;
		height: 0;
	}
	100% {
		top: 0;
		height: 0;
	}
}

.pagetop-box_circle2 {
  border: solid 1px #fff;
  border-radius: 50%;
  background-color: #fff;
  width: 5px;
  height: 5px;
}

.pagetop-box_txt {
	position: absolute;
  top: 90px;
  font-size: 12px;
  letter-spacing: 0.15em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  word-break: break-all;
}


@media (min-width: 768px) {

  .footer {
    height: 500px;
    padding-top: 30px;
    margin: 150px auto 0 auto;
  }
  
  .footer-catch{
    font-size: 16px;
    letter-spacing: 0.2em;
  }

  .footer-copyright {
    margin-top: 40px;
    font-size: 12px;
  }

  .footer .logo img {
    margin-top: 50px;
    height: 200px;
  }

  .vertical-box_txt {
    font-size: 14px;
  }

}

@media (min-width: 1000px) {

  .footer {
    height: 500px;
    padding-top: 70px;
    margin: 150px auto 0 auto;
  }

  .footer-copyright {
    margin-top: 70px;
    font-size: 12px;
  }

  .footer .logo img {
    margin-top: 80px;
    height: 200px;
  }

}


/*----------------------------------
  Layout
------------------------------------*/
.container {
  margin: 0;
  z-index: 300;
}

#intro {
  margin: 0 auto;
  padding: 0 25px;
}

#wonder,
#goods,
#about,
#contact {
  margin: 100px auto 0;
  text-align: center;
  padding: 0 25px;
}

@media (min-width: 375px) {

  #intro {
    padding: 0 35px;
  }

  #wonder,
  #goods,
  #about,
  #contact {
    max-width: 1024px;
    margin: 120px auto 0;
    padding: 0 35px;
  }
}

@media (min-width: 1024px) {

  #intro {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 35px;
  }

  #wonder,
  #goods,
  #about,
  #contact {
    max-width: 1280px;
    margin: 200px auto 0;
    padding: 0 35px;
  }
}

@media (min-width: 1280px) {

  #intro {
    max-width: 1280px;
  }

}

/*----------------------------------
  Component
------------------------------------*/

/* title intro */
.ttl-section_intro {
  margin-top: 100px;
  max-width: 600px;
  width: 80vw;
  color: #333;
  font-size: calc((16 / 16)*1em);
  font-family: "Noto Serif JP", serif;
  text-align: left;
  letter-spacing: 0.2em;
  line-height: 1.5em;
}

.ttl-section_intro_kana {
  font-size: calc((12 / 16)*1em);
}

.ttl-section_intro_line {
  margin: 5px 0 0 -0.5em;
  width: 70vw;
  max-width: 600px;
}

/* title main1 */
.ttl-section_main1 {
  margin: 100px auto 0 auto;
  max-width: fit-content;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #333;
}

table {
  width: 100%;
  height: fit-content; 
}

table .td_left1 {
  width: 5px;
  height: 4px;  
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
}

table .td_left2 {
  width: 5px;
  height: 8px;  
  border-right: 1px solid #333;
}

table .td_left3 {
  width: 5px;
  height: 4px;  
  border-top: 1px solid #333;
  border-right: 1px solid #333;
}

table .td_center1,
table .td_center3 {
  width: 97%;
  height: 4px;  
}

table .td_center2,
table .td_center2_online,
table .td_center2_contact {
  width: 97%;
  height: 28px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  background-image: url(../img/mb_bg_miashi_b.png);
  font-size: calc((14 / 16)*1em);
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.2em;
  line-height: 1.5em;
  padding: 4px 5px;
}

table .td_right1 {
  width: 5px;
  height: 4px;  
  border-bottom: 1px solid #333;
  border-left: 1px solid #333;
}

table .td_right2 {
  width: 5px;
  height: 8px;  
  border-left: 1px solid #333;
}

table .td_right3 {
  width: 5px;
  height: 4px;  
  border-top: 1px solid #333;
  border-left: 1px solid #333;
}

table .td_center2_contact {
  background-image: url(../img/mb_bg_miashi_2.png);
}

/* title wonder sentence */
.ttl-sentence_wonder {
  display: flex;
  margin-top: 50px;
  color: #333;
  font-family: "Noto Serif JP", serif;
  font-size: calc((14 / 16)*1em);
  font-weight: bold;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.05em;
  align-items: center;
}

.ttl-sentence_about_flex {
  display: flex;
}

.ttl-sentence_about_border1 {
  content: "";
  width: 2em;
  border-bottom: 1.5px solid #915D46;
}

.ttl-sentence_about_border2 {
  content: "";
  width: 100%;
  border-bottom: 1.5px solid #aaa;
}

.ttl-sentence_about {
  display: block;
  margin-top: 50px;
  color: #333;
  font-family: "Noto Serif JP", serif;
  font-size: calc((14 / 16)*1em);
  font-weight: bold;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.05em;
  align-items: center;
  padding-bottom: 5px;
}

.ttl-sentence_about_kana {
  font-size: calc((10 / 16)*1em);
  align-items: center;
}

/* title sasumaru illust */
.ttl-goods_sasumaru {
  text-align: right;
  margin: -50px 5px 0 0;
}

/* button sasumaru online */
.btn_online {
  display: block;
  margin: 50px auto 0 auto;
  min-width: 240px;
  max-width: fit-content;
  width: 100%;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #333;
}

.btn_online table {
  width: 220px;
}

table .td_center2_online {
  width: 96%;
  height: 28px;
  background-image: none;
  padding: 10px 40px;
}

.td_center1_online,
.td_center3_online {
  width: 96%;
  height: 4px;  
}

.td_online_line {
  position: absolute;
  margin: -25.5px 0 0 195px;
  width: 50px;
  border-top: 1px solid #333;
}

.td_online_rotate {
  position: absolute;
  transform: rotate(45deg);
  width: 5px;
  margin: -27px 0 0 240px;
  border-top: 1px solid #333;
}

/* button reserve & tel */
.btn_reserve,
.btn_tel {
  width: 90%;
  margin: 50px auto -30px auto;
  padding: 32px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  border: none;
  font-size: 20px;
  letter-spacing: 0.3em;
  background-color: #ffffff;
  font-family: inherit;
  -webkit-appearance: none;
}

.btn_reserve {
  margin: 0 auto;
  background-image: url(../img/btn_reserve.png);
}

.btn_reserve:hover {
  background-image: url(../img/btn_reserve_hover.png);
}

.btn_reserve:visited {
  background-image: url(../img/btn_reserve.png);
}

.btn_tel {
  background-image: url(../img/btn_tel.png);
}


@media (min-width: 375px) {
  .ttl-section_intro {
    margin-top: 150px;
    font-size: 3.5vw;
    line-height: 1.5;
  }
  .ttl-section_main1 {
    max-width: 768px;
  }
  
  .ttl-section_main1 table .td_center2 {
    width: 97%;
    height: 42px;
    padding: 10px;
    background-image: url(../img/tb_bg_miashi_b.png);
    font-size: calc((17 / 16)*1em);
  }

  .ttl-goods_sasumaru {
    text-align: right;
    margin: -60px 3% 0 0;
  }

  .btn_online {
    margin: 80px auto 0 auto;
  }

  .btn_online table {
    width: 270px;
  }

  table .td_center2_online {
    width: 97%;
    font-size: calc((20 / 16)*1em);
  }
  
  .td_center1_online,
  .td_center3_online {
    width: 96%;
    height: 4px;  
  }
  
  .td_online_line {
    margin: -30px 0 0 236px;
    width: 60px;
  }
  
  .td_online_rotate {
    width: 7px;
    margin: -32.2px 0 0 290px;
  }

  table .td_center2_contact {
    width: 97%;
    height: 42px;
    padding: 10px;
    background-image: url(../img/tb_bg_miashi_2.png);
    font-size: calc((17 / 16)*1em);
  }
}

@media (min-width: 768px) {
  .ttl-section_main1 {
    max-width: 1000px;
  }
  
  .ttl-section_main1 table .td_center2 {
    width: 98%;
    height: 42px;
    padding: 10px;
    background-image: url(../img/pc_bg_miashi_b.png);
    font-size: calc((22 / 16)*1em);
  }

  .ttl-sentence_wonder {
    margin-top: 100px;
  }

  .ttl-goods_sasumaru {
    text-align: right;
    margin: -100px 3% 0 0;
  }

  .ttl-goods_sasumaru img {
    width: 80px;
    height: auto;
  }

  .ttl-sentence_about {
    margin-top: 70px;
    font-size: calc((22 / 16)*1em);
  }
  
  .ttl-sentence_about_kana {
    font-size: calc((14 / 16)*1em);
  }
  
  .btn_online {
    margin: 80px auto 0 auto;
  }

  .btn_online table {
    width: 350px;
  }

  table .td_center2_online {
    width: 97%;
    font-size: calc((22 / 16)*1em);
  }
  
  .td_center1_online,
  .td_center3_online {
    width: 96%;
    height: 4px;  
  }
  
  .td_online_line {
    margin: -32px 0 0 315px;
    width: 60px;
  }
  
  .td_online_rotate {
    width: 7px;
    margin: -35px 0 0 368px;
  }

  table .td_center2_contact {
    width: 98%;
    height: 42px;
    padding: 10px;
    background-image: url(../img/pc_bg_miashi_2.png);
    font-size: calc((22 / 16)*1em);
  }
}

@media (min-width: 900px) {
  .ttl-section_intro {
    margin-top: 200px;
    font-size: calc((32 / 16)*1em);
    line-height: 1.5;
  }

  .ttl-sentence_wonder {
    font-size: calc((20 / 16)*1em);
  }
  
}

@media (min-width: 1000px) {
  .btn_reserve,
  .btn_tel {
    padding: 34.5px;
  }
  .btn_reserve {
    margin: 20px auto 150px auto;
  }
}

@media (min-width: 1024px) {
  .ttl-sentence_about {
    margin-top: 100px;
    font-size: calc((24 / 16)*1em);
  }
  
  .ttl-sentence_about_kana {
    font-size: calc((14 / 16)*1em);
  }
  
}


/*illust*/

.ill-top {
  position: absolute;
  right: 0;
  bottom: 80px;
  z-index: 500;
}

.ill-left {
  margin: 30px 0 10px -25px;
  text-align: left;
}

.ill-right {
  margin: -30px 0 1px 25px;
  text-align: right;
}

.ill-center {
  margin: 0 auto;
  float: right;
}

.ill-top img {
  width: 120px;
  height: auto;
  opacity: 0.2;
}

.ill-left picture img,
.ill-right picture img,
.ill-center picture img {
  width: 200px;
  height: auto;
}

.ill-center picture img {
  margin-top: 50px;
}

@media (min-width: 375px) {

  .ill-top {
    bottom: -70px;
  }

  .ill-left {
    margin: 20px 0 10px -35px;
  }

  .ill-right {
    margin: 20px 0 20px 35px;
  }

  .ill-top img {
    width: 150px;
  }
  
  .ill-left picture img,
  .ill-right picture img,
  .ill-center picture img {
    width: 250px;
  }
}

@media (min-width: 768px) {
  .ill-top img {
    width: 200px;
  }
  .ill-center picture img {
    margin-top: 0;
  }
}

@media (min-width: 1000px) {
  .ill-left {
    margin: 0 0 0 -35px;
  }

  .ill-right {
    margin: 80px -35px 0 0;
  }

  .ill-right_adust {
    margin: 80px 0 0 20px;
  }

  .ill-top img {
    width: 250px;
  }

  .ill-left picture img,
  .ill-right picture img,
  .ill-center picture img {
    width: 350px;
  }
/*
  .ill-center picture img {
    margin: -915px 0 0 600px;
  }
*/
}

@media (min-width: 1280px) {
  .ill-left {
    margin-left: calc((100vw - 1280px) / 2 * -1);
  }

  .ill-right {
    margin: 0 calc((100vw - 1280px) / 2 * -1) 0 0;
  }

  .ill-top img {
    width: 300px;
  }

  .ill-left picture img,
  .ill-right picture img {
    width: 450px;
  }
/*
  .ill-center picture img {
    width: 450px;
    margin: -900px 0 0 700px;
  }
*/
}

/*image*/

.img-circle {
  margin-top: 30px;
  text-align: center;
}

.img-circle picture img {
  width: 150px;
  height: auto;
}

@media (min-width: 375px) {
  .img-circle picture img {
    width: 200px;
  }
}

@media (min-width: 768px) {
  .img-circle picture img {
    width: 250px;
  }
}

@media (min-width: 1024px) {
  .img-circle picture img {
    width: 350px;
    margin-left: 20px;
  }
}

@media (min-width: 1280px) {
  .img-circle picture img {
    width: 450px;
    margin-left: 30px;
  }
}


/*button layout*/
.btn-center {
  max-width: 400px;
  margin: 40px auto;
}

@media (min-width: 768px) {
  .btn-center {
    margin: 50px auto;
  }
}

/*frame border (rounded corners)*/

.line-round {
  max-width: 1280px;
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  width: 100%;
}

.line-round_header {
  padding: 15px;
  border-radius: 30px;
  font-size: calc((14 / 16)*1em);
  font-weight: 100;
  vertical-align: middle;
  background-color: #777;
  color: #fff;
}

.line-round_text {
  margin-top: 5px;
  padding: 15px;
  border: solid 1px #555;
  border-radius: 30px;
  font-size: calc((14 / 16)*1em);
  vertical-align: middle;
  text-align: center;
  letter-spacing: 0.1em;
  color: #555;
}

@media screen and (min-width: 768px) {
  .line-round_header {
    border-radius: 40px;
    font-size: calc((20 / 16)*1em);
  }
  
  .line-round_text {
    border-radius: 40px;
    font-size: calc((20 / 16)*1em);
  }
}

@media screen and (min-width: 900px) {
  .line-round_header {
    margin-top: 20px;
    border-radius: 50px;
    font-size: calc((22 / 16)*1em);
  }
  
  .line-round_text {
    border-radius: 50px;
    font-size: calc((22 / 16)*1em);
  }
}

/*table(border dotted)*/

.table-dotted_inner {
  max-width: 1280px;
  text-align: left;
  margin-top: 20px;
  font-size: 14px;
  width: 100%;
}

.table-dotted_header_row {
  background-color: #efefef;
  text-align: center;
}

.table-dotted_header {
  padding: 15px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: calc((14 / 16)*1em);
  font-weight: 100;
  vertical-align: middle;
  background-color: #777;
  color: #fff;
}

.table-dotted_text {
  padding: 15px 5px;
  border-top: 1px dotted #ddd;
  border-bottom: 1px dotted #ddd;
  font-family: "Montserrat", sans-serif;
  font-size: calc((14 / 16)*1em);
  vertical-align: top;
  text-align: left;
  letter-spacing: 0.1em;
  color: #555;
}

.table-dotted_text1 {
  padding: 15px 5px;
  border-top: 1px dotted #ddd;
  border-bottom: 1px dotted #ddd;
  font-family: "Montserrat", sans-serif;
  font-size: calc((14 / 16)*1em);
  width: 75px;
  vertical-align: top;
  text-align: left;
  letter-spacing: 0.1em;
  color: #555;
}

.table-dotted_text2 {
  padding: 15px 5px;
  border-top: 1px dotted #ddd;
  border-bottom: 1px dotted #ddd;
  font-family: "Montserrat", sans-serif;
  font-size: calc((14 / 16)*1em);
  vertical-align: top;
  text-align: left;
  letter-spacing: 0.1em;
  color: #555;
}

@media screen and (min-width: 768px) {
  .table-dotted_inner {
    margin-top: 40px;
  }

  .table-dotted_header {
    font-size: calc((20 / 16)*1em);
  }

  .table-dotted_text {
    padding: 15px 15px 15px 20px;
    font-size: calc((16 / 16)*1em);
  }
    
  .table-dotted_text1 {
    padding: 15px 15px 15px 20px;
    font-size: calc((16 / 16)*1em);
    width: 150px;
  }

  .table-dotted_text2 {
    padding: 15px;
    font-size: calc((16 / 16)*1em);
  }
}

@media screen and (min-width: 900px) {
  .table-dotted_inner {
    margin-top: 60px;
  }

  .table-dotted_header {
    font-size: calc((22 / 16)*1em);
  }

  .table-dotted_text {
    padding: 15px 15px 15px 25px;
    font-size: calc((18 / 16)*1em);
  }
  
  .table-dotted_text1 {
    padding: 15px 15px 15px 25px;
    font-size: calc((18 / 16)*1em);
    width: 200px;
  }

  .table-dotted_text2 {
    padding: 15px;
    font-size: calc((18 / 16)*1em);
  }
}

/*scroll-line(for mobile)*/

.scroll-line_container {
  position: absolute;
	right: 25px;
	bottom: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 250;
}

.scroll-line_circle1 {
  width: 5px;
  height: 5px;
  border: solid 1px #fff;
  border-radius: 50%;
  background-color: #fff;
  margin-top: -2.5px;
  z-index: 2;
}

.scroll-line {
	width: 1px;
	height: 50px;
	background-color: #888;
  z-index: 1;
	transition: all 1.4s;
}

.scroll-line::after {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
  height: 50px;
	background-color: #FFF;
	-webkit-animation: lineMove 3.0s ease infinite;
	animation: lineMove 3.0s ease infinite;
}

@keyframes lineMove {
	0% {
		top: 55px;
		height: 0;
	}
	20% {
		top: 0;
		height: 55px;
	}
	40% {
		top: 0;
		height: 0;
	}
	100% {
		top: 0;
		height: 0;
	}
}

.scroll-line_circle2 {
  width: 5px;
  height: 5px;
  border: solid 1px #fff;
  border-radius: 50%;
  background-color: #fff;
  z-index: 2;
}

.scroll-line_txt {
  margin-top: 10px;
  font-size: 6px;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.3em;
  color: #fff;
  word-break: break-all;
}

/*scroll*/

.scroll-mouse_ellipse {
  width: 28px;
  height: 50px;
  border: solid 1px #fff;
  border-radius: 25px;
}

.scroll-mouse_circle1 {
  width: 5px;
  height: 5px;
  border: solid 1px #fff;
  border-radius: 50%;
  background-color: #fff;
  margin-top: -52.5px;
  z-index: 2;
}

.scroll-mouse_line {
	width: 1px;
	height: 20px;
	background-color: #888;
  z-index: 1;
	transition: all 1.4s;
}

.scroll-mouse_line::after {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
  height: 20px;
	background-color: #FFF;
	-webkit-animation: lineMove 3.0s ease infinite;
	animation: mouseMove 3.0s ease infinite;
}

@keyframes mouseMove {
	0% {
		top: 0;
		height: 0;
	}
	20% {
		top: 0;
		height: 0;
	}
	40% {
		top: 0;
		height: 25px;
	}
	100% {
		top: 25px;
		height: 0;
	}
}

.scroll-mouse_circle2 {
  width: 5px;
  height: 5px;
  border: solid 1px #fff;
  border-radius: 50%;
  background-color: #fff;
  margin-bottom: 20px;
  z-index: 2;
}

.scroll-mouse_txt {
  margin-top: 10px;
  font-size: 6px;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.3em;
  color: #fff;
  word-break: break-all;
}

/*scroll-top*/

.scroll-top_container {
  position: absolute;
	right: 25px;
	top: -85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 250;
}

.scroll-top_container img {
  width: 35px;
}

.scroll-top_txt {
  margin-top: 5px;
  font-size: 8px;
  font-family: "Montserrat", sans-serif;
  text-align: justify;
  letter-spacing: 0.1em;
  color: #333;
  word-break: break-all;
}

@media (min-width: 768px) {

  .scroll-top_container {
    right: 50px;
    top: -125px;
  }

  .scroll-top_container img {
    width: 55px;
  }
}

@media (min-width: 1024px) {

  .scroll-top_container img {
    width: -150px;
  }
}


/*note*/

.note-single {
  text-align: right;
  font-size: 0.5em;
  letter-spacing: 2px;
  line-height: 2.5em;
  margin: 0 15px 0 30px;
  color: #666;
}

@media screen and (min-width: 768px) {
  .note-single {
    font-size: 0.7em;
    margin: 0 50px 0 30px;
  }
}

@media screen and (min-width: 900px) {
  .note-single {
    font-size: 0.9em;
  }
}

@media screen and (min-width: 1024px) {
  .note-single {
    margin: 0;
  }
}

/*section break*/

.section-line {
  width: 100%;
  margin: 80px auto;
  padding: 0 25px;
}

@media screen and (min-width: 375px) {
  .section-line {
    padding: 0 35px;
  }
}

@media screen and (min-width: 1024px) {
  .section-line {
    margin: 100px auto;
  }
}

/*----------------------------------
  Contents Animation
------------------------------------*/

/*--- fadein-bottom ---*/

.fadein-bottom{
  -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transform: translateY(70%);
  -moz-transform: translateY(70%);
  -ms-transform: translateY(70%);
  transform: translateY(70%);
  opacity: 0;
}

.fadein-bottom.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}

.fadein-bottom30{
  -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transform: translateY(30%);
  -moz-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
  opacity: 0;
}

.fadein-bottom30.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}

.fadein-left{
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s ease-out;
  transition-delay: 1s;
  -webkit-transform: translateX(-50px);
  -moz-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px);
  opacity: 0;
}

.fadein-left.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.fadein-left_delay{
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s ease-out;
  transition-delay: .5s;
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
  opacity: 0;
}

.fadein-left_delay.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.fadein-bottom20_rotateL,
.fadein-bottom20_rotateR1,
.fadein-bottom20_rotateR2 {
  -webkit-transition: all 2s linear;
  -o-transition: all 2s linear;
  transition: all 2s linear;
  opacity: 0;
}

.fadein-bottom20_rotateL{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: bottom left;
}

.fadein-bottom20_rotateR1{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  transform-origin: bottom right;
}

.fadein-bottom20_rotateR2{
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
  transform-origin: bottom right;
}

.fadein-bottom20.active,
.fadein-bottom20.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}

.fadein-bottom20_rotateL.active,
.fadein-bottom20_rotateR1.active{
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0.7;
}

.fadein-bottom20_rotateR2.active{
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0.5;
}


/*--- fadein-blur ---*/

.fadein-blur {
  transition: all 1s ease-out;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  transform: translateY(10px);
  transition-delay: .3s;
  opacity: 0;
}

.fadein-blur.active {
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -ms-filter: blur(0);
  filter: blur(0);
  transform: translateY(0);
  opacity: 1;
}

.fadein-blur2 {
  -webkit-transition: all 2s linear;
  -o-transition: all 2s linear;
  transition: all 2s linear;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  opacity: 0;
}

.fadein-blur2.active {
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -ms-filter: blur(0);
  filter: blur(0);
  opacity: 1;
}


/*--- floating animation ---*/

.floating-animation1 {
	animation:floating ease-in-out 4s infinite alternate;
	-webkit-animation:floating ease-in-out 4s infinite alternate;
	-moz-animation:floating ease-in-out 4s infinite alternate;
}

.floating-animation2 {
	animation:floating ease-in-out 3s infinite alternate;
	-webkit-animation:floating ease-in-out 3s infinite alternate;
	-moz-animation:floating ease-in-out 3s infinite alternate;
}

.floating-animation3 {
	animation:floating ease-in-out 5s infinite alternate;
	-webkit-animation:floating ease-in-out 5s infinite alternate;
	-moz-animation:floating ease-in-out 5s infinite alternate;
}

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

	@-webkit-keyframes floating{
		0%   { -webkit-transform:translate(0%, 0%);  opacity:1;}
		100% { -webkit-transform:translate(0%, -30px); opacity:0.2;}
	}

	@-moz-keyframes floating{
		0%   { -moz-transform:translate(0%, 0%);  opacity:1;}
		100% { -moz-transform:translate(0%, -30px); opacity:0.2;}
	}


/*----------------------------------
  Main Visual
------------------------------------*/
.mv {
  position: relative;
  height: 100vh;
  background-image: url(../img/mb_bg_top.png);
  background-repeat: no-repeat;
  object-fit: cover;
  top: 0;
  z-index: 200;
}

.mv-catch {
  top: 150px;
  left: 33vw;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  position: absolute;
  max-width: fit-content;
  line-height: 3em;
  letter-spacing: 1em;
  color: #ffffff;
  z-index: 250;
  opacity: 0;
	-webkit-animation: fadeup-catch 2.5s ease-in-out;
	animation: fadeup-catch 2.5s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

.mv-thanks {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 25px;
  text-align: left;
}

.mv-thanks h1 img {
  width: 150px;
  margin: 30px 0;
}

@keyframes fadeup-catch {
	0% {
    filter: blur(20px);
    transform: translateY(20px);
    opacity: 0;
	}
	100% {
    filter: blur(0);
    transform: translateY(0);
    opacity: 1;
	}
}

.mv-catch_container {
  display: flex;
  flex-direction: row-reverse;
}

.mv-catch_serif01 {
  min-height: max-content;
  font-family: 'Kiwi Maru', serif;
  font-size: calc((26 / 24)*1.2em);
  writing-mode: vertical-rl;
}

.mv-ph_container {
  padding: 50px 25px 0;
}

.mv-ph {
  text-align: right;
  margin-right: -25px;
  height: calc(100vh - 120px);
  height: calc(var(--vh) * 100 - 120px);
  position: relative;
  overflow: hidden;
}

.main_img1,
.main_img2,
.main_img3 {
  width: 100%;
  height: calc(100vh - 120px);
  height: calc(var(--vh) * 100 - 120px);
  opacity: 0;
  border-radius: 10px 0 0 10px;
  background-image: url(../img/mb_bg_main01.jpg);
  background-repeat: no-repeat;
  object-fit: cover;
  position: absolute;
  -webkit-animation: anime 18s 0s infinite;
  animation: mv-anime 18s 0s infinite;
  z-index: 200;
}

.main_img2 {
  background-image: url('../img/mb_bg_main02.jpg');
}

.main_img3 {
  background-image: url('../img/mb_bg_main03.jpg');
}

.main_img2 {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.main_img3 {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

@keyframes mv-anime {
  0% {
      opacity: 0;
  }
  8% {
      opacity: 1;
  }
  17% {
      opacity: 1;
  }
  90% {
      opacity: 0;
/*       -webkit-transform: scale(1.1); */
          z-index:90;
  }
  100% { opacity: 0 }
}

@-webkit-keyframes mv-anime {
  0% {
      opacity: 0;
  }
  8% {
      opacity: 1;
  }
  17% {
      opacity: 1;
  }
  90% {
      opacity: 0;
/*       -webkit-transform: scale(1.1); */
          z-index:90;
  }
  100% { opacity: 0 }
}

@media (min-width: 375px) {
  .mv {
    background-image: url(../img/tb_bg_top.png);
  }
  
  .mv h1 {
    width: 120px;
    left: 40%;
  }
  
  .mv-catch {
    line-height: 3.5em;
  }

  .mv-ph_container {
    padding: 60px 35px 0;
  }

  .mv-ph {
    margin-right: -35px;
  }
  
  .mv-ph,
  .main_img1,
  .main_img2,
  .main_img3 {
    height: calc(100vh - 130px);
    height: calc(var(--vh) * 100 - 130px);
  }

  .main_img1 {
    background-image: url('../img/tb_bg_main01.jpg');
    background-position: 90% center;
  }

  .main_img2 {
    background-image: url('../img/tb_bg_main02.jpg');
    background-position: 70% center;
  }

  .main_img3 {
    background-image: url('../img/tb_bg_main03.jpg');
    background-position: 30% center;
  }

  .mv-catch_serif01 {
    font-size: calc((28 / 24)*1.2em);
  }
}

@media (min-width: 500px) {
  
  .mv-catch {
    top: 250px;
    left: 36.5vw;
    line-height: 4em;
  }

  .mv-catch_serif01 {
    font-size: calc((34 / 24)*1.2em);
  }

}

@media (min-width: 768px) {
  .mv {
    background-image: url(../img/pc_bg_top.png);
  }

  .mv h1 {
    top: 150px;
    width: 180px;
    left: 40%;
  }
  
  .mv-catch {
    left: 38vw;
    line-height: 5em;
  }

  .mv-ph,
  .main_img1,
  .main_img2,
  .main_img3 {
    height: calc(100vh - 130px);
    height: calc(var(--vh) * 100 - 130px);
  }
    
  .main_img1 {
    background-image: url('../img/pc_bg_main01.jpg');
  }

  .main_img2 {
    background-image: url('../img/pc_bg_main02.jpg');
  }

  .main_img3 {
    background-image: url('../img/pc_bg_main03.jpg');
  }

  .mv-catch_serif01 {
    font-size: calc((40 / 24)*1.2em);
  }
  
}

@media (min-width: 1024px) {

  .mv h1 {
    width: 180px;
    left: 40%;
  }

  .mv-ph_container {
    padding: 60px 190px 0;
  }
  
  .mv-catch {
    left: 45vw;
    line-height: 7em;
  }

  .mv-ph {
    margin-right: -190px;
  }

  .mv-ph,
  .main_img1,
  .main_img2,
  .main_img3 {
    height: calc(100vh - 120px);
    height: calc(var(--vh) * 100 - 120px);
  }

  .mv-catch_serif01 {
    font-size: calc((50 / 24)*1.2em);
  }
  
}

@media (min-width: 1400px) {

  .mv-catch {
    line-height: 8em;
  }

  .mv-catch_serif01 {
    font-size: calc((50 / 24)*1.2em);
  }
  
}

@media screen and (orientation: landscape) and (max-width: 1000px){

  .mv {
    width: 100%;
    height: 950px;
  }

  .mv-ph {
    height: 800px;
  }

  .main_img1,
  .main_img2,
  .main_img3 {
    opacity: 0;
    width: 100%;
    height: 100%;
  }

}

/* introduction
--------------------------------------------------------*/

.intro-leftbox,
.intro-rightbox {
  display: block;
  width: 100%;
}

.slipin,
.proverb {
  margin-top: 50px;
  display: flex;
  flex-direction: column-reverse;
}

.tradition {
  margin-top: 50px;
  display: block;
}

.intro-txt {
  margin: 0;
  text-align: center;
}

.intro-txt p {
  margin: 0 auto;
  padding: 0 10px;
  font-size: calc((14 / 16)*1em);
  text-align: left;
  line-height: 3em;
  letter-spacing: .2em;
}

.intro-txt .line-spacing {
  padding-bottom: 2em;
}

.intro-txt_adust {
  margin: 20px 0 0 0;
}

.intro-txt_adust2 {
  margin: 30px 0 0 25px;
}

.intro-txt_adust3 {
  margin-top: 50px;
}

@media (min-width: 375px) {

  .intro-txt {
    max-width: 1280px;
    margin: 0 4vw 0 6vw;
  }

  .intro-txt p {
    font-size: calc((16 / 16)*1em);
  }

  .intro-txt_adust {
    margin: 30px 0 0 0;
  }

  .intro-txt_adust2 {
    margin: 30px 0 0 30px;
  }

  .intro-txt_adust3 {
    margin: 50px 0 0 0;
  }

  .slipin {
    margin-top: 100px;
    display: flex;
    flex-direction: column-reverse;
  }
    
}

@media (min-width: 768px) {

  .intro-txt p {
    font-size: calc((18 / 16)*1em);
    padding: 0;
  }

  .intro-txt_adust {
    margin: 40px 0 0 0;
  }

  .intro-txt_adust2 {
    margin: 50px 50px 0 50px;
  }
  
  .intro-txt_adust3 {
    margin-top: 70px;
  }

  .proverb {
    display: block;
    margin-top: 0;
  }

}

@media (min-width: 900px) {

  .intro-txt_adust2 {
    margin: 50px 50px 0 100px;
  }

}

@media (min-width: 1024px) {

  .intro-txt p {
    margin: 0;
    font-size: 1.5vw;
    line-height: 3.5em;
  }

  .slipin {
    flex-direction: unset;
  }

  .tradition {
    display: flex;
  }

  .intro-txt_adust {
    margin: 0;
  }

  .intro-txt_adust2 {
    margin: 50px 0 0 100px;
  }
    
}

@media (min-width: 1280px) {

  .intro-txt p {
    font-size: calc((18 / 16)*1em);
  }
  
  .intro-leftbox {
    width: 100%;
  }

  .intro-rightbox {
    width: 80%;
  }

  .intro-txt_adust2 {
    margin: 50px 0 0 120px;
  }
    
  .slipin,
  .tradition {
    display: flex;
  }

}



/* wonder
--------------------------------------------------------*/

.wonder article {
  margin-top: 70px;
}

.wonder article:first-child {
  margin-top: 103px;
}

.needle,
.pulse,
.condition {
  display: block;
}


.wonder-leftbox {
  display: block;
  width: 100%;
}

.wonder-rightbox {
  margin-top: 40px;
  width: 100%;
}

.ttl-sentence_wonder img {
  width: 70px;
}

.wonder_img img {
  width: 200px;
}

.wonder-ill_left {
  margin: -155px 0 20px -25px;
  text-align: left;
}

.wonder-ill_right {
  margin: -155px -25px 20px 0;
  text-align: right;
}

.needle h2,
.pulse h2,
.condition h2 {
  margin: 50px 0 0px -35px;
  width: fit-content;
  color: #333;
  font-size: calc((20 / 16)*1em);
  font-family: "Noto Serif JP", serif;
  text-align: left;
  letter-spacing: 0.2em;
  line-height: 1.5em;
}

@media (min-width: 375px) {

  .wonder article {
    margin-top: 80px;
  }
  
  .wonder article:first-child {
    margin-top: 111px;
  }

  .ttl-sentence_wonder img {
    width: 100px;
  }

  .needle h2,
  .pulse h2,
  .condition h2 {
    margin: 80px 0 0px -60px;
  }

}

@media (min-width: 500px) {

  .needle h2,
  .pulse h2,
  .condition h2 {
    margin: 90px 0 0px -55px;
    font-size: calc((22 / 16)*1em);
  }

}

@media (min-width: 768px) {

  .ttl-sentence_wonder img {
    width: 130px;
  }

  .needle h2,
  .pulse h2,
  .condition h2 {
    margin: 125px 0 0px -80px;
    font-size: calc((24 / 16)*1em);
  }

}

@media (min-width: 900px) {

  .wonder article {
    margin-top: 100px;
  }
  
  .ttl-sentence_wonder img {
    width: 200px;
  }

  .wonder-rightbox {
    margin-top: 40px;
    width: 100%;
  }
  
  .needle h2,
  .pulse h2,
  .condition h2 {
    margin: 135px 0 0px -100px;
  }

}

@media (min-width: 1024px) {

  .wonder-leftbox {
    width: 150%;
  }
  
  .wonder-rightbox {
    margin-top: 400px;
  }

  .needle,
  .pulse,
  .condition {
    display: flex;
  }

  .pulse {
    flex-direction: row-reverse;
  }

  .ttl-sentence_wonder img {
    width: 235px;
  }

  .needle h2,
  .pulse h2,
  .condition h2 {
    margin: 185px 0 0px -135px
  }

}

@media (min-width: 1280px) {

  .wonder-leftbox {
    width: 800px;
  }

  .wonder-rightbox {
    margin-top: 425px;
    width: 480px;
  }

  .ttl-sentence_wonder img {
    width: 280px;
  }

  .needle h2,
  .pulse h2,
  .condition h2 {
    margin: 200px 0 0px -160px;
    font-size: calc((26 / 16)*1em);
  }

}


/* sasumaru goods
--------------------------------------------------------*/

.goods-img {
  display: block;
  text-align: center;
}

.goods-img ul {
  display: block;
  margin: 0 auto;
  width: 85%;
  justify-content: space-between;
}

.goods-img ul li {
  padding: 20px;
}

.goods-img ul li:first-child {
  padding-top: 50px;
}

@media (min-width: 768px) {

  .goods-img ul {
    display: flex;
    align-items: center;
  }

  .goods-img ul li,
  .goods-img ul li:first-child {
    padding-top: 50px;
  }  

  .goods-img picture img {
    width: 200px;
  }
  
}

@media (min-width: 1024px) {

  .goods-img ul {
    width: 90%;
  }

  .goods-img picture img {
    width: 300px;
  }

}


/* about
--------------------------------------------------------*/
.about-outline,
.about-inchou {
  display: block;
  max-width: 1280px;
}

.about-outline_leftbox,
.about-outline_rightbox,
.about-inchou_leftbox,
.about-inchou_rightbox {
  display: flex;
  margin-top: 50px;
  width: 100%;
  text-align: left;
}

.about-inchou_leftbox,
.about-inchou_rightbox {
  max-width: max-content;
  margin: 30px auto 0 auto;
  text-align: center;
}

.about-inchou_rightbox {
  margin: -80px auto 0 auto;
}

.about-outline_rightbox {
  margin-top: -40px;
}

.about-outline_leftbox tr,
.about-outline_rightbox tr,
.about-inchou_leftbox tr,
.about-inchou_rightbox tr {
	display: flex;
  line-height: 40px;
}

.about-outline_leftbox td,
.about-outline_rightbox td,
.about-inchou_leftbox td,
.about-inchou_rightbox td {
	display: flex;
  width: fit-content;
  min-width: 50px;
  align-items: center;
  font-size: 12px;
	letter-spacing: 3px;
}

.about-inchou_leftbox td,
.about-inchou_rightbox td {
	letter-spacing: 1px;
}

.about-outline_leftbox td .adust-left,
.about-outline_rightbox td .adust-left {
  padding-left: 15px;
}

.about-outline_leftbox td .adust-right,
.about-outline_rightbox td .adust-right {
  position: absolute;
  right: 0;
}

.about-outline_leftbox .adust-height,
.about-outline_rightbox .adust-height {
  line-height: 20px;
}

.about-outline_leftbox .adust-top,
.about-outline_rightbox .adust-top {
  align-self: flex-start;
  margin-top: 10px;
}

.about-outline_leftbox td img,
.about-outline_rightbox td img {
	width: 25px;
	margin: 0 15px 0 10px;
}

.about-outline_leftbox .adust-size {
  font-size: 14px;
}

.about-outline_leftbox .indent,
.about-outline_rightbox .indent,
.about-inchou_leftbox .indent,
.about-inchou_rightbox .indent {
  margin-left: 50px;
}

.about-detail {
	margin: 0 auto;
  padding: 70px 0px 10px 0px;
	text-align: left;
  line-height: 2.5em;
  letter-spacing: 0.2em;
  font-size: 12px;
}


/*--- Floating object ---*/

.floating1 {
	margin: 0px auto -100px auto;
	text-align: right;
}

.floating1 img {
	width: 60px;
	height: auto;
}

.floating2 {
	margin: 0px auto;
	text-align: center;
}
.about-outline_leftbox td .floating2 img {
	margin: 20px 70% 0px 10%;
	width: 30px;
	height: auto;
}

.floating3 {
  margin: 45px -25px;
  text-align: left;
}
.about-inchou_leftbox td .floating3 img {
	width: 15px;
	height: auto;
}

.floating4 {
	margin: 0px auto;
	text-align: right;
}
.floating4 img {
	width: 40px;
	height: auto;
}



@media (min-width: 500px) {
  .about-outline_leftbox tr,
  .about-outline_rightbox tr,
  .about-inchou_leftbox tr,
  .about-inchou_rightbox tr {
    line-height: 50px;
  }

  .about-outline_leftbox td,
  .about-outline_rightbox td,
  .about-inchou_leftbox td,
  .about-inchou_rightbox td {
    font-size: 14px;
    letter-spacing: 4px;
  }  

  .about-outline_leftbox td a {
    font-size: 16px;
  }

  .floating1 img {
    width: 80px;
  }
  .about-outline_leftbox td .floating2 img {
    margin: 20px 70% 0px 10%;
    width: 50px;
  }
  .about-inchou_leftbox td .floating3 img {
    width: 30px;
  }
  .floating4 img {
    width: 60px;
  }

}

@media (min-width: 768px) {
  .about-inchou {
    display: flex;
  }

  .about-outline_leftbox tr,
  .about-outline_rightbox tr,
  .about-inchou_leftbox tr,
  .about-inchou_rightbox tr {
    line-height: 60px;
  }

  .about-outline_leftbox td,
  .about-outline_rightbox td,
  .about-inchou_leftbox td,
  .about-inchou_rightbox td {
    font-size: 16px;
    letter-spacing: 5px;
  }  

  .about-inchou_rightbox {
    margin-top: 50px;
  }

  .about-outline_leftbox .adust-size {
    font-size: 18px;
  }
  
  .about-outline_leftbox .adust-height,
  .about-outline_rightbox .adust-height {
    line-height: 30px;
  }
  
  .about-outline_leftbox .adust-top,
  .about-outline_rightbox .adust-top {
    margin-top: 20px;
  }
}

@media (min-width: 1024px) {
  .about-outline {
    display: flex;
  }

  .about-outline_leftbox,
  .about-outline_rightbox {
    margin-top: 100px;
    width: 45%;
  }

  .about-inchou_leftbox,
  .about-inchou_rightbox {
    margin-top: 100px;
  }

  .about-inchou_leftbox {
    width: 60%;
  }

  .about-inchou_rightbox {
    width: 30%;
  }

  .about-outline_rightbox {
    margin-left: 10%;
  }

  .about-inchou_rightbox {
    margin-left: 10%;
  }

  .about-outline_leftbox td,
  .about-outline_rightbox td,
  .about-inchou_leftbox td,
  .about-inchou_rightbox td {
    font-size: 18px;
    letter-spacing: 5px;
  }  

  .about-outline_leftbox .adust-size {
    font-size: 20px;
  }

  .floating1 img {
    width: 100px;
  }
  .about-outline_leftbox td .floating2 img {
    margin: 20px 70% 0px 10%;
    width: 70px;
  }
  .about-inchou_leftbox td .floating3 img {
    width: 50px;
  }
  .floating4 img {
    width: 80px;
  }
      
}



/* contact 
--------------------------------------------------------*/

.contact-mb {
  display: block;
}

.contact-pc {
  display: none;
}

.contact-outline {
  display: block;
  margin-top: 50px;
}

.contact-outline_item {
  width: 100%;
}

#gmaps {
  margin-top: 60px;
  max-width: 1280px;
  width: 100%;
  height: 400px;
  border-radius: 5px;
}

.contact-outline_item ul {
	box-sizing: border-box;
	list-style: none;
	margin-left: 10px;
	margin-right: auto;
}

.contact-outline_item ul li  {
  align-items: center;
  font-size: 12px;
  font-weight: 400;
	letter-spacing: 5px;
  line-height: 3;
}

.contact-outline_item ul li img {
	width: 15px;
	margin: 8px 20px 5px 0px;
}

.contact-outline_item .indent {
  margin-left: 35px;
  line-height: 1.5em;
}

.contact-detail {
	margin: 0 auto;
  padding: 70px 0px 10px 0px;
	text-align: left;
  line-height: 2.5em;
  letter-spacing: 0.2em;
  font-size: 12px;
}



@media (min-width: 768px) {

  .contact-mb {
    display: none;
  }
  
  .contact-pc {
    display: block;
  }
    
  .contact-outline_item ul li  {
    font-size: 1.8vw;
  }
  
  .contact-outline_item ul li img {
    width: 20px;
    margin: 8px 20px 5px 0px;
  }

  .contact-outline_item .indent {
    margin-left: 45px;
    line-height: 1.5em;
  }
    
  .contact-detail {
    font-size: 2vw;
    line-height: 1.7em;
  }

  #gmaps {
    border-radius: 10px;
  }
  
}

@media (min-width: 1024px) {

  .contact-outline {
    display: flex;
  }

  .access-map {
    margin-top: 50px;
    width: 100%;
    height: 100%;
  }
  
  .contact-outline_item ul li  {
    font-size: 18px;
  }
  
  .contact-outline_item ul li img {
    width: 25px;
    margin: 12px 20px 5px 0px;
  }

 .contact-detail {
    font-size: 18px;
  }

  #gmaps {
    border-radius: 10px;
  }

}


/*--------------------------------------------------------------
  Utility
----------------------------------------------------------------*/
/* display
--------------------------*/
.br-1370px {
  display: none;
}

.br-375px {
  display: block;
}

@media (min-width: 1370px) {
  .br-1370px {
    display: block;
  }
}

@media (min-width: 375px) {
  .br-375px {
    display: none;
  }
}