@charset "UTF-8";

/* genelal base
----------------------------------------- */
#main {
background-color: #f8f3f3;
}

/* ContentsHead
----------------------------------------- */
#ContentsHead {
position: relative;
}
#ContentsHead > .contentsWrap {
margin-right: auto;
margin-left: auto;
position: absolute;
right: 0;
left: 0;
z-index: 1;
color: #ffffff;
text-align: left;
text-shadow: 0 3px 6px rgba(0,0,0,0.5);
}
#ServiceWaterPurifier #ContentsHead > .contentsWrap,
#ServiceWaterPurifier #ContentsTitle h1 {
color: #000000;
text-shadow: none;
}
#ContentsTitle {
text-align: left;
justify-content: flex-start;
}
#ContentsTitle h1 {
margin-left: 0;
color: #ffffff;
text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#ContentsTitle h1 .Jp {
display: block;
}



/* MainImg
----------------------------------------- */
#MainImg {
position: relative;
z-index: 0;
}


/* Problem
----------------------------------------- */
.ProblemContents h2 {
text-align: center;
}
#bge-Problem {
margin-right: auto;
margin-left: auto;
}

/* contentsHeader
----------------------------------------- */
.contentsHeader {
background-color: #a03250;
color: #ffffff;
text-align: center;
line-height: 1.1;
}

/* imageBack
------------------------------------ */
.contentsHeader.imageBack {
background-color: transparent;
background-image: url("images/bk_water.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #000000;
}

.contentsHeader .contentsWrap {
margin-right: auto;
margin-left: auto;
display: block;
position: relative;
}
.contentsHeader .headKazari {
line-height: 1.2;
display: inline-block;
background-color: #f8f3f3;
color: #a03250;
font-weight: bold;
border: 3px solid #a03250;
border-radius: 100px;
position: absolute;
left: 0;
top: -50px;
z-index: 0;
}
.contentsHeader .headKazari::before,
.contentsHeader .headKazari::after {
content: '' ;
width: 1px;
display: block;
border-radius: 100px;
position: absolute;
transform: rotate(-35deg);
}
.contentsHeader .headKazari::before {
height: 30px;
border-left: 3px solid #a03250;
z-index: 2;
right: 25%;
bottom: -15%;
}
.contentsHeader .headKazari::after {
height: 35px;
border-left: 10px solid #f8f3f3;
z-index: 1;
right: 23%;
bottom: -18%;
}

/* contentsHeader video
------------------------------------ */
.contentsHeader .video iframe {
width: 100%;
display: block;
aspect-ratio: 16 / 9;
}


/* pageMenu
----------------------------------------- */
#bge-pageMenu {
position: relative;
}
#bge-pageMenu::before {
content: '';
width: 100%;
height: 50%;
display: block;
background-color: #a03250;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#bge-pageMenu ul {
margin-right: auto;
margin-left: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
z-index: 1;
}
#bge-pageMenu ul li {
text-align: center;
position: relative;
transition: all .3s;
}
#bge-pageMenu ul li:hover {
transform: scale(1.1);
}
#bge-pageMenu ul li:hover a::after {
background-image: url("images/ic_anchor_bk.svg");
}
#bge-pageMenu ul li a {
margin-right: auto;
margin-left: auto;
width: 93%;
background-color: #ffffff;
display: block;
border-radius: 17px;
color: #a03250;
font-weight: bold;
text-align: center;
position: relative;
box-shadow: 0 0 6px rgba(0,0,0,0.2);
transition: all .3s;
}
#bge-pageMenu ul li a::after {
content: '';
margin: auto;
display: block;
width: max(1.5vw,2.5em);
height: max(1.5vw,2.5em);
background-image: url("images/ic_anchor.svg");
position: absolute;
right: 0;
bottom: -1em;
left: 0;
transition: all .3s;
}
#bge-pageMenu ul li .num {
padding: 0.2em 1em;
background-color: #000000;
color: #ffffff;
font-family: lobster, sans-serif;
font-weight: normal;
display: inline-block;
border-radius: 100px;
position: absolute;
top: -1em;
left: -0.8em;
}
#bge-pageMenu ul li .num strong {
margin-left: 0.2em;
}
#bge-pageMenu ul li figure {
margin-right: auto;
margin-bottom: 1em;
margin-left: auto;
}

/* sectionContents
----------------------------------------- */
.sectionContents {
margin-right: auto;
margin-left: auto;
}
.sectionContents > h2 {
margin-bottom: 0.8em;
}
.sectionContents > .caption {
margin-bottom: 1.2em;
}
.sectionContents .sectionHead {
text-align: center;
color: #a03250;
}
.sectionContents .sectionHead .accentImg {
margin-right: auto;
margin-bottom: 1.4em;
margin-left: auto;
}
.sectionContents .sectionHead .catch {
margin-bottom: 0.4em;
display: block;
font-size: 65%;
}

