@charset "UTF-8";

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('//fonts.googleapis.com/css?family=Quicksand:300,400,500,700');


/*=================================================
お問い合わせ
=================================================*/
.thanks_bg {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #F7F7F7;
  border: 2px solid #EE6352;
}


/*=================================================
サービス案内
=================================================*/
/* 概要横並び*/
.serviceinfo {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
}
.serviceinfo_text {
  flex: 2;
  margin:0 30px 0 0;
}
.serviceinfo_img {
  flex: 1;
}
@media screen and (max-width: 640px) {
.serviceinfo {
  flex-direction: column;
  display:block;
  }
.serviceinfo_text {
  max-width:100%;
  margin:0 0 25px 0;
  }
.serviceinfo_img {
  max-width:100%;
  text-align: center;
  }
.serviceinfo_img img{
  max-width:240px;
  }
}

/* 概要中身*/
.serviceinfo_illust {
  width:100%;
  max-width:180px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  margin-bottom: 20px;
}
.serviceinfo_logo {
  width:100%;
  max-width:320px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
.serviceinfo_illust {
  max-width:120px;
  margin-bottom: 15px;
  }
.serviceinfo_logo {
  max-width:240px;
  margin-bottom: 15px;
  }
}

/* よくある質問*/
.question{
  width:100%;
  max-width:100px;
  margin-bottom: 10px;
}
@media screen and (max-width: 640px) {
.question{
  display: none;
  }
}

/* 料金表*/
.pricetable {
  width: 100%;
  border-collapse: collapse;
  margin: 5px 0;
}
.pricetable th {
  background: #EEE;
  padding: 10px;
  text-align: center;
  border: 1px solid #999;
  line-height: 1.3;
}
.pricetable td {
  line-height: 100%;
  padding: 10px;
  text-align: center;
  border: 1px solid #999;
  line-height: 1.3;
}
@media screen and (max-width: 640px) {
.pricetable {
  font-size: 0.8em;
  }
.pricetable th,
.pricetable td {
  padding: 5px;
  }
}


/*=================================================
サロン案内
=================================================*/
/* 概要横並び */
.saloninfo {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items: center;
}
.saloninfo_img {
  flex: 1;
  margin:0 40px 0 0;
}
.saloninfo_text {
  flex: 2;
}
@media screen and (max-width: 960px) {
.saloninfo {
  align-items:flex-start;
  }
}
@media screen and (max-width: 640px) {
.saloninfo {
  flex-direction: column;
  display:block;
  }
.saloninfo_img {
  max-width:100%;
  margin:0 0 20px 0;
  text-align: center;
  }
.saloninfo_img img {
  width: 100%;
  max-width: 200px;
  }
}


/*=================================================
トップページ
=================================================*/
header {
  position: relative;
}
header p {
  text-shadow:1px 1px 3px rgba(0,0,0,0.4);
}
/* ヘッダーイメージ */
#topimg {
  width: 100%;
  height: 100vh;
}
@media(max-width:960px){
#topimg {
  height:520px;
  }
}
@media(max-width:640px){
#topimg {
  height:420px;
  }
}
/* ヘッダー内ロゴ情報 */
header h1 {
  position: absolute;
  width: 100%;
  top: 40px;
  left: 40px;
  color: #FFF;
}
.headlogo {
  width: 100%;
  max-width: 380px;
  margin-bottom: 20px;
}
@media(max-width:640px){
header h1 {
  top: 20px;
  left: 20px;
  }
.headlogo {
  max-width: 200px;
  }
}

/*-------------------------
導入文
--------------------------*/
.floral {
  width: 100%;
  background-image: url(../img/index/floral.png);
  background-repeat:  repeat-x;
  background-position: right bottom;
}


