@charset "utf-8";
/* reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,img,small,strong,sub,sup,b,i,dl,dt,dd,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;}
.itemCont {width: 1080px;}
.itemCont img {
    vertical-align:bottom;
    max-width:100%;
    height:auto;
}
.itemCont h1,h2,h3 {font-feature-settings: "palt";}
.content-wrap {max-width: 750px; margin: 0 auto; overflow: hidden;}
.content-wrap section {max-width: 750px;}
.posi-rela {position: relative;}
.ab-center{position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center;}  

/* text */
.content-wrap p {font-feature-settings: "palt"; line-height: 1.5;}
.sub-title {font-size: clamp(30px, 8vw, 60px); text-align: center; font-weight: 900;}
.ff-min { font-family: 'Noto Serif JP', serif;}
.ff-go { font-family: 'Noto Sans Japanese', sans-serif;}
.description {
text-align: justify;
line-height: 1.5;
letter-spacing: -0.03em;
font-size: clamp(18px, 4.5vw, 40px);
font-weight: 400;
}
.description-s {
text-align: justify;
line-height: 1.5;
letter-spacing: -0.03em;
font-size: clamp(14px, 3.7vw, 30px);
font-weight: 400;
}
.anno-txt {font-size: clamp(14px, 3vw, 24px); text-align: left;}
.note-line {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1.6em'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='%23ccc' stroke-width='2' stroke-dasharray='6,6'/></svg>");
  background-repeat: repeat-y;
  background-size: 100% 1.5em;
  line-height: 1.5;
}
.b-txt-120 {font-size: 120%;}
.b-txt-145 {font-size: 145%;}
.s-ttl {font-size: 60%; font-weight: 400;}
.s-txt-7 {font-size: 70%;}
.s-txt-8 {font-size: 80%;}
.glow { text-shadow: 0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff;}

/* utility */
.ut-mt-15 {margin-top: 15px;}
.ut-mb-5 {margin-bottom: 5px;}
.ut-mb-15 {margin-bottom: 15px;}
.ut-mb-30 {margin-bottom: 30px;}
.ut-mtb-10 {margin: 10px 0;}
.ut-mtb-15 {margin: 15px 0;}
.ut-mtb-30 {margin: 30px 0;}
.ut-btm {bottom: 0;}
.ut-top {top: 0;}
.visually-hidden {clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; position: absolute; white-space: nowrap; }

.bgc-a {background-color: #d9ebeb;}


/* content */

.mp-nxt {
    position: relative;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
    display: inline-block;
    padding: 0 0.8em 0.1em;
}
.mp-nxt::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg);
    border-radius: 9999px;
    z-index: -1;
}

.h-line {border-bottom: solid 3px;}
/* .u-line {border-bottom: solid 6px #ffa5b4;} */
.gradient-underline {
    background-image: linear-gradient(to right, #ffa5b4, #ffa5b4);
    background-repeat: no-repeat;
    background-position: 0% 92%;
    background-size: 100% 8px;
}
.highlight {
    background: #fff7b2;
}

.point-bln {
    display: inline-block;
    background-color: #f28656;
    color: #fff;
    font-weight: 600;
    font-size: clamp(11px, 3.25vw, 22px);
    border-radius: 5px;
    padding: 0em 0.8em 0.2em;
    position: relative;
    margin-bottom: 10px;
}

.point-bln::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 7px solid #f28656;
}

.mp-fv-ttl2 {top: 24%;}
.mp-01-ttl {top: 10%;}
.mp-02-ftr1 {position: absolute; width: 17%; left: 17%; top: 55%;}
.mp-02-ftrx {position: absolute; width: 12%; left: 39.5%; top: 56%; z-index: 99;}
.mp-02-ftr2 {position: absolute; width: 38%; right: 11%; top: 47%;}
.mp-02-nxt {width: 40%; bottom: 0%;}
.mp-05 {text-align: center;}
.mp-05-nxt {top: 1%;}
.mp-05-ttl {top: 7%;}
.ftr-f-wrap {
    top: 45%;
    padding: 5%;
    display: flex; 
    gap: 5%;
}
.frt-item {
    flex: 1;
    border: solid 5px #184f4a;
    border-radius: 20px;
    background-color: #ffffff;
    text-align: center;
}

