@charset "utf-8";
/* CSS Document せっけん運動*/
html {
    font-size: 16px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust:100%;
}
body {
    font-family: "Noto Sans JP", sans-serif;
    color: #354166;
    overflow-x: hidden;    
}
.wrapper, .wrapper02, .wrapper03 {
    max-width: 980px;
    margin-inline: auto;
    width: 100%;
    text-align: center;
    background: #feffff;
    /* border: solid 0.5px #f7f8f8; */
}
.wrapper02, .wrapper03 {
    background: none;
}
/* .wrapper02 {
    padding-right: 10%;
} */

header {
    background-image: url(img/top.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    aspect-ratio: 	160 / 65;/* 490 / 257 */
    position: relative;   
}
.top-h1 {
    width: clamp(12.375rem, 3.93rem + 36.03vw, 26rem);  /* 42% */
    /* margin-left: auto; */
    padding: clamp(1rem, 0.38rem + 2.64vw, 2rem) 1rem;
    position: absolute;
    bottom: 0;
    right: 0;
}
.main-h1 {
    margin-block: 10%;
    background-image: url(img/mizuwamaguru0704.svg);
    background-size:contain;
    background-position: right 1rem bottom;
    background-repeat: no-repeat;

}
.main-h1 h1 {
    text-align: left;
    color: #53649B;
    text-shadow:0.5px 0.5px 0 #DCC08D, -0.5px -0.5px 0 #DCC08D,
              -0.5px 0.5px 0 #DCC08D, 0.5px -0.5px 0 #DCC08D,
              0px 0.5px 0 #DCC08D,  0 -0.5px 0 #DCC08D,
              -0.5px 0 0 #DCC08D, 0.5px 0 0 #DCC08D;
              font-size: clamp(1.75rem, 1.208rem + 2.31vw, 2.625rem);
              font-weight: medium;
              margin-block:18% 5%;
              padding: 8% 5% 22%;
    /* -webkit-text-stroke: 0.5px #DCC08D;
    text-stroke: 0.5px #DCC08D ; */
}
.sec01 { 
    margin-top: 5% ;
    text-align: left;
}
.h1-p-box  /* 合成洗剤box */{    
    /* position: relative ;*/
    /* padding-bottom: 66.67%; */
}
.h1-p{
    background: url(img/h1p-bg2x.webp) no-repeat ;background-size: auto 100%;
    background-position: 20% center; 
    padding: 8%;
    margin-inline: auto ;
}
.h1-aside {
    /* background-color: #FFC2B8;
    border-radius: 50%; */
    background: url(img/Ellipse.svg) no-repeat;
    background-size: contain ;
    background-position: center; 
    width: 32%;
    min-width: 200px;
    height: auto;
    margin-inline: auto clamp(0.703rem, -4.672rem + 22.93vw, 9.375rem);
    transform: translateY(-50%);

    /* position: absolute;
    right: 0;
    bottom: 0; */
}
.aside-p {   
    font-size: 0.875rem;
    line-height: 1rem;
    width: 76%;
    max-width: 215px;
    margin: 0 auto;
    padding: 15% 10%;
    overflow: hidden;
    text-overflow: ellipsis; /* あとでする */
}
@media (min-width:440px) and (max-width:768px){
    header {
        aspect-ratio: 490 / 257 ;
    }    
}
@media (max-width:439px) {
      header {
        aspect-ratio: 125 / 100 ;
        background-position: 35% 100%;
    }
    .main-h1 {
    margin-top: 25%; }
}
@media (max-width: 740px) {
	.h1-aside {
		transform: translateY(-10%);
	}
    .h1-p {
        padding: 9% 8% 10%;
    }
}
/* 改行コントロール */

.br511, .br731 {
    display: none;
}
  

@media (min-width: 511px) {
	.br511 {
		display: block;
	}
}
@media (max-width: 731px) {
	.br731 {
		display: block;
	}
}
.break {
    word-break: keep-all;
}
.nw {
    white-space: nowrap;
}


/* 見出しボックスデザイン */
.sec02-h2, .sec03-h3 {
    display: inline-block;
    border: outset 1px #565975;
    background:white;
    box-shadow:1px 1px 2px 0px #b0b397; 
    padding: 1.5rem clamp(0.5rem, -0.43rem + 3.97vw, 2rem);
    /* outline: solid 1px #565975;
    outline-offset: -1px; */
    width: 74%;
    min-width: 320px;
    position: relative;
   /*  padding: 3rem 2rem 2rem;
    outline: 2px solid #333;
    outline-offset: -1.5rem; */
    font-size:clamp(1.156rem, 0.478rem + 2.89vw, 2.25rem);
    line-height: 1.5;
}

.sec02-h2::before, .sec03-h3::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    padding: 2rem 0.2rem;
    border: 1px solid #565975;
    /* background-image: linear-gradient(to right, #565975, #565975); */ 
    background-color: #53649B;
    /*color: white;
    font-size: 10px; */
    content: ""/* attr(data-title) */;
}
/* せっけん運動 */
.undo {
    width: 72%;
    margin: 12% auto;
}
.undo p {
    text-align: left;
    margin-block: 1rem;
    line-height: 1.6;
}
/* ピンク円背景画像 */
.sec02 {
    background: url(img/Ellipse3.svg) no-repeat;
    background-position: 35% 50%;
    background-size: auto;
    padding-block: 20%;
}
@media (min-width:648px) and (max-width:1080px) {
        .sec02 {
            background-position: -90px 50%; /* background-origin: content-box;   background-size: auto; */
        }
    }
