/* CSS Document */
* {
  margin: 0px;
  padding: 0px;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/*
=============================================================================================================================
初期値リセット
=============================================================================================================================
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}
ol,
ul {
  list-style: none;
}
caption {
  font-weight: normal;
  text-align: left;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}
a img {
  border: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
figure {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  line-height: 1.6em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: none;
}
a {
  text-decoration: none;
  color: #252525;
}

body section {
  width: 100%;
}
/*
#p-index a,
#p-index a:hover img {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;}
*/

header:after,
section:after,
aside:after,
footer:after {
  content: "";
  display: table;
  clear: both;
}
/*img { max-width:100%;}*/

/**** 番号 ****/
a[href^="tel:"] {
  pointer-events: none;
}
@media only screen and (max-width: 840px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
    line-height: 1.6em;
  }
}

/*
=============================================================================================================================
clearfix
=============================================================================================================================
*/
.clearfix:after {
  visibility: hidden; /*見えなくする*/
  height: 0; /*見えなくする*/
  display: block; /*block要素にする*/
  font-size: 0;
  content: " ";
  clear: both;
}
* html .clearfix {
  zoom: 1;
} /* IE6 */
*:first-child + html .clearfix {
  zoom: 1;
} /* IE7 */

/*ヘッダー
--------------------------------------*/

header {
  top: 0;
  left: 0;
  width: 100%;
  height: 126px;
  z-index: 10000;
  background-color: #fff;
  position: relative;
}

header div {
  padding: 0 0 0 30px;
  margin: 0 auto;
  position: relative;
}

header h1 {
  padding-top: 20px;
  width: 270px;
  position: absolute;
  z-index: 60000;
}

header h1 img {
  width: 100%;
}

.fixed div h1 {
  padding-top: 10px;
}

@media only screen and (max-width: 1229px) {
  header {
    position: absolute;
    background: none;
    height: auto;
  }

  header div {
    width: 100%;
    padding: 0;
  }
  header h1 {
    display: none;
  }
}

/*スクロールして下がった分、ボディに空きを入れて高さを調整*/

.aki_ire {
  padding-top: 127px;
}

/* 予約ボタン
------------------------------------------------------------*/

.web_btn {
  position: fixed;
  right: 0%;
  z-index: 9999;
  text-align: right;
  padding-top: 140px;
  top: 0;
}

.web_btn img {
  width: 30%;
}

/* スライドエリア
------------------------------------------------------------*/

.contena,
.contena-n {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10000;
}

.contena {
  height: 1000px;
  background-color: #000;
}

.slide-box {
  background-color: #ca8c17;
}

.sl-scrn {
  width: 100%;
  position: absolute;
  z-index: 500;
  text-align: left;
  bottom: 0;
  left: 0;
}

.sl-scrn img {
  vertical-align: bottom;
}

.slide {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  position: relative;
}

/*.sl-scrn{
	width:100%;
	height:812px;
	position:absolute;
	*background: rgba(0,51,102,0.43);
	z-index:500;
	background-size:contain;
	}


.slide{
	width:100%;
	height:812px;
	margin:0;
	}

.sl-scrn h2{
	width:1100px;
	margin:0 auto;
	padding-top:440px;
	}
*/

@media only screen and (max-width: 1980px) {
  .slide {
    max-width: 100%;
    height: 0;
    padding-top: 38%;
  }

  .contena {
    height: 0;
    padding-top: 50%;
  }
}

@media only screen and (max-width: 1300px) {
  .slide {
    max-width: 100%;
    height: 0;
    padding-top: 35%;
  }

  .contena {
    height: 0;
    padding-top: 55.5%;
  }
}