/* sectionContents guide
------------------------------------ */
.sectionContents .guide {
display: flex;
flex-wrap: wrap;
justify-content: center;
border-radius: 17px;
overflow: hidden;
}
.sectionContents .guide .colBlk {
background-color: #a03250;
color: #ffffff;
}
.sectionContents .guide .txtBlk {
text-align: justify;
}

/* sectionContents moreLink
------------------------------------ */
.sectionContents .moreLink {
margin-top: 1.5em;
margin-right: auto;
margin-bottom: 2em;
margin-left: auto;
width: 100%;
border-width: 3px;
}
.sectionContents .moreLink a {
position: relative;
}
.sectionContents .moreLink a::after {
content: '';
margin-bottom: 1px;
margin-left: 10px;
width: 0.6em;
height: 0.6em;
display: inline-block;
border-top: 2px solid #a03250;
border-right: 2px solid #a03250;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sectionContents .moreLink a:hover::after {
border-color: #ffffff;
}


/* sectionContents productsList
------------------------------------ */
.sectionContents .productsList {
margin-bottom: 1.2em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sectionContents .productsList li {
margin-bottom: 1.5em;
background-color: #ffffff;
border-radius: 17px;
overflow: hidden;
box-shadow: 0 0 6px rgba(0,0,0,0.2);
}
.sectionContents .productsList li h3 {
margin-bottom: 0.8em;
padding-bottom: 0.3em;
border-bottom: 1px solid #000000;
}
.sectionContents .productsList li h3 small {
line-height: 1.2;
display: block;
font-size: 60%;
}
.sectionContents .productsList li .txtBlk {
margin-bottom: 1em;
}
.sectionContents .productsList li .pageLink a {
padding: 0.8em;
display: block;
background-color: #525252;
border-radius: 5px;
color: #ffffff;
text-align: center;
}
.sectionContents .productsList li .pageLink a:hover {
background-color: #a03250;
}




/* sectionContents recommend
------------------------------------ */
.sectionContents .recommend {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sectionContents .recommend li {
padding-bottom: 2em;
}
.sectionContents .recommend h3 {
position: relative;
color: #a03250;
}
.sectionContents .recommend h3::before {
content: '■';
width: 0;
height: 0;
color: #a03250;
}
.sectionContents .recommend figure {
margin-bottom: 1.5em;
}


/* teatro
----------------------------------------- */
.teatroWrapper {
background-color: #ffffff;
}
.teatroWrapper .sectionHead .green {
color: #407c31;
}
.teatroWrapper .sectionHead .txtBlk {
color: #000000;
}
.teatroWrapper .teatroRecommend {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.teatroWrapper .teatroRecommend > li:first-child {
width: 100%;
}
.teatroWrapper .teatroRecommend h3 {
background-color: #407c31;
color: #ffffff;
text-align: center;
}
.teatroWrapper ul.teatroPhoto {
display: flex;
}
.teatroWrapper .teatroRecommend li .txtAlignCenter {
text-align: center;
}
.teatroWrapper .video {
margin-bottom: 60px;
}
.teatroWrapper .video iframe {
width: 100%;
display: block;
aspect-ratio: 16 / 9;
}


/* plusone
----------------------------------------- */
.plusone .contentsWrap {
display: flex;
flex-wrap: wrap;
}


/* template 02 
------------------------------------ */
#ServiceWaterPurifier #main,
#ServiceClean #main {
background-color: #ffffff;
}
#ServiceWaterPurifier .contentsHeader,
#ServiceClean .contentsHeader {
display: flex;
align-items: center;
}

/* sectionContents selectList
------------------------------------ */
.selectList h2 {
padding-top: 1em;
padding-bottom: 1em;
display: block;
background-color: #f7f7f7;
color: #155c9a;
}
.selectList ul {
margin-right: auto;
margin-left: auto;
display: flex;
flex-wrap: wrap;
}
.selectList ul li {
margin-bottom: 2em;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
border-radius: 17px;
background-color: #155c9a;
}
.selectList ul li .colBlk {
color: #ffffff;
display: flex;
text-align: center;
flex-wrap: wrap;
align-items: center;
align-content: space-around;
}
.selectList ul li h3 {
width: 100%;
display: block;
border-bottom: 1px solid #ffffff;
text-align: center;
}

.selectList ul  li .txtBlk {
margin-bottom: 0.5em;
display: block;
text-align: left;
}
.selectList ul  li .point {
width: 100%;
text-align: center;
border-radius: 7px;
}
.selectList ul li figure {
border-radius: 17px;
overflow: hidden;
}
.selectList ul li figure img {
width: 100%;
height: 100%;
}

/* sectionContents waterType
------------------------------------ */
.waterType {
border: 6px solid #155c9a;
text-align: center;
}
.waterType h2 {
color: #155c9a;
}
.waterType ul {
margin-right: auto;
margin-left: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.waterType ul li {
padding: 2%;
background-color: #f7f7f7;
color: #525252;
}
.waterType ul li figure {
margin-right: auto;
margin-bottom: 2em;
margin-left: auto;
max-width: 296px;
}
.waterType ul li h3 {
margin-bottom: 0.3em;
}

/* cleanContents
----------------------------------------- */
#cleanContents {
margin-right: auto;
margin-left: auto;
border-radius: 17px;
overflow: hidden;
}
#cleanContents .cleanContentsHead h2 .catch {
margin-bottom: 0.5em;
display: block;
}
#cleanContents .cleanContentsHead h2 {
margin-bottom: 0.6em;
padding-bottom: 0.2em;
border-bottom: 1px solid #000000;
}
#cleanContents .cleanContentsHead .txtBlk {
text-align: justify;
}
#cleanContents .titleBlk {
padding-top: 1em;
padding-bottom: 1em;
background-color: #f7f7f7;
color: #2c6365;
}
#cleanContents .titleBlk .contentsWrap {
margin-right: auto;
margin-left: auto;
width: 90%;
}
#cleanContents .titleBlk h2 {
margin-bottom: 0.4em;
}
#cleanContents .contentsWrap ul {
margin-right: auto;
margin-bottom: 1.5em;
margin-left: auto;
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#cleanContents .contentsWrap .video iframe {
width: 100%;
aspect-ratio: 16 / 9;
}