@media (max-width: 647px) {
	.sec02 {
		background-position: 80%;
	}
}
@media (max-width:980px) {
    /* .sec02 {background-position: left;} */
    .s05cntnr {
        width: 90%;
        padding-top: 3%; }   
/* 動画 */
    .sec04 {
        margin-top: 25%;
        padding-bottom: 5%;}
} 
.ud-sec02h2 {
    word-break: keep-all;
}

/* ハンドブック*/
.sec03-h3 {
    text-align: left;
    font-size: clamp(1.094rem, 0.803rem + 1.24vw, 1.563rem);
    font-weight: 500;
}
.f-box {
    margin: 10%;}
.f-box a{
    display: flex;
    flex-direction: row;
    max-width: 980px;
    justify-content: center;
}
.f-img1, .f-img2 {
	flex-shrink: 1;
    flex-basis: 45%;
    border: solid 1px #e5e5e5;
    margin: 0 0.8rem 2rem;    
}
img {
    max-width: 100%;
    height: auto;
}
.btn {
    background: #FFEBE2;
    box-shadow:1px 1px 2px 0px rgba(0,0,0,0.5);
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 1rem;     
}
.btn a {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}
.btn a:visited {
  color: rgb(156, 156, 153);/*文字をグレイに*/
}
/* 動画 */
.sec04 {
    margin-top: 25%;
}
.ytb {
    margin: 10% auto ;
    width: 80%;
}
.s03sub {
    font-size: smaller;
    word-break: keep-all;
}
iframe[src*="youtube.com"] {
	width: 100%;
    height: auto;
	aspect-ratio: 16 / 9;
}
/* バナーコンテナ */
.s05cntnr {
    margin: 20% auto 0%;
    padding: 10% 5% 8%;
    background: #FDE3D7;
}

.bnr {
    display: inline-block;
    border: outset 1px #565975;
    background-image: linear-gradient(85deg, rgba(254, 255, 250, 1), rgba(255, 243, 254, 0.5) 19%, rgba(255, 227, 212, 1) 89%);
    margin-bottom: 5%;
}
.bnr-h2 {
    font-weight: 400;
    padding: clamp(0.5rem, -0.774rem + 5.44vw, 1.2rem) clamp(0.5rem, -0.43rem + 3.97vw, 2rem);
    font-size: clamp(1.25rem, -0.57rem + 7.77vw, 2.25rem);
}
.bnr-fbox {
    display: flex;
    flex-direction: column;
    margin: 7% 5% 5%;
    row-gap:clamp(2rem, -1.879rem + 16.55vw, 3.5rem);
    place-content: space-around center;    
}
.bncoop {
    max-width: 600px;
    margin-inline: auto;
}
/* 
@media (min-width: 768px) {
	.bnr-fbox {
        flex-direction: row;
        margin: 10% auto;
}
} */
 .sec05 {
    text-align: center;
 }
.btn-prod {
    display: inline-block;
    width: 55%;
    max-width: 340px;
    background: #DBECFF;
    border: 2px solid #48A8AF;
    border-radius: 40px;
    box-shadow: 1px 1px 1px 0px #e0dec8;
    margin-block: 15%;
}
.btn-prod:hover {
    transition-duration: .3s;
  transform: scale(1.1);
}
.btn-prod:active {
  transform: translateY(4px);
}
.btn-prod img {
    display: block;
    width: 95%;
    padding: clamp(1rem, 0.876rem + 0.53vw, 1.2rem);
    margin-inline: auto;
}
footer {
    background: #eef8f7;
    text-align: center;
    padding-bottom: 1%;
}
.footer-d {
    display: inline-block;
    width: 40%;
    max-width: 300px;
    margin: 20% auto 1%;
}
.footer-d p {
    text-align: right ;
}