@charset "utf-8";

/* =====================
  基本
===================== */
body {
  font-family: "Noto Sans CJK JP", sans-serif;
  margin: 0;
  padding: 0;
  width:auto;
}


/* =====================
  戻るボタン
===================== */
#pagetop{
	height:0;
	opacity:0;
	transition: 0.3s;
	visibility:hidden;
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 100px;
	border-radius: 50%;
	z-index: 1000;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;

}
#pagetop.fixed{
	height:100px;
	opacity:1;
	visibility:visible;
}
#pagetop a{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	
	background-image: url("../img/top_btn.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

#pagetop:hover {
    opacity: 0.8; /* ホバーで完全に不透明に */
}
@media(max-width:785px){
	#pagetop{
		display: none!important;
	}
}



/* =====================
  ヘッダー
===================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;

  display: flex;
  justify-content: center;

  z-index: 20;
  transition: transform 0.3s ease;
}

/* スクロールで隠す */
.site-header.is-hidden {
  transform: translateY(-100%);
}

/* 半透明背景（最大750px・縮小可） */
.toplogo-bg {
  width: 100%;
  max-width: 500px;
  height: 80px;

  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  display: flex;
  align-items: center;
}


/* ロゴ */
.top_logo {
  padding: 0 16px;
  box-sizing: border-box;
}
.top_logo img {
  width: 159px;
}

@media (max-width: 770px) {
	.toplogo-bg { max-width:770px;}
}


/* =====================
  レイアウト（Flex 3カラム風）
===================== */
.layout {
  display: flex;
  justify-content: center;
}

/* =====================
  サイドバー
===================== */
.sidebar {
  flex: 1;
  min-width: 0;
  padding: 12px;
  background:#c5ddf2 ;
}
@media (max-width: 770px) {
	.sidebar { padding:0;}
}
@media (max-width: 547px) {
  .sidebar {
    display: none;
	 background:#c5ddf2 ;
  }

  .layout {
    justify-content: center;
  }
}
.qr_qr1 img {
  display: block;
  margin: 0 auto;
  width: 100%;        /* 親要素に追従 */
  height: auto;
  max-width: none;    /* 親で制御する */
  padding: 10%;
  box-sizing: border-box;
}
.qr_qr1 > div {
  text-align: center;
  border-radius: 5%;
  overflow: hidden;
  background-color: #3f8ed3;
  border: solid #3f8ed3 3px;

  /* ★ 自然に縮小する肝 */
  width: clamp(120px, 15vw, 185px);
}


.qr_qr1 div p{
	font-size: 14px;
	margin:0;
	background-color: #3f8ed3;
	color: #fff;
	text-align: center;
	line-height: 1.5;
	border-radius: 5% 5% 0 0;
	padding: 5px 4px;
  outline: none;
}
.qr_qr1 > div img{
  background:#fff;
  display:block;
}
.qr_qr1 {
  position: relative;
  z-index: 30;
}
.qr-br{
	display: none;
}

.sidebar.left {
  position: relative;
  padding: 0;
}
.sidebar.right {
  position: relative;
  padding: 0;
}

.title {
  width: 427px; /* 今のデザイン維持 */
  z-index: 20;
}

.title img {
  width: 100%;
}
@media screen and (min-width: 770px) {
  .title {
    position: fixed;
    top: 50%;
    right: calc((100vw - 500px) / 4);
    transform: translate(50%, -50%);
    z-index: 30;
	width: clamp(
      120px, 15vw, 427px  /* 1400px以上で固定 */
    );
  }

@media screen and (min-width: 890px) {
  .title {
    width: clamp(185px, 22vw, 540px);
  }
}
	
  .title img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 1080px) {
	.qr-br{display: block;}	
}

@media screen and (max-width: 770px) {
	.qr_qr1{display:none;}
	.title{display: none;}
}


@media screen and (min-width: 750px) {

  .qr_qr1 > div {
    position: fixed;
    top: 50%;
    left: calc((100vw - 500px) / 4);
    transform: translate(-50%, -50%);
    z-index: 30;
  }
	
.title {
    position: fixed;
    top: 50%;

    /* 右サイドバー中央（qr_qr1 の左右反転） */
    right: calc((100vw - 500px) / 4);

    transform: translate(50%, -50%);
    z-index: 30;/* 今のデザイン維持 */
  }
 
}
.sidebar-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


/* =====================
  コンテンツ mv
===================== */
.container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
.content {
  width: 100%;
  max-width: 500px;
  padding: 0 5 80 5 ; /* ヘッダー分 */
  box-sizing: border-box;
  background-color: #FFFFFF;
  height: auto;
  margin: 0;
  z-index: 10;
}

@media screen and (max-width: 770px) {
  .content {
    max-width: none;  /* 制限解除 */
    width: 100%;      /* 画面いっぱい */
  }

  .container {
    max-width: none;  /* 中の制限も解除 */
  }
}
.mv{
width: 100%;
max-width: 500px;
margin: 0  auto 0;
}
.mv h2 img {
	width: 100%;
}
.mv h2{
	display: block;
max-width: 770px;
margin-bottom: 0;
}
.koukaityu img{
	width: 100%;
}
.koukaityu{
	width:90%;
margin-bottom: 0;	
	margin: 51px  auto 0px 
}