#cleanContents .cleanContentsFoot {
background-color: #f7f7f7;
position: relative;
}
#cleanContents .cleanContentsFoot .contentsWrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
color: #2c6365;
position: relative;
z-index: 1;
}
#cleanContents .cleanContentsFoot h2 {
margin-bottom: 0.4em;
}

/* parts Flow
------------------------------------ */
#Flow h1 {
text-align: center;
}
#Flow .flowList {
margin-right: auto;
margin-left: auto;
}
#Flow .flowList li {
margin-bottom: 2.5em;
position: relative;
background-color: #f8f3f3;
}
#Flow .flowList li .num {
position: relative;
background-color: #a03250;
}
#Flow .flowList li h2 {
margin-bottom: 0.5em;
color: #a03250;
}


/* contentsFooter
------------------------------------ */
.contentsFooter {
margin-bottom: 80px;
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #a03250;
}
.contentsFooter figure {
border-radius: 17px;
overflow: hidden;
}
.contentsFooter .colBlk {
line-height: 1.7;
color: #ffffff;
position: relative;
letter-spacing: 0.2em;
}
.contentsFooter h1 {
margin-bottom: 0.5em;
}
.contentsFooter .headKazari {
padding: 1em 2em;
line-height: 1.2;
display: inline-block;
background-color: #f8f3f3;
color: #a03250;
font-weight: bold;
border: 3px solid #a03250;
border-radius: 100px;
position: absolute;
left: 0;
top: -50px;
z-index: 0;
}
.contentsFooter .headKazari::before,
.contentsFooter .headKazari::after {
content: '' ;
width: 1px;
display: block;
border-radius: 100px;
position: absolute;
transform: rotate(-35deg);
}
.contentsFooter .headKazari::before {
border-left: 3px solid #a03250;
z-index: 2;
}
.contentsFooter .headKazari::after {
border-left: 10px solid #f8f3f3;
z-index: 1;
}
.contentsFooter .requestBtn a {
border: 2px solid #ffffff;
border-radius: 7px;
}
.contentsFooter .requestBtn a:hover {
color: #a03250;
background-color: #ffffff;
}
.contentsFooter .requestBtn a:hover i {
filter: brightness(0) saturate(100%) invert(23%) sepia(32%) saturate(3573%) hue-rotate(316deg) brightness(91%) contrast(84%);
}



/* KYOUTSU END // PC BASE ==================== */
@media only screen and (min-width: 1210px){	

/* genelal base
============================================== */

/* ContentsHead
============================================== */
#ContentsHead {
margin-bottom: 0;
}
#ContentsHead > .contentsWrap {
margin-right: auto;
margin-left: auto;
width: 1210px;
top: 35%;
}
#ContentsTitle h1 .En {
font-size: 100px;
}
#ContentsHead > .contentsWrap .caption {
font-size: 32px;
}

/* Problem
============================================== */
#bge-Problem {
width: 1210px;
}
#bge-Problem .bgt-image-container {
margin-bottom: 1em;
}
.ProblemContents h2 {
font-size: 38px;
}