/*=================================================
共通パーツ
=================================================*/
/*-------------------------
ヘッダー
--------------------------*/
/* サロン案内 */
.title_aboutus {
  width: 100%;
  height: 420px;
  background-image:url(../img/aboutus/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/* ソプラノアイス */
.title_soprano {
  width: 100%;
  height: 420px;
  background-image:url(../img/sopranoice/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/* ファームアップ */
.title_firmup {
  width: 100%;
  height: 420px;
  background-image:url(../img/firmup/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
/* 予約 */
.title_reserve {
  width: 100%;
  height: 420px;
  background-image:url(../img/reserve/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}

@media(max-width:960px){
.title_aboutus,
.title_soprano,
.title_firmup,
.title_reserve {
  height:320px;
  }
}
@media(max-width:640px){
.title_aboutus,
.title_soprano,
.title_firmup,
.title_reserve {
  height:240px;
  }
}

/*-------------------------
ソプラノアイス
--------------------------*/
/* 文字色 */
.soprano {
  color:#BAA959;
}
/* 色背景 */
.soprano_bg {
  width: 100%;
  padding: 0;
  margin: 0;
  background: #FAF2D7;
}
/* 四角ボタン */
.btn_soprano {
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  font-size:1.2em;
  cursor: pointer;
  padding: 12px 12px;
  text-decoration: none;
  color: #FFF;
  background: #BAA959;
  text-align: center;
  font-weight: bold;
  line-height: 100%;
  border: 2px solid #BAA959;
  margin:10px 0;
  display: inline-block;
  transition: all .3s;
}
a.btn_soprano:hover {
  background: #FFF;
  color: #BAA959;
  border: 2px solid #BAA959;
}
/* 3つの特長 */
.points_soprano {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #FFF;
  border: 1px solid #BAA959;
}
/* サブタイトル */
.subtitle_soprano {
  font-size: 1.6em;
  line-height: 1.4;
  color: #BAA959;
  text-align: center;
  font-weight: 500;
  font-family: "Noto Sans Japanese", sans-serif;
  letter-spacing: 1px;
}
hr.soprano_line {
  width: 100%;
  height: 18px;
  background-image: url(../img/sopranoice/subtitle.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  border-width: 0; 
  border-style: none;
  border-color: none;
  margin: 15px 0;
}
@media(max-width:640px){
.subtitle_soprano {
  font-size: 1.2em;
  }
hr.soprano_line {
  margin: 10px 0;
  }
}

/*-------------------------
ファームアップ
--------------------------*/
/* 文字色 */
.firmup {
  color:#FE8082;
}
/* 色背景 */
.firmup_bg {
  width: 100%;
  padding: 0;
  margin: 0;
  background: #FCEAF2;
}
/* 四角ボタン */
.btn_firmup {
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  font-size:1.2em;
  cursor: pointer;
  padding: 12px 12px;
  text-decoration: none;
  color: #FFF;
  background: #FE8082;
  text-align: center;
  font-weight: bold;
  line-height: 100%;
  border: 2px solid #FE8082;
  margin:10px 0;
  display: inline-block;
  transition: all .3s;
}
a.btn_firmup:hover {
  background: #FFF;
  color:#FE8082;
  border: 2px solid #FE8082;
}
/* 3つの特長 */
.points_firmup {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #FFF;
  border: 1px solid #FE8082;
}
/* サブタイトル */
.subtitle_firmup {
  font-size: 1.6em;
  line-height: 1.4;
  color: #FE8082;
  text-align: center;
  font-weight: 500;
  font-family: "Noto Sans Japanese", sans-serif;
  letter-spacing: 1px;
}
hr.firmup_line {
  width: 100%;
  height: 18px;
  background-image: url(../img/firmup/subtitle.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  border-width: 0; 
  border-style: none;
  border-color: none;
  margin: 15px 0;
}
@media(max-width:640px){
.subtitle_firmup {
  font-size: 1.2em;
  }
hr.firmup_line {
  margin: 10px 0;
  }
}

/*-------------------------
3つの特長
--------------------------*/
.points {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
  align-items: stretch;
}
.points li {
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding:0 15px 15px 0;
  box-sizing: border-box;
}
.points img {
  width: 100%;
}
@media screen and (max-width: 640px) {
.points {
  flex-direction: column;
  display:block;
  }
.points li {
  width: 100%;
  max-width:100%;
  padding:0 0 15px 0;
  }
}
.points p {
  padding: 0 20px;
}
.points img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
}

/*-------------------------
フッター
--------------------------*/
footer {
  width: 100%;
  margin: 0;
  padding: 0;
}
.footer {
  width:100%;
  margin:0 ;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
  align-items: stretch;
}
.footer_link {
  width: 35%;
  background: #2F55A6;
  padding: 50px 40px 40px;
}
.footer_info {
  width: 65%;
  background: #F7F7F7;
  padding: 40px;
}
.footerlinkwrap {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.footerinfowrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.footlogo {
  width:100%;
  max-width:300px;
  margin-bottom: 30px;
}
@media screen and (max-width: 960px) {
.footer_link {
  width: 40%;
  }
.footer_info {
  width: 60%;
  }
}
@media screen and (max-width: 767px) {
.footer {
  flex-direction: column;
  display:block;
  }
.footer_link {
  width: 100%;
  max-width:100%;
  }
.footer_info {
  width: 100%;
  max-width:100%;
  }
.footerlinkwrap {
  max-width: 100%;
  }
}
@media screen and (max-width: 640px) {
.footer_link {
  padding: 40px 25px 25px;
  }
.footer_info {
  padding: 25px 25px 15px;
  }
.footlogo {
  width:100%;
  max-width:240px;
  }
}
/* マップ埋め込み */
.footmap {
  position: relative;
  padding-top: 30%;
  height: 0;
  overflow: hidden;
}
.footmap iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media(max-width:767px){
.footmap {
  padding-top: 60%;
  }
}
/* サービスリンクボタン */
.footservicebtn {
  width:100%;
  max-width: 320px;
  margin:0 0 15px ;
  padding:8px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
  background: #FFF;
  border: 2px solid #BFA473;
  font-size: 0.9em;
}
.footservicebtn a{
  color: #BFA473 !important;
  text-decoration: none !important;
  font-weight: bold;
}
.footservicebtn_img {
  width: 25%;
  max-width: 60px;
  margin: 0 15px 0 0;
}
.footservicebtn_text {
  width: 75%;
}
@media(max-width:767px){
.footservicebtn {
  font-size: 1em;
  max-width: 100%;
  }
}
/* 矢印付きリンク */
.footbtn {
  position: relative;
  display: inline-block;
  padding-left: 0.7em;
  color: #FFF;
  text-decoration: none;
  margin:0 0 3px;
}
.footbtn:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #BFA473;
  position: absolute;
  top: 50%;
  left: 0;
  margin: -8px 0 0 0;
}
.footbtn:hover {
  text-decoration: underline;
}

/* フッター電話リンク(スマホでのみ表示) */
.spfootbtn {
  display: none;
}
@media screen and (max-width: 640px) {
.spfootbtn {
  display: block;
  }
.spfootbtn_form {
  width: 75%;
  background: #BFA473;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0;
  }
.spfootbtn_up {
  width: 25%;
  background: #2F55A6;
  text-align: center;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0;
  }
.spfootbtn img {
  width: auto;
  height: 60px;
  }
footer {
  padding-bottom: 58px;
  }
}

/*-------------------------
ページ上部へジャンプ
--------------------------*/
#jumptop{
  position:fixed;
  right: 40px;
  bottom:40px;
  z-index: 1001;
}
.jumpbtn {
  width:5em;
  height:5em;
  cursor:pointer;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  cursor:pointer;
  background:#2F55A6;
  position: relative;
}
.jumpbtn:before {
  content: '';
  position: absolute;
  top: 45%;
  right: 1.7em;
  display: block;
  width: 1.5em;
  height: 1.5em;
  border-top: 2px solid #FFF; 
  border-right: 2px solid #FFF; 
  transform: rotate(-45deg); 
}
@media(max-width:960px){
#jumptop{
  right: 20px;
  bottom:20px;
  }
.jumpbtn {
  width: 3.4em;
  height: 3.4em;
  }
.jumpbtn:before {
  top: 42%;
  right: 1.2em;
  width: 1em;
  height: 1em;
  }
}
@media screen and (max-width: 640px) {
.jumpbtn{
  display: none;
  }
}

/*-------------------------
右端固定リンクボタン
--------------------------*/
.fixbtn {
  width:60px;
  height:auto;
  position:fixed;
  z-index:9999;
  top: 200px;
  right: 0px;
}
@media screen and (max-width: 960px) {
.fixbtn {
  width:48px;
  }
}
@media screen and (max-width: 640px) {
.fixbtn {
  display: none;
  }
}

/*-------------------------
電話リンク
--------------------------*/
/* 青 */
.tel_blue  {
  font-size:1.8em;
  line-height:100%;
  padding:0 0 5px;
  font-family: 'Quicksand', sans-serif;
  white-space: nowrap;
}
.tel_blue :before {
  content:"";
  display:inline-block;
  width:0.9em;
  height:0.9em;
  background:url(../img/common/tel_blue.png) no-repeat;
  background-size:contain;
  padding-left:1.1em;
  vertical-align:bottom;
}
.tel_blue a{
  text-decoration:none;
  color:#2F55A6;
  font-weight:500;
}

/* 白 */
.tel_white {
  font-size:1.8em;
  line-height:100%;
  padding:0;
  font-family: 'Quicksand', sans-serif;
  white-space: nowrap;
}
.tel_white :before {
  content:"";
  display:inline-block;
  width:0.9em;
  height:0.9em;
  background:url(../img/common/tel_white.png) no-repeat;
  background-size:contain;
  padding-left:1.1em;
  vertical-align:bottom;
}
.tel_white a{
  text-decoration:none;
  color:#FFF;
  font-weight:500;
}

/*-------------------------
ボタン
--------------------------*/
/* ブルー四角ボタン */
.btn_blue {
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  font-size:1.2em;
  cursor: pointer;
  padding: 12px 12px;
  text-decoration: none;
  color: #FFF;
  background: #2F55A6;
  text-align: center;
  font-weight: bold;
  line-height: 100%;
  border: 2px solid #2F55A6;
  margin:10px 0;
  display: inline-block;
  transition: all .3s;
}
a.btn_blue:hover {
  background: #FFF;
  color: #2F55A6;
  border: 2px solid #2F55A6;
}

/* ゴールド四角ボタン */
.btn_gold {
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  font-size:1.2em;
  cursor: pointer;
  padding: 12px 12px;
  text-decoration: none;
  color: #FFF;
  background: #BFA473;
  text-align: center;
  font-weight: bold;
  line-height: 100%;
  border: 2px solid #BFA473;
  margin:10px 0;
  display: inline-block;
  transition: all .3s;
}
a.btn_gold:hover {
  background: #FFF;
  color: #BFA473;
  border: 2px solid #BFA473;
}

/*-------------------------
診療時間テーブル
--------------------------*/
.hourtable {
  width: 100%;
  border-collapse: collapse;
  margin: 5px 0;
}
.hourtable th {
  font-weight: normal;
  color: #FFF;
  font-size: 1em;
  background: #2F55A6;
  line-height: 100%;
  padding: 8px 12px;
  text-align: center;
}
.hourtable td {
  font-weight: bold;
  background: #FFF;
  font-size: 1.3em;
  line-height: 100%;
  padding: 12px 12px;
  text-align: center;
  border-bottom: 1px solid #B7B6B6;
}
@media screen and (max-width: 960px) {
.hourtable {
  }
.hourtable th {
  font-size: 0.8em;
  padding: 6px 6px;
  }
.hourtable td {
  font-size: 1em;
  padding: 10px 6px;
  }
}

/*-------------------------
写真ギャラリー
--------------------------*/
/* 写真ギャラリー横並び2列固定 */
.gallery2 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery2 li {
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding:0 15px 15px 0;
  box-sizing: border-box;
}
.gallery2 img {
  width:100%;
}
@media screen and (max-width: 640px) {
.gallery2 li {
  padding:0 10px 10px 0;
  }
}

/* 写真ギャラリー横並び3列固定 */
.gallery3 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery3 li {
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding:0 15px 15px 0;
  box-sizing: border-box;
}
.gallery3 img {
  width:100%;
}
@media screen and (max-width: 640px) {
.gallery3 li {
  padding:0 8px 8px 0;
  }
}

/* 写真ギャラリーキャプション */
.gallerycaption {
  font-size: 0.8em;
  margin-top: 6px;
  line-height: 1.5;
  padding: 0;
}
@media screen and (max-width: 640px) {
.gallerycaption {
  font-size: 0.7em;
  margin-top: 5px;
  line-height: 1.4;
  }
}
/*-------------------------
横並びflexbox
--------------------------*/
/* 均等2列(767px以下で縦列切り替え) */
.col2 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
}
.col2 li{
  width:50%;
  margin:0 30px 0 0;
}
.col2 li:last-child{
  margin:0 0 0 0;
}
@media screen and (max-width: 767px) {
.col2 {
  flex-direction: column;
  display:block;
  }
.col2 li {
  width:100%;
  margin:0 0 15px 0;
  }
.col2 li:last-child{
  margin:0 0 0 0;
  }
}

/* 画像＋テキスト／幅1:2＆中央揃え (640px以下で縦列切り替え) */
.column {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
}
.column_img {
  flex: 1;
  margin:0 20px 0 0;
  text-align: center;
}
.column_text {
  flex: 2;
}
@media screen and (max-width: 960px) {
.column {
  align-items:flex-start;
  }
}
@media screen and (max-width: 640px) {
.column {
  flex-direction: column;
  display:block;
  }
.column_img {
  max-width:100%;
  margin:0 0 15px 0;
  }
}

/* 画像＋テキスト／幅1:2＆中央揃え (767px以下で上揃え) */
.column2 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
}
.column2_img {
  flex: 1;
  margin:0 20px 0 0;
}
.column2_text {
  flex: 2;
}
@media screen and (max-width: 767px) {
.column2 {
  align-items:flex-start;
  }
.column2 li {
  margin:0 15px 0 0;
  }
.column2 li:last-child{
  margin:0 0 0 0;
  }
}