.cm_wrap{
	padding-top: 10px;
	margin-right: auto;
	margin-left: auto;
}
.cm{
  width:95%;
  margin: 0 auto; 
}
.cm img{
	width:100%;
}

#image-container {
  cursor: pointer;
}
@media screen and (max-width: 770px) {
  .mv {
    max-width: none;  /* 制限解除 */
    width: 100%;      /* 画面いっぱい */
	}}

/* モーダル背景 */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}

/* モーダル内のコンテンツラッパー */
.modal-content {
  background-color: transparent;
  padding: 0;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* YouTubeプレイヤーラッパー */
#youtubeIframe {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}

/* モーダル内の動画表示用ラッパー */
.youtube-frame-wrapper {
  position: relative;
  width: 90vw;
  max-width: 960px;
  background-color: white;
  border-radius: 16px;
  padding: 12px;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
}

/* アスペクト比を保つ（16:9） */
.youtube-frame-wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 アスペクト比 */
}

/* iframe本体 */
.youtube-frame-wrapper iframe {
  position: absolute;
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  border: none;
  border-radius: 12px;
}
/* 閉じるボタン */
.close-button {
  position: absolute;
  top: -45px; /* 枠の上に出す */
  right: -6px; /* 枠の右に出す */
  color: #fff;
  font-size: 50px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}


#gasskyutou-hen img{max-width:100%; height:auto; vertical-align: bottom; transition: all 0.2s;}
#gasskyutou-hen img:hover { opacity: 0.7;}

/* =====================
  コンテンツ about
===================== */

.about{	
padding-top: 60px;
margin: 0px auto 0px auto;
padding-bottom: 40px;
}
.about img{
width:100%;
}
.about_bubble{
width: 90%;
padding:0 0 105px 0;
margin: 0 auto;
list-style: none;
display:flex;
justify-content: center;
flex-direction: column;
}

.about_bubble img {
	display: block;          /* ← これがないと微ズレします */
  width: 100%;
  margin: 0px auto;
}
.blue_about{
	color: #3f8ed3;
	font-size: 21.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding-top: 15px;
}
.blue_size {
	color: #3f8ed3;
	font-size: 19px;
	padding-top: 8px;
	}
.glay_point {
	color: #666666;
	font-size: 18.3px;
	font-weight: 500;
	letter-spacing: 0.01em;
	max-width: 454px;
  	width: 100%;
	padding: 9px 0 0px 0px;
	}
.size_bg{
	background-color:#E0EDF9;
	padding: 0px 9px 3px;
}
@media (max-width: 770px) {
	.glay_point { width:100%;}
}

/* =====================
コンテンツ usability 
ウルトラファインバブルの機能
===================== */
.sec2{
width: 100%;
padding: 0;
margin: 0;
}
.usability{
width: 100%;	
padding-top: 20px;
}


.usability img{	
width: 100%;
}
.usability2{
width: 90%;
padding:27px 0 10px 0;
margin: 0 auto;
list-style: none;
display:flex;
justify-content: center;
flex-direction: column;
}
.usa_main {
width: 100%;
}
.usa_main img{
width: 100%;
}
.blue_about2 {
	color: #3f8ed3;
	font-size: 21.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding-top: 10px;
	}
.usability3{
width: 90%;
padding:45px 0px 55px 0px;
margin: 0 auto;
display:flex;
justify-content: center;
flex-direction: column;
}
.usability3>li 
{
width: 100%;
margin: 0 auto;
padding-bottom: 27px;
}
.usability3>li>img{
  display: block;     /* ← 超重要 */
  width: 100%;
  height: auto;
  max-width: none;    /* SVG対策 */
}


/* =====================
コンテンツ verification
ウルトラファインバブル
給湯器の洗浄効果の検証
===================== */

.verification{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 2%;   /* ← これに変更 */
  box-sizing: border-box;
  align-items: stretch;   /* ← 高さを揃える（重要） */
  overflow: visible;
  margin-top: 30px;
}
.sarayu,
.urutra{
  width: 100%;
  max-width: 100%;
  height: auto;
}
.sarayu img,
.urutra img{
  width: 100%;
  height: auto;
  display: block;
}
.verification > ul{
  width: 48%;
  margin: 0;
  padding: 0 3% 0 3%;
  list-style: none;
  text-align: center;
}
.veri_blue{
	color: #3f8ed3;
	font-size: 14.5px;
	font-weight: 300;
	letter-spacing: 0.05em;
	padding-top: 1px;
}
@media (max-width: 400px) {
	.veri_blue { font-size: 12.5px;}
}

.veri_setumei{
	width:100%;
}
.grafu {
width:100%;
margin-top: 37px;
margin-bottom: 7px;
}
.grafu img{
width:100%;
}
.glay_small {
	color: #666666;
	font-size: 15.5px;
	font-weight: 400;
	letter-spacing: 0.01em;
	max-width: 100%;
  	width: 100%;
	padding: 9px 0 0px 0px;
	line-height:1.3;
	}