/* contentsHeader
============================================== */
.contentsHeader {
padding-bottom: 50px;
line-height: 1.8;
}
.contentsHeader .headKazari {
padding: 1em 2em;
font-size: 22px;
}
.contentsHeader .contentsWrap {
padding-top: 2em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 2em;
width: 88%;
}
.contentsHeader h1 {
padding-top: 50px;
margin-bottom: 0.5em;
font-size: 43px;
}
.contentsHeader h2 {
padding-top: 40px;
margin-bottom: 0.5em;
font-size: 36px;
}
.contentsHeader .caption {
margin-right: auto;
margin-left: auto;
width: 975px;
font-size: 22px;
word-break: keep-all;
}
.contentsHeader p {
font-size: 22px;
}

/* contentsHeader video
==================================== */
.contentsHeader .video {
margin-right: auto;
margin-left: auto;
width: 1210px;
}

/* pageMenu
============================================== */
#bge-pageMenu {
padding-top: 50px;
}
#bge-pageMenu ul {
width: 1210px;
}
#bge-pageMenu ul li {
width: 32%;
font-size: 22px;
}
#bge-pageMenu ul li a {
padding-top: 40px;
padding-bottom: 60px;
}
#bge-pageMenu ul li figure {
max-width: 200px;
}


/* sectionContents
============================================== */
.sectionContents {
width: 1210px;
}
.sectionContents > h2 {
font-size: 42px;
}
.sectionContents > .caption {
margin-right: auto;
margin-bottom: 80px;
margin-left: auto;
width: 88%;
font-size: 22px;
}
.sectionContents .sectionHead {
margin-bottom: 70px;
font-size: 24px;
}
.sectionContents .sectionHead .accentImg {
max-width: 118px;
}

/* sectionContents guide
==================================== */
.sectionContents .guide {
margin-bottom: 100px;
}
.sectionContents .guide figure {
width: 50%;
}
.sectionContents .guide .colBlk {
padding: 50px; 
width: 50%;
letter-spacing: 0.2em;
}
.sectionContents .guide h3 {
margin-bottom: 1em;
line-height: 1.5;
font-size: 37px;
letter-spacing: 0.2em;
}
.sectionContents .guide .txtBlk {
font-size: 20px;
}
#ServiceTea .sectionContents .guide .txtBlk {
word-break: auto-phrase;
}

/* sectionContents productsList
==================================== */
.sectionContents .productsList {
margin-top: 100px;
}
.sectionContents .productsList li {
padding: 2em;
width: 49%;
font-size: 20px;
}
.sectionContents .productsList li h3 {
font-size: 35px;
}

/* sectionContents recommend
==================================== */
.sectionContents .recommend {
padding-bottom: 50px;
}
.sectionContents .recommend li {
width: 47%;
font-size: 22px;
text-align: justify;
}

/* sectionContents pickUp
==================================== */
.sectionContents .pickUp {
padding-top: 100px;
padding-bottom: 2em;
}
.sectionContents .pickUp h1 {
margin-bottom: 0.3em;
font-size: 72px;
}
.sectionContents .pickUp figure {
margin-top: 60px;
}
.sectionContents .pickUp p {
font-size: 22px;
}