@media only screen and (max-width: 1230px) {
  video {
    display: none;
  }
  .slide-box {
    background-color: #fff;
  }
  .slide {
    height: 0 !important;
    padding-top: calc(720 / 1280 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
  }

  .sl-scrn {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .sl-scrn {
    display: none;
  }
  .slide {
    padding-top: 120%;
  }
  /*.sl-scrn h2 img{ width:80.81%;}*/
}

@media only screen and (max-width: 480px) {
  .web_btn {
    padding-top: 17%;
  }
}
@media only screen and (max-width: 425px) {
  .web_btn {
    padding-top: 20%;
  }
}
@media only screen and (max-width: 400px) {
  .web_btn {
    padding-top: 22%;
  }
}
@media only screen and (max-width: 370px) {
  .web_btn {
    padding-top: 25%;
  }
}

/* トップページコンテンツ
------------------------------------------------------------*/

main {
  background-color: #f3f9f4;
  padding: 4em 0 4em;
}
main section {
  width: 1200px;
  margin: 0 auto 2em;
}

.tyosei {
  padding: 11em 0 4em;
}

@media only screen and (max-width: 1229px) {
  main section {
    width: 96%;
  }
}

/*スライドサイド*/

.slide_side {
  position: absolute;
  z-index: 5000;
  background-color: #fff;
  padding: 0;
  bottom: 3%;
  left: 10px;
  border-radius: 8px;
}
.slide_side a {
  color: #fff;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: 2.5em;
  padding: 0.5em 0 0.5em 80px;
  display: block;
  background: url(../img/tel_1.png) no-repeat 10px 50%, #09c;
  border-radius: 8px 8px 0 0/8px 8px 0 0;
  margin-bottom: 0.2em;
}
.slide_side div {
  padding: 0 1em;
}
.slide_side div p {
  margin: 0 0 0.2em 1em;
}
.slide_side div p:nth-of-type(2) {
  color: #f60;
  font-size: 1.1em;
}
.slide_side div dl dd {
  margin: -1.6em 0 0.5em 6em;
}
.slide_side div dl dt {
  font-weight: bold;
  padding-left: 1em;
}
.slide_side div dl dt:nth-of-type(1) {
  color: #099;
}
.slide_side div dl dt:nth-of-type(2) {
  color: #09c;
}
.slide_side div dl dt:nth-of-type(3) {
  color: #c03;
}
.slide_side div .schedule {
  width: 385px;
  display: block;
  margin: 0 auto;
}

@media only screen and (max-width: 1120px) {
  .slide_side {
    bottom: 2%;
  }
}
@media only screen and (max-width: 1080px) {
  .slide_side {
    bottom: 3%;
  }
}
@media only screen and (max-width: 1008px) {
  .slide_side {
    bottom: 6%;
  }
}
@media only screen and (max-width: 768px) {
  .slide_side {
    bottom: 6.5%;
  }
  .slide_side a {
    font-size: 2em;
    padding: 0.5em 0 0.5em 60px;
    display: block;
    background: url(../img/tel_1.png) no-repeat 10px 50%/9%, #09c;
  }
}
@media only screen and (max-width: 480px) {
  .slide_side {
    display: none;
  }
}

/*スライド内*/

.slide-in {
  position: absolute;
  z-index: 5000;
  padding: 0;
  bottom: 50px;
  left: 50px;
}

.slide-in__copy {
  font-size: 1.5em;
  line-height: 1;
}

.slide-in__copy span {
  display: inline-block;
  background-color: #fff;
  padding: 15px 10px;
  border-radius: 5px;
}

.slide-in__copy-end {
  margin-top: 10px;
}

.slide-in__merit {
  margin-top: 25px;
}

.slide-in__merit img {
  width: 413px;
}

@media only screen and (max-width: 1024px) {
  .slide-in {
    bottom: inherit;
    top: 30vw;
    left: 15px;
  }
  .slide-in__copy {
    font-size: 2.3vw;
  }
  .slide-in__merit {
    margin-top: 5px;
  }
  .slide-in__merit img {
    width: 30vw;
  }
}

@media only screen and (max-width: 767px) {
  .slide-in {
    top: 60vw;
  }

  .slide-in__copy {
    font-size: 4vw;
    margin-right: 15px;
  }

  .slide-in__copy span {
    padding: 10px;
    border-radius: 5px;
  }

  .slide-in__copy-end {
    margin-top: 10px;
  }

  .slide-in__merit img {
    width: 70%;
  }
}

/*挨拶*/

.aisatsu_box,
.sejutsu_box,
.ad_box,
.etc_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.aisatsu {
  width: 68%;
}
.aisatsu_box::after {
  content: none;
  display: inherit;
  clear: none;
}
.aisatsu figure {
  width: 100%;
  margin-bottom: 1.5em;
}
.aisatsu figure img {
  width: 100%;
}

.aisatsu_catch {
  color: #09c;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: 1.8em;
  line-height: 1.4em;
  margin-bottom: 1em;
}

.aisatsu p {
  margin: 0 0 1em;
}
.aisatsu p span {
  color: #f90;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: 1.4em;
}

.sns {
  width: 27%;
}
.fb-page {
  margin-bottom: 1em;
}

.line_banner {
  width: 900px;
  margin: 2em auto;
  display: block;
}
.line_banner img {
  width: 100%;
}

@media only screen and (max-width: 1229px) {
  .ad_box img {
    max-width: 100%;
  }
  .facebook_wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .fb-page,
  .fb-page span,
  .facebook_wrap iframe {
    width: 100% !important;
  }
}
@media only screen and (max-width: 1000px) {
  .line_banner {
    width: 95%;
  }
}
@media only screen and (max-width: 768px) {
  .aisatsu {
    width: 100%;
  }

  .sns {
    width: 100%;
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .facebook_wrap {
    width: 48.5%;
    height: 500px;
    margin-left: 0;
    margin-bottom: 0;
  }
  .twitter_wrap {
    width: 48.5%;
    height: 500px;
    margin-bottom: 0;
  }
  .fb-page span,
  .facebook_wrap iframe {
    height: 600px !important;
  }
}
@media only screen and (max-width: 480px) {
  .aisatsu_box {
    display: block;
    flex-wrap: nowrap;
  }
  .aisatsu_catch,
  .aisatsu p span {
    font-size: 1.2em;
  }

  .sns {
    display: block;
    flex-wrap: nowrap;
  }
  .facebook_wrap,
  .twitter_wrap {
    width: 100%;
  }
}

/*施術内容*/
.sejutsu_h3 {
  text-align: center;
  width: 100%;
  margin: 0 0 1em;
  color: #09c;
  font-size: 2em;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
}
.sejutsu_box article {
  width: 32%;
}
.sejutsu_box article:nth-of-type(n + 2) {
  margin-left: 2%;
}
.sejutsu_box article a {
  display: block;
  width: 100%;
  position: relative;
  margin-bottom: 0.5em;
  background-color: #fff;
}
.sejutsu_box article a img {
  border: 2px solid #09c;
  width: 100%;
  border-radius: 8px;
  vertical-align: bottom;
}
.sejutsu_box article a:hover img {
  opacity: 0.7;
}
.sejutsu_box article a span {
  display: block;
  background-color: rgba(0, 153, 204, 0.8);
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 0.5em 0;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  border-radius: 0 0 8px 8px/0 0 8px 8px;
  font-size: 1.4em;
}
.sejutsu_box article p {
  width: 92%;
  margin: 0 auto;
}

@media only screen and (max-width: 480px) {
  .sejutsu_h3 {
    font-size: 1.2em;
  }
  .sejutsu_box article {
    width: 100%;
    margin-bottom: 1em;
  }
  .sejutsu_box article a span {
    font-size: 1.2em;
  }
}

/*コラム*/

.column {
  margin-top: 50px;
  padding: 50px;
  background-color: #fff;
  border-radius: 10px;
}

.column .sejutsu_h3 {
  margin-bottom: 0;
}

.column__copy {
  margin-top: 10px;
  text-align: center;
}

.column__items {
  margin-top: 30px;
  border-top: 1px solid #09c;
}

.column__item {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  align-items: center;
  gap: 25px;
  padding: 24px 16px;
  border-bottom: 1px solid #c9e5f1;
}

.column__item:hover {
  background-color: #f3f7f9;
}

.column__item-date {
}

.column__item-cate {
  color: #09c;
  text-align: center;
  border: 1px solid #09c;
  border-radius: 4px;
  width: 110px;
}

.column__item-title {
}

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

.column__btn a {
  display: inline-block;
  background-color: #09c;
  border-radius: 100px;
  color: #fff;
  line-height: 3;
  text-align: center;
  width: 300px;
}
.column__btn a:hover {
  background-color: #096;
}

@media only screen and (max-width: 767px) {
  .column {
    margin-top: 30px;
    padding: 20px;
  }

  .column__copy {
    text-align: left;
  }

  .column__items {
    margin-top: 20px;
  }

  .column__item {
    display: grid;
    grid-template-columns: 80px auto;
    grid-template-areas:
      "date cate"
      "ttl ttl";
    justify-content: start;
    align-items: center;
    gap: 10px 15px;
    padding: 15px 0;
  }

  .column__item-date {
    grid-area: date;
  }

  .column__item-cate {
    grid-area: cate;
    width: 110px;
  }

  .column__item-title {
    grid-area: ttl;
  }

  .column__btn {
    margin-top: 20px;
  }

  .column__btn a {
    width: 200px;
  }
}

/*住所*/

.ad_box {
  background-color: #fff;
  padding: 1.2em;
}
.ad_box article {
  width: 50%;
}
.ad_box article figure {
  width: 250px;
  margin: 0 0 0.8em 0;
}
.ad_box article figure img {
  width: 100%;
}
.ad_box article a {
}
.ad_box article p.ad_box__address {
  margin: 0 0 1em 1em;
}
.ad_box article p.ad_box__note {
  color: #f60;
  font-size: 1.1em;
}
.ad_box article dl dd {
  margin: -1.6em 0 0.5em 6em;
}
.ad_box article dl dt {
  font-weight: bold;
  padding-left: 1em;
}
.ad_box article dl dt:nth-of-type(1) {
  color: #099;
}
.ad_box article dl dt:nth-of-type(2) {
  color: #09c;
}
.ad_box article dl dt:nth-of-type(3) {
  color: #c03;
}

.ad_box__wrap {
  margin-bottom: 0.6em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10px;
}

.ad_box__tel {
  color: #09c;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: 1.8em;
  padding: 0.5em 0 0.5em 70px;
  display: block;
  background: url(../img/tel_2.png) no-repeat 10px 50%;
  border: 1px solid #09c;
  border-radius: 10px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ad_box__line {
  border: 1px solid #19c04e;
  border-radius: 10px;
  padding: 15px;
}

.ad_box__line a {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

.ad_box__line img {
  width: 40px;
}

.ad_box__line span {
  font-size: 1.6em;
  color: #19c04e;
  font-weight: bold;
  display: inline-block;
}

.google-maps {
  width: 48%;
  margin-left: 2%;
  position: relative;
  padding-bottom: 43%;
  height: 0;
  overflow: hidden;
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

@media only screen and (max-width: 767px) {
  .ad_box__wrap {
    grid-template-columns: 1fr;
  }
  .ad_box__tel {
    background-size: 40px;
    padding: 0.5em 0 0.5em 60px;
  }
}

@media only screen and (max-width: 600px) {
  .google-maps {
    padding-bottom: 60%;
  }
}
@media only screen and (max-width: 480px) {
  .ad_box article {
    width: 100%;
  }

  .google-maps {
    width: 100%;
  }
}

/*その他*/

.etc_box div {
  width: 23.5%;
}
.etc_box div:nth-of-type(n + 2) {
  margin-left: 2%;
}
.etc_box div a {
  display: block;
  margin-bottom: 0.5em;
  color: #09c;
}
.etc_box div a img {
  width: 100%;
  border: 2px solid #09c;
  border-radius: 8px;
}
.etc_box div h3 {
  font-size: 1.2em;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  margin-bottom: 0.6em;
  color: #09c;
}
.etc_box div p {
  width: 96%;
  margin: 0 auto;
  font-size: 0.85em;
}

/*インスタグラム*/
.insta {
  margin-top: 10px;
}
.insta img {
  display: block;
  margin: 0 auto;
}
.instagram {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.instagram div {
  width: 154px;
  float: left;
  height: 154px;
  margin: 5px;
  padding: 2px;
  background: linear-gradient(45deg, #ffbe34 0%, #fe4968 50%, #9028d7 100%);
}
.instagram div:nth-of-type(even) {
  margin-right: 0;
}
.instagram div a {
  background-color: #fff;
}
.instagram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.insta p {
  text-align: center;
  padding-top: 8px;
  clear: both;
}
@media only screen and (min-width: 820px) and (max-width: 1229px) {
  .instagram div {
    width: 47%;
    margin: 3px;
    height: 110px;
  }
}

@media only screen and (max-width: 480px) {
  .etc_box div {
    width: 48%;
    margin-bottom: 1em;
  }
}

/*フッター*/

footer {
  padding: 4em 0 2em;
  border-top: 2px solid #09c;
  background-color: #fff;
  text-align: center;
}
footer figure {
  width: 100%;
  margin-bottom: 1em;
}
footer p {
  font-size: 0.85em;
  margin-bottom: 2em;
}
footer p a {
  display: block;
  margin-bottom: 1em;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: bold;
  font-size: 1.4em;
  color: #09c;
}
footer p:last-of-type {
  font-size: 0.75em;
  margin-bottom: 0;
}

/*
========================================================================================================================================
スクロールJQuary
========================================================================================================================================
*/

/* page-top */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
}
#page-top a {
  background: url(../img/scrolloff.png) no-repeat;
  text-decoration: none;
  color: #fff;
  width: 60px;
  padding: 25px 0 15px;
  text-align: center;
  display: block;
  /*border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;*/
}
#page-top a:hover {
  text-decoration: none;
  background: url(../img/scrollon.png) no-repeat;
}

@media only screen and (max-width: 480px) {
  #page-top {
    right: 0;
  }
  #page-top img {
    width: 40px;
  }
}

/*動画*/

.youtube {
  position: relative;
  padding-bottom: 56.3%; // これが縦横比
  height: 0;
  overflow: hidden;
  margin-bottom: 2em;
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}