/*
Theme Name: 聞こえのサロン クラルテ ウェブサイト
Description: 新サイト
Author: Shuhei Kaneko
Version: 1.1
*/

@charset "UTF-8";

/* ★---------------------------------- 便利タグ ----------------------------------★ */

br.br_tab { /* 改行調整 */
	display:block;
}

br.br_sp { /* 改行調整 */
	display:block;
}

/* ★--------------------------------- box-sizing ---------------------------------★ */

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

/* ★-------------------------------- focus-outline--------------------------------★ */

*:focus{
  outline:none;
}

/* ★---------------------------------- 基本設定 ----------------------------------★ */

/* テーマカラー */
:root {
  /* メインカラー（信頼感・安心感） */
  --primary-color:#005F73; /* ディープブルー */

  /* アクセントカラー（親しみやすさ・温かみ） */
  --accent-color1:#E29578; /* コーラルピンク */
  --accent-color2:#F4A261; /* ソフトオレンジ */

  /* 背景カラー（清潔感・可読性） */
  --bg-light:#F5F5F5; /* ライトグレー */
  --bg-white:#FFFFFF; /* ホワイト */

  /* テキストカラー（視認性・可読性） */
  --text-dark:#333333; /* ダークグレー */
  --text-primary:var(--primary-color); /* 見出し・強調部分 */
}


/* 固定ページヘッダー背景 */


/* フォントファミリー */
:root {
  --page_title:'Zen Antique Soft',serif;
  --title_read:'Kiwi Maru',serif;
  --h2:'Yomogi',cursive; 
  --h3:'Zen Maru Gothic',sans-serif;
}

/* フォントサイズ */
:root {
  --h2_size:2.5rem;
  --h3_size:2.2rem;
}

/* デスクトップコンテナ幅のmax-width */
:root {
  --desktop:1050px;
}

/* 背景色 */
:root {
  --info_back:#A3A4A6;
  --trans_black1:rgba(0,0,0,0.1);
  --trans_black3:rgba(0,0,0,0.3);
  --trans_black5:rgba(0,0,0,0.5);
  --trans_black7:rgba(0,0,0,0.7);
  --trans_black9:rgba(0,0,0,0.9);
}

:root {
  --trans_white_1:rgba(255,255,255,0.1);
  --trans_white_3:rgba(255,255,255,0.3);
  --trans_white_5:rgba(255,255,255,0.5);
  --trans_white_7:rgba(255,255,255,0.7);
  --trans_white_9:rgba(255,255,255,0.9);
}

/* Font Awesome */
:root {
  --font_awesome:'Font Awesome 5 Free';
}

div.progress-wrap.btn-right-side.active-progress {
  z-index:995;
}

/* ★----------------------------- サイト全体の設定 -------------------------------★ */

:root {
  font-size:62.5%;
  box-sizing:border-box;
  font-family:'BIZ UDGothic',sans-serif;
}

/* margin左右:calc(50%-50vw)時の(親要素無視の画面幅100%)横スクロールバー出現防止 */
body {
	overflow-x:hidden;
  background:var(--contents_color);
}

/* ★---------------------------- コンテナ区切り設定 ------------------------------★ */

.shape_header {
  overflow:hidden;
  position:relative;
}

.shape_header::before {
  content:'';
  font-family:'shape divider from ShapeDividers.com';
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  top: -1px;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat; 
  background-size: 238% 34px;
  background-position: 50% 100%;    
  transform: rotateY(180deg);
  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%23cd9fa1" d="M0 288l1440-128v160H0z"/><path fill="%23cd9fa1" opacity=".66" d="M0 192l1440-96v224H0z"/></svg>'); 
}
  
@media (min-width:521px) and (max-width:768px) {
.shape_header::before {
  background-size: 178% 23px;
  background-position: 94% 100%;  
  transform: rotateY(180deg); 
  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 77.25" preserveAspectRatio="none"><g fill="%23cd9fa1"><path d="M0 68.78l381-33.86v42.33H0z"/><path d="M0 43.38l381-25.4v59.27H0z" opacity=".33"/><path d="M0 17.98L381 0v77.25H0z" opacity=".33"/></g></svg>'); 
}  
}
   
@media (min-width:769px) {
.shape_header::before{ 
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw; 
  background-size: 200% 40px;
  background-position: 30% 100%; 
  transform: rotateY(180deg); 
}
}   

/* ★---------------------------------- コンテナ ----------------------------------★ */

div#container {
  max-width:var(--desktop);
  margin:auto;
  padding:0px 10px;
}

/* ★---------------------------------- フロント ----------------------------------★ */

h2.fronth2 {
  font-size:clamp(25rem, 4vw, 60rem);
}