.frt-item h3 {margin: 15px 0 0; font-size: clamp(12px, 3vw, 24px); }
.frt-item h2 {margin-bottom: 5px; font-size: clamp(30px, 7vw, 60px); font-weight: 800;}
.ftr-x {width: 20%; bottom: 28%;}
.impm {color: #ff6856;}
.gk2 {color: #008fdc;}

.mp-06 h2 {top: 2%; font-size: clamp(22px, 6vw, 44px); text-align: center; font-weight: 800; line-height: 1.5;}
.mp-07 h2 {top: 8%; font-size: clamp(22px, 6vw, 44px); text-align: center; font-weight: 800; line-height: 1.5;}


.flow-wrap {
    position: absolute;    
    width: 45%;
    text-align: center;
}

.mp-06 .flow-wrap {top: 55%; right: 5%;}
.mp-07 .flow-wrap {top: 55%; left: 5%;}
.mp-0607-x {width: 20%; top: -12%;}
.mp-flow {
    font-size: clamp(14px, 3.65vw, 28px);
    color: #ffffff;
    background-color: #184f4a;
    padding: 5px 15px;
    font-weight: 600;
}
.mp-flow-impm {background-color: #ff6856;}
.mp-flow-gk2 {background-color: #008fdc;}
.flow-tri-impm, .flow-tri-gk2 {
    width: 0;
    height: 0;
    border-style: solid;
    border-bottom: 0;
    display: inline-block;
}
.flow-tri-impm {
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    border-top: 19px solid #ff6856;
}
.flow-tri-gk2 {
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    border-top: 19px solid #008fdc;
}

.mp-08-nxt {top: 0%;}
.mp-08 h2 {top: 12%;}
.mp-09-ttl {
    position: absolute;
    top: 5%;
    left: 12.5%;
    font-size: clamp(26px, 6.5vw, 52px);
    font-weight: 800;
    color: #184f4a;
    line-height: 1.2;
    text-align: left;
}
.text-wrap {
    position: absolute;
    top: 28.5%;
    width: 44%;
    left: 12.5%;
}
.mp-10-plus {
    position: absolute;
    width: 25%;
    left: 3%;
    top: -12%;
}
.mp-10-ttl {
    top: 6%;
    font-size: clamp(22px, 6vw, 44px);
    font-weight: 800;
    color: #184f4a;
    line-height: 1.4;
    text-align: center;
}

.ex-wrap {
    top: 36%;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px 0;
}
.ex-item {flex-basis: 24.5%;}
.ex-item p {    font-size: clamp(11px, 2.5vw, 22px); line-height: 1.25;}

.mp-11-cp {top: 20%;}
.mp-11 p {
    font-size: clamp(14px, 3.65vw, 28px);
    font-weight: 800;
    text-align: center;
    color: #184f4a;
    line-height: 1.3;
}
.mp-11-ftr1 {position: absolute; top: 5%; right: 16.5%;}
.mp-11-ftr2 {position: absolute; top: 20%; right: 5%;}
.mp-11-ftr3 {position: absolute; top: 32%; right: 16.5%;}
.mp-12-cp {top: 45%;}
.mp-ttl-wrap {padding: 30px 0; background-image: linear-gradient(60deg, #ffffff, #fffef2); line-height: 1.5;}
.mp-13 {position: relative; text-align: center; }
.mp-13-ttl {text-align: center; color: #184f4a; line-height: 1.5;}
.mp-13-free {position: absolute; font-size: clamp(12px, 2.9vw, 24px);}
.mp-13-f1 {top: 19.5%; left: 22%;}
.mp-13-f2 {top: 19.5%; right: 22%;}
.mp-13-f3 {top: 45%; left: 7.5%;}
.mp-13-f4 {top: 48%; right: 7.5%;}
.mp-13-f5 {top: 76%; left: 24.5%;}
.mp-13-f6 {top: 76%; right: 25%;}
.mp-14-ttl {
    top: 6%;
    font-size: clamp(22px, 6vw, 44px);
    font-weight: 800;
    color: #184f4a;
    line-height: 1.3;
    text-align: left;
}
.mp-14-txt {position: absolute; top: 25%; left: 40%;}
.mp-15-txt {position: absolute; top: 15%; left: 10%;}
.mp-16-txt {position: absolute; top: 20%; left: 10%; text-align: left; text-decoration-line: underline; font-weight: 700; color:#184f4a ; line-height: 1.25;}

.mp-17 p {
    font-size: clamp(14px, 3.65vw, 28px);
    font-weight: 800;
    text-align: center;
    color: #184f4a;
    line-height: 1.3;
}
.mp-17-ftr1 {position: absolute; top: 7%; right: 25%;}
.mp-17-ftr2 {position: absolute; top: 19.5%; right: 8%;}
.mp-17-ftr3 {position: absolute; top: 28%; right: 28%;}
.mp-17-ftr4 {position: absolute; top: 40.5%; right: 11.5%;}

.mnzm-ttl {
    position: absolute;
    top: 10%;
    left: 13%;
    font-size: clamp(18px, 4.75vw, 36px);
    font-weight: 800;
    color: #184f4a;
    margin-bottom: 0.3em;
    line-height: 1.5;
    text-decoration-line: underline;
}
.mnzm-txt-1, .mnzm-txt-2,.mnzm-txt-3{
    position: absolute;
    text-align: justify;
    line-height: 1.5;
    letter-spacing: -0.03em;
    font-size: clamp(12.5px, 3.2vw, 26px);
    font-weight: 400;
    z-index: 99;
}

.mnzm-txt-1 {width: 23%; top: 21%; right: 13%;}
.mnzm-txt-2 {width: 35%; top: 48%; left: 13%;}
.mnzm-txt-3 {width: 50%; top: 76%; right: 10%;
    line-height: 1.35;
    font-weight: 800;
}
.mp-03-mouth {position: absolute; left: -5%; bottom: -4.5%; z-index: 9;}

/* frame */
/* --------voice -------- */
.voice .contTitle_wrap {
background-image: url("../../../img/item/mouthpeace/voice_01.jpg");
background-repeat: no-repeat;
}
.voice .contTitle_en {
background-color: #00a59e;
}
span.orange {
color: #00a59e;
}
.note {
text-align: right;
font-size: 14px;
color: #606060;
}


@media (max-width: 750px) {

.itemCont {width: 100%; margin-top: 20px;}
.itemCont section {width: 100%;}
.gradient-underline {background-size: 100% 4px;}

.frt-item {
    border: solid 3px #184f4a;
    border-radius: 10px;
}
.frt-item h3 {margin: 7.5px 0 0;}
.flow-tri-impm {
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 9.5px solid #ff6856;
}

.mp-09-ttl {top: 8%;}
.text-wrap {top: 31.5%;}
.flow-tri-gk2 {
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 9.5px solid #008fdc;
}

.h-line {border-bottom: solid 2px;}
.ex-wrap {gap: 5px 0;}
.voice .contTitle_wrap {
background-image: url("../../../img/item/mouthpeace/voice_01-sp.jpg");
}

}