/* teatro
==================================== */
.teatroWrapper {
padding-top: 60px;
padding-bottom: 80px;
place-items: 60px;
}
.teatroWrapper .sectionHead figure {
margin-bottom: 80px;
}
.teatroWrapper .teatroRecommend {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.teatroWrapper .teatroRecommend > li {
width: 49%;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 20px;
}
.teatroWrapper .teatroRecommend > li:first-child {
width: 100%;
}
.teatroWrapper .teatroRecommend h3 {
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 30px;
margin-bottom: 1em;
}
.teatroWrapper ul.teatroPhoto {
display: flex;
gap: 20px;
}
.teatroWrapper ul.teatroPhoto li {
width: 50%;
}
.teatroWrapper .teatroRecommend li .txtAlignCenter {
padding-top: 20px;
font-size: 22px;
}

/* plusone
==================================== */
.plusone .contentsWrap {
justify-content: space-between;
}
.plusone figure {
width: 49%;
}
.plusone .colBlk {
padding-left: 2%;
width: 49%;
font-size: 22px;
}
.plusone .colBlk h3 {
margin-bottom: 0.8em;
font-size: 35px;
}

/* sectionContents selectList
==================================== */
.selectList {
margin-bottom: 80px;
padding-top: 50px;
padding-bottom: 50px;
}
.selectList h2 {
margin-bottom: 1em;
font-size: 36px;
}
.selectList ul {
width: 1210px;
}
.selectList ul li {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.selectList ul li:nth-child(even) .colBlk {
order: 2;
}
.selectList ul li .colBlk {
padding: 2em 2em;
width: 40%;
align-content: center;
}
.selectList ul  li h3 {
margin-bottom: 1em;
font-size: 36px;
}
.selectList ul  li .point {
margin-bottom: 1em;
font-size: 36px;
font-weight: bold;
}
.selectList ul  li .txtBlk {
font-size: 22px;
}
.selectList ul  li figure {
width: 60%;
}
.selectList ul  li figure img {
object-fit: cover;
}

/* sectionContents waterType
==================================== */
.waterType {
margin-bottom: 100px;
padding-top: 50px;
padding-bottom: 80px;
width: 100%;
display: inline-block;
border-radius: 25px;
}
.waterType h2 {
margin-bottom: 1.5em;
font-size: 36px;
}
.waterType ul {
width: 80%;
}
.waterType ul li {
padding-top: 40px;
padding-bottom: 40px;
width: 47%;
border-radius: 22px;
font-size: 21px;
text-align: center;
}
.waterType ul li h3 {
font-size: 36px;
}
.waterType ul li p {
margin: auto;
width: 80%;
display: block;
text-align: center;
word-break: keep-all;
}

/* cleanContents
==================================== */
#cleanContents {
margin-bottom: 100px;
}
#cleanContents .cleanContentsHead {
padding: 5%;
}
#cleanContents .cleanContentsHead .contentsWrap {
display: flex;
flex-wrap: wrap;
}
#cleanContents .cleanContentsHead figure {
width: 45%;
}
#cleanContents .cleanContentsHead .colBlk {
padding-left: 3%;
width: 55%;
}
#cleanContents .cleanContentsHead h2 .catch {
font-size: 25px;
}
#cleanContents .cleanContentsHead h2 {
font-size: 45px;
letter-spacing: 0.1em;
}
#cleanContents .titleBlk {
margin-bottom: 80px;
}
#cleanContents .titleBlk .contentsWrap {
width: 1210px;
}
#cleanContents .video {
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
width: 1210px;
}
#cleanContents .contentsWrap ul {
margin-right: auto;
margin-bottom: 80px;
margin-left: auto;
width: 1210px;
}
#cleanContents .contentsWrap ul li {
width: calc(100%/4);
}
#cleanContents .cleanContentsFoot {
margin-bottom: 100px;
}
#cleanContents .cleanContentsFoot::before {
content: '';
width: 100%;
height: 80px;
background-color: #ffffff;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#cleanContents .cleanContentsFoot .contentsWrap {
margin-right: auto;
margin-left: auto;
width: 1210px;
}
#cleanContents .cleanContentsFoot .colBlk {
padding: 5%;
width: 55%;
display: flex;
flex-wrap: wrap;
align-items: self-end;
align-content: flex-end;
}
#cleanContents .cleanContentsFoot figure {
width: 45%;
}
#cleanContents .cleanContentsFoot h2 {
font-size: 36px;
}
#cleanContents .cleanContentsFoot .txtBlk {
font-size: 20px;
}

/* parts Flow
==================================== */
#Flow {
margin-bottom: 200px;
}
#Flow h1 {
margin-bottom: 80px;
}
#Flow .flowList {
width: 1210px;
}
#Flow .flowList li {
display: flex;
flex-wrap: wrap;
border-top-right-radius: 17px;
border-bottom-right-radius: 17px;
position: relative;
font-size: 20px;
}
#Flow .flowList li:nth-last-child(n+2)::after {
content: '';
width: 1px;
height: 45px;
display: block;
border-right: 4px dotted #a03250;
position: absolute;
top: 100%;
left: 7%;
}
#Flow .flowList li .num {
padding-top: 1em;
width: 190px;
border-top-left-radius: 17px;
border-bottom-left-radius: 17px;
text-align: center;
position: relative;
z-index: 1;
}
#Flow .flowList li .num::before {
content: '';
width:0;
height:0;
display: block;
border-style: solid;
border-width: 40px 0 40px 40px;
border-color: transparent transparent transparent #a03250;
position: absolute;
top: 30%;
right: -20px;
}
#Flow .flowList li .num img {
width: 90%;
}
#Flow .flowList li .colBlk {
padding: 1.5em 3em;
max-width: 83%;
position: relative;
z-index: 1;
}
#Flow .flowList li h2 {
font-size: 32px;
}