.glay_small2 {
	color: #666666;
	font-size: 15.5px;
	font-weight: 400;
	letter-spacing: 0.01em;
	max-width: 99%;
  	width: 100%;
	padding: 9px 0 0px 0px;
	line-height:1.57;
	padding-left: 0.7em;
  text-indent: -0.7em;
	}
.movie{
padding-top: 10px;
padding-bottom: 118px;
}

.btn{
width:300px;
padding: 2% 5%;
display: block;
color: #3f8ed3;
font-weight: bold;
text-align: center;
border-radius: 50px;
position: relative;
font-size: 20px;
margin: 1% auto 1%;
cursor: pointer;
border: 2px solid #3f8ed3;
background-color: #fff;
}
.btn:hover{
    color: #fff;
	border: 2px solid #3f8ed3;
	background-color: #3f8ed3;
	opacity: 1;
}

.btn::after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	border-width: 0.54952em 0.375em;
	border-top-color: currentColor;
	border-bottom: 0;
	position: absolute;
	top: 45%;
	right: 5%;
}
.sec3sp-br{
display: none;
}
@media (max-width: 400px) {
	.sec3sp-br{
			
display: block;
}
}
.sidebar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 41vw;
  height: 100vh;
  overflow: hidden;
  z-index: 9;
}
.sidebar-fixed2 {
  position: fixed;
  top: 0;
  rigt: 0;
  width: 41vw;
  height: 100vh;
  overflow: hidden;
  z-index: 9;
}
/* =====================
コンテンツ skin_hair
ウルトラファインバブル
給湯器の肌と髪への効果の検証
===================== */
.skin{
width: 90%;
padding:13px 0 10px 0;
margin: 0 auto;
list-style: none;
display:flex;
justify-content: center;
flex-direction: column;
}

.skin_setumei{
	width:100%;
}
.grafu2 {
	width: 100%;
	padding: 20px 0 13px 0;
}
.grafu2 img{
	width: 100%;
}
.glay_small3 {
	color: #666666;
	font-size: 15.5px;
	font-weight: 400;
	max-width: 99%;
  	width: 100%;
	margin-top: 0;
  margin-bottom: -0.5em;
	padding: 9px 0 0px 0px;
	line-height:1.57;
	padding-left: 0.7em;
  text-indent: -0.7em;
  letter-spacing: 0;
	}

.glay_small4 {
	color: #666666;
	font-size: 15.5px;
	font-weight: 400;
	max-width: 99%;
  	width: 100%;
	margin:53px 10px 0 0;
	padding-left: 0.6em;
  padding-right: 0.6em;
	line-height:1.57;
  letter-spacing: 0;
	}

/* =====================
  フッター
===================== */
.site-footer {
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 50;
}

.footer-inner {
  width: 100%;
  max-width: 500px;
  padding: 0px 0;
  background-color: white;
  padding-top: 18px;
  padding-bottom: 15px;
}
.footer-inner p{
  font-size: 16.0px;
	font-weight: 600;
}

p.time{
	font-size: 14.0px;
	font-weight: 700;
	line-height: 1.8em;
	color:#3f8ed3;
	padding-top: 1.5px;
	padding-bottom: 18.5px;
}
p.blue_tel{
	font-size: 38px;
	font-weight: 600;
	line-height: 1.8em;
	color:#3f8ed3;
	padding-top: 2.0px;
}
p.toiawase{
	color:#656464;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.8em;
	padding-top: 9.5px;
    padding-bottom: 13.0px;
	
}
.blue_tel a {
  color: #3f8ed3;
  text-decoration: none; /* 下線を消す場合 */
}
@media (max-width: 770px) {
	.footer-inner { max-width:770px;}
}
.footer-inner p{
	color:#656464;
}
/* =====================
  SP（749px以下）
===================== */
@media (max-width: 499px) {

  .sidebar {
    display: none;
  }

  .content {
    max-width: none;
  }

  .toplogo-bg {
    max-width: none;
  }
}




/* =====================
  泡
===================== */

 /* 背景画像（縦に並べる） */
    .bg-image {
      display: block;
      width: 100vw;  /* ブラウザの横幅に合わせる */
      height: auto;
    }

    /* 泡アニメーションエリア（左右に固定） */
    .bubble-container {
      position: fixed;
      top: 0;
      bottom: 0;
      width: 30vw;
      pointer-events: none;
      z-index: 10 !important;
    }
    .bubble-container.left {
      position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
    }
    .bubble-container.right {
      right: 0;
    }

    .bubble {
      position: absolute;
      bottom: -100px;
      animation: floatUp linear forwards;
      will-change: transform, opacity;
  pointer-events: none;
}

    @keyframes floatUp {
      0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
      }
      20% {
        opacity: 1;
      }
      100% {
        transform: translateY(-100vh) scale(1.2);
        opacity: 0;
      }
    }

@media (max-width: 1100px) {
  .bubble-container.left{left:-100px;}
.bubble-container.right{right: -100px;}
}
@media (max-width: 900px) {
  .bubble-container.left{display:none;}
.bubble-container.right{display: none;}
}