/* contentsFooter
============================================== */
.contentsFooter .contentsWrap {
margin-right: auto;
margin-left: auto;
padding-bottom: 60px;
width: 1210px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contentsFooter .headKazari {
font-size: 22px;
}
.contentsFooter figure {
margin-top: 60px;
width: 50%;
}
.contentsFooter .colBlk {
padding-top: 60px;
padding-left: 60px;
width: 50%;
text-align: justify;
}
.contentsFooter .requestBtn {
margin-bottom: 60px;
width: 100%;
}
.contentsFooter .headKazari::before {
height: 30px;
right: 25%;
bottom: -15%;
}
.contentsFooter .headKazari::after {
height: 35px;
right: 23%;
bottom: -18%;
}


/* ServiceTea
==================================== */
#ServiceTea .slideShow {
margin-bottom: 100px;
}




}/* PC END // SP BASE |||||||||||||||||||||||||||||| */
@media only screen and (max-width: 1209px){

/* general base
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
.bgb-opt--mb-large {
margin-bottom: 2em!important;
}


/* ContentsHead
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#ContentsHead > .contentsWrap {
color: #525252!important;
}
#ContentsHead > .contentsWrap .caption p {
padding: 5px;
line-height: 2em;
display: inline;
background: linear-gradient(transparent 0%, rgba(248,243,243,0.8) 0%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-shadow: none;
}

/* ContentsTitle
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#ContentsTitle h1 .En {
line-height: 1.1;
}


/* MainImg
|||||||||||||||||||||||||||||||||||||||||||||||||||| */

/* ServiceCoffee
|||||||||||||||||||||||||||||||||| */
#ServiceCoffee #MainImg img {
object-position: bottom 0 right 40%;
}

/* ServiceTea
|||||||||||||||||||||||||||||||||| */
#ServiceTea #MainImg img {
object-position: bottom 0 right 40%;
}

/* ServiceWaterServer
|||||||||||||||||||||||||||||||||| */
#ServiceWaterServer #MainImg img {
object-position: bottom 0 right 30%;
}

/* ServiceClean
|||||||||||||||||||||||||||||||||| */
#ServiceClean #MainImg img {
object-position: bottom 0 right 20%;
}




/* ContentsHeader
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
.contentsHeader {
padding-bottom: 50px;
line-height: 1.5;
}
.contentsHeader .headKazari {
padding: 0.8em 1.5em;
font-size: max(1.1vw, 18px);
}
.contentsHeader .contentsWrap {
padding-top: 1em;
padding-bottom: 1.5em;
width: 90%;
word-break: auto-phrase;
}
.contentsHeader h1 {
padding-top: 40px;
margin-bottom: 0.5em;
font-size: max(1.1vw,27px);
word-break: auto-phrase;
}
.contentsHeader h2 {
padding-top: 40px;
margin-bottom: 0.5em;
font-size: max(1.1vw,27px);
}
.contentsHeader .caption {
margin-right: auto;
margin-left: auto;
width: 90%;
font-size: max(1.1vw, 17px);
word-break: auto-phrase;
}
.contentsHeader p {
font-size: max(1.1vw, 17px);
}



/* Problem
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#bge-Problem .bgt-grid {
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
width: 100%;
}
#bge-Problem .bgt-image  {
margin-right: auto;
margin-left: auto;
width: 90%;
}
#bge-Problem .bge-ckeditor {
margin-right: auto;
margin-left: auto;
width: 80%;
word-break: auto-phrase;
}
.ProblemContents h2 {
margin-right: auto;
margin-left: auto;
width: 90%;
font-size: max(1.1vw,27px);
word-break: auto-phrase;
}

/* contentsHeader video
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
.contentsHeader .video {
margin-right: auto;
margin-left: auto;
width: 80%;
}

/* pageMenu
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#bge-pageMenu {
padding-top: 10px;
}
#bge-pageMenu ul {
/* width: 82%; */
width: 96%;
}
#bge-pageMenu ul li {
width: calc(100%/3);
/* font-size:  1.5vw; */
font-size: 2.2vw;
word-break: auto-phrase;
}
#bge-pageMenu ul li a {
/* padding-top: 25px;
padding-bottom: 30px; */
padding-top: 15px;
padding-bottom: 35px;
height: 100%;
min-height: 110px;
}
@media only screen and (max-width: 509px){
    #bge-pageMenu ul li a {
        padding-bottom: 15px;
        }
    }
#bge-pageMenu ul li figure {
max-width: 16vw;
}
#bge-pageMenu ul li .num {
/* font-size: 12px; */
font-size: clamp(16px,2vw,22px);
left: 0.2em;
}
#bge-pageMenu ul li .anchorLink {
margin-right: auto;
margin-left: auto;
width: 90%;
}

/* sectionContents
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
.sectionContents {
width: 90%;
}
.sectionContents > h2 {
font-size: max(1.1vw,27px);
word-break: auto-phrase;
}
.sectionContents > .caption {
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
width: 90%;
font-size: max(1.1vw,18px);
word-break: auto-phrase;
}
.sectionContents .sectionHead {
margin-bottom: 70px;
font-size: max(1.1vw,20px);
}
.sectionContents .sectionHead .accentImg {
max-width: 90px;
}

/* sectionContents guide
|||||||||||||||||||||||||||||||||||| */
.sectionContents .guide {
margin-bottom: 50px;
}
.sectionContents .guide figure {
width: 100%;
height: 130px;
}
.sectionContents .guide figure img {
object-position: bottom 50px right 0;
}
.sectionContents .guide .colBlk {
padding: 1em; 
width: 100%;
letter-spacing: 0.2em;
}
.sectionContents .guide h3 {
margin-bottom: 1em;
line-height: 1.5;
font-size: max(1.1vw,24px);
letter-spacing: 0.2em;
word-break: keep-all;
}
.sectionContents .guide .txtBlk {
font-size: max(1.1vw,16px);
word-break: auto-phrase;
text-align: left;
}






/* sectionContents productsList
|||||||||||||||||||||||||||||||||||| */
.sectionContents .productsList {
margin-top: 50px;
}
.sectionContents .productsList li {
padding: 2em;
width: 100%;
font-size: max(1.1vw,16px);
}
.sectionContents .productsList li h3 {
font-size: max(1.1vw,27px);
}

/* sectionContents recommend
|||||||||||||||||||||||||||||||||||| */
.sectionContents .recommend {
margin-right: auto;
margin-left: auto;
padding-bottom: 50px;
width: 90%;
}
.sectionContents .recommend li {
width: 100%;
font-size: max(1.1vw,18px);
text-align: justify;
}

/* sectionContents pickUp
|||||||||||||||||||||||||||||||||||| */
.sectionContents .pickUp {
padding-top: 80px;
padding-bottom: 1.5em;
}
.sectionContents .pickUp h1 {
margin-bottom: 0.3em;
font-size: max(1.1vw,50px);
}
.sectionContents .pickUp figure {
margin-top: 40px;
}
.sectionContents .pickUp p {
font-size: max(1.1vw,16px);
word-break: auto-phrase;
}

/* teatro
|||||||||||||||||||||||||||||||||||| */
.teatroWrapper {
padding-top: 60px;
padding-bottom: 50px;
place-items: 60px;
}
.teatroWrapper .sectionHead {
margin-bottom: 40px;
}
.teatroWrapper .sectionHead figure {
margin-bottom: 40px;
}
.teatroWrapper .sectionHead .txtBlk {
word-break: auto-phrase;
}
.teatroWrapper .teatroRecommend {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.teatroWrapper .teatroRecommend > li {
width: 100%;
gap: 10px;
margin-bottom: 20px;
padding-bottom: 20px;
word-break: auto-phrase;
}
.teatroWrapper .teatroRecommend > li:first-child {
width: 100%;
}
.teatroWrapper .teatroRecommend h3 {
margin-bottom: 1em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 100px;
font-size: max(1.1vw,20px);
}
.teatroWrapper ul.teatroPhoto {
display: flex;
gap: 20px;
}
.teatroWrapper ul.teatroPhoto li {
width: 50%;
}
.teatroWrapper .teatroRecommend li .txtAlignCenter {
padding-top: 20px;
font-size: max(1.1vw,16px);
}

/* plusone
|||||||||||||||||||||||||||||||||||| */
.plusone .contentsWrap {
justify-content: space-between;
}
.plusone figure {
width: 100%;
}
.plusone .colBlk {
padding-left: 2%;
width: 100%;
font-size: max(1.1vw,16px);
text-align: justify;
}
.plusone .colBlk h3 {
margin-bottom: 0.8em;
font-size: max(1.1vw,27px);
word-break: auto-phrase;
}


/* sectionContents selectList
|||||||||||||||||||||||||||||||||||| */
.selectList {
margin-bottom: 20px;
padding-top: 30px;
padding-bottom: 30px;
}
.selectList h2 {
margin-bottom: 1em;
font-size: max(1.1vw,27px);
word-break: auto-phrase;
}
.selectList ul {
width: 90%;
justify-content: space-between;
}
.selectList ul  li {
margin-bottom: 1em;
width: 100%;
flex-wrap: wrap;
}
.selectList ul li .colBlk {
padding: 1em;
width: 100%;
}
.selectList ul  li h3 {
margin-bottom: 0.4em;
font-size: max(1.1vw,27px);
}
.selectList ul  li .point {
margin-bottom: 0.4em;
font-size: max(1.1vw,27px);
}
.selectList ul  li .txtBlk {
font-size: max(1.1vw,14px);
}
.selectList ul li figure {
margin-right: auto;
margin-left: auto;
width: 100%;
}
.selectList ul li figure img {
object-fit: cover;
}

/* sectionContents waterType
|||||||||||||||||||||||||||||||||||| */
.waterType {
margin-bottom: 80px;
padding-top: 30px;
padding-bottom: 30px;
width: 100%;
display: inline-block;
border-radius: 15px;
}
.waterType h2 {
margin-bottom: 1.5em;
font-size: max(1.1vw,24px);
word-break: auto-phrase;
}
.waterType ul {
width: 80%;
}
.waterType ul li {
margin-bottom: 20px;
padding-top: 40px;
padding-bottom: 40px;
width: 100%;
border-radius: 22px;
font-size: 21px;
text-align: center;
}
.waterType ul li figure {
margin-bottom: 0;
width: 100px;
}
.waterType ul li h3 {
font-size: max(1.1vw,27px);
}
.waterType ul li p {
margin: auto;
width: 80%;
display: block;
font-size: max(1.1vw,16px);
text-align: center;
word-break: keep-all;
}

/* cleanContents
|||||||||||||||||||||||||||||||||||| */
#cleanContents {
margin-bottom: 80px;
}
#cleanContents .cleanContentsHead {
padding: 5%;
}
#cleanContents .cleanContentsHead .contentsWrap {
display: flex;
flex-wrap: wrap;
}
#cleanContents .cleanContentsHead figure {
width: 100%;
}
#cleanContents .cleanContentsHead .colBlk {
padding-left: 3%;
width: 100%;
}
#cleanContents .cleanContentsHead h2 .catch {
font-size: max(1.1vw,16px);
}
#cleanContents .cleanContentsHead h2 {
font-size: max(1.1vw,27px);
letter-spacing: 0.1em;
}
#cleanContents .titleBlk {
margin-bottom: 40px;
}
#cleanContents .titleBlk .contentsWrap {
width: 90%;
}
#cleanContents .titleBlk h2 {
word-break: auto-phrase;
}
#cleanContents .titleBlk .caption {
text-align: justify;
font-size: max(1.1vw,16px);
}

#cleanContents .video {
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
width: 90%;
}
#cleanContents .contentsWrap ul {
margin-right: auto;
margin-bottom: 80px;
margin-left: auto;
width: 90%;
}
#cleanContents .contentsWrap ul li {
width: calc(100%/2);
}
#cleanContents .cleanContentsFoot {
margin-bottom: 100px;
}
#cleanContents .cleanContentsFoot::before {
content: '';
width: 100%;
height: 30px;
background-color: #ffffff;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#cleanContents .cleanContentsFoot .contentsWrap {
margin-right: auto;
margin-left: auto;
width: 90%;
}
#cleanContents .cleanContentsFoot .colBlk {
padding: 5%;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: self-end;
align-content: flex-end;
}
#cleanContents .cleanContentsFoot figure {
width: 100%;
}
#cleanContents .cleanContentsFoot h2 {
font-size: max(1.1vw,24px);
word-break: keep-all;
}
#cleanContents .cleanContentsFoot .txtBlk {
font-size: max(1.1vw,16px);
text-align: justify;
}

/* parts Flow
|||||||||||||||||||||||||||||||||||| */
#Flow {
margin-bottom: 80px;
}
#Flow h1 {
margin-bottom: 40px;
}
#Flow .flowList {
width: 90%;
}
#Flow .flowList li {
display: flex;
flex-wrap: wrap;
border-bottom-right-radius: 17px;
border-bottom-left-radius: 17px;
position: relative;
font-size: max(4vw,16px);
}
#Flow .flowList li:nth-last-child(n+2)::after {
content: '';
margin: auto;
width: 1px;
height: 45px;
display: block;
border-right: 4px dotted #a03250;
position: absolute;
top: 100%;
right: 0;
left: 0;
}
#Flow .flowList li .num {
padding-top: 1em;
width: 100%;
border-top-right-radius: 17px;
border-top-left-radius: 17px;
text-align: center;
position: relative;
z-index: 1;
}
#Flow .flowList li .num::before {
content: '';
margin: auto;
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #a03250 transparent transparent transparent;
position: absolute;
top: 100%;
right: 0;
left: 0;
}
#Flow .flowList li .num img {
width: 70px;
}
#Flow .flowList li .colBlk {
padding: 2em 1em;
max-width: 100%;
position: relative;
z-index: 1;
}
#Flow .flowList li h2 {
font-size: max(1.1vw,27px);
}


/* contentsFooter
|||||||||||||||||||||||||||||||||||||||||||||| */
.contentsFooter .contentsWrap {
margin-right: auto;
margin-left: auto;
padding-bottom: 60px;
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contentsFooter .headKazari {
font-size: max(1.1vw,16px);
top: -30px;
}
.contentsFooter .headKazari::before {
height: 20px;
right: 25%;
bottom: -15%;
}
.contentsFooter .headKazari::after {
height: 30px;
right: 24%;
bottom: -19%;
}
.contentsFooter figure {
margin-top: 60px;
width: 100%;
}
.contentsFooter h1 {
font-size: max(1.1vw,27px);
}
.contentsFooter .colBlk {
padding-top: 60px;
width: 100%;
text-align: justify;
}
.contentsFooter .caption {
font-size: max(1.1vw,16px);
}
.contentsFooter .requestBtn {
margin-bottom: 60px;
width: 100%;
}



/* ServiceTea
|||||||||||||||||||||||||||||||||||| */
#ServiceTea .slideShow {
margin-bottom: 80px;
}




}/* SP END |||||||||||||||||||||||||||||||||||